daalvand / laravel-media-uploader

This package used to upload files using laravel-media-library before saving model.

Laravel Media Uploader

This package used to upload files using laravel-media-library before saving model.

In this package all uploaded media will be processed.

• All videos will converted to mp4.
• All audios will converted to mp3.
• All images width & height & ratio will be saved as custom property.
• All videos & audios duration will be saved as custom property.

Requirements

• PHP >= 7.4
• You should be ensured that the ffmpeg was installed on your server

Installation

composer require ahmed-aliraqi/laravel-media-uploader

The package will automatically register a service provider.

You need to publish and run the migration:

php artisan vendor:publish --provider="AhmedAliraqi\LaravelMediaUploader\Providers\UploaderServiceProvider" --tag="migrations"

php artisan migrate

Publish laravel-media-library migrations:

php artisan vendor:publish --provider="Spatie\MediaLibrary\MediaLibraryServiceProvider" --tag="migrations"
php artisan migrate

If you want to customize attachments validation rules, you should publish the config file:

php artisan vendor:publish --provider="AhmedAliraqi\LaravelMediaUploader\Providers\UploaderServiceProvider" --tag="config"

If you want to customize validation translations, you should publish the lang files:

php artisan vendor:publish --provider="AhmedAliraqi\LaravelMediaUploader\Providers\UploaderServiceProvider" --tag="uploader:translations"

This is the default content of the config file:

<?php

return [
    /*
     * Regenerate uploaded media after assign to model
     */
    'regenerate-after-assigning' => true,

    'documents_mime_types' => [
        'application/msword',
        'application/vnd.openxmlformats-officedocument.wordprocessingml.document', // .doc & .docx
        'application/vnd.ms-powerpoint',
        'application/vnd.openxmlformats-officedocument.presentationml.presentation', // .ppt & .pptx
        'application/vnd.ms-excel',
        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', // .xls & .xlsx
        'text/plain',
        'application/pdf',
        'application/zip',
        'application/x-rar',
        'application/x-rar-compressed',
        'application/octet-stream',
    ],
];

Use HasUploader trait in your model:

<?php

namespace App;


use Spatie\MediaLibrary\InteractsWithMedia;
use Spatie\MediaLibrary\MediaCollections\Models\Media;
use Spatie\MediaLibrary\HasMedia;
use AhmedAliraqi\LaravelMediaUploader\Entities\Concerns\HasUploader;

class Blog extends Model implements HasMedia
{
    use InteractsWithMedia, HasUploader;
    ...
}

In your controller use addAllMediaFromTokens() method to assign the uploaded media to model using the generated tokens:

class BlogController extends Controller
{
        public function store(Request $request)
        {
            $blog = Blog::create($request->all());
            
            $blog->addAllMediaFromTokens();
    
            return back();
        }
}

If you do not add any arguments in addAllMediaFromTokens() method will add all tokens in request('media') with any collection.

If you want to save specific collection name add it to the second argument.

// specified collection name
$blog->addAllMediaFromTokens([], 'pictures');

// specified tokens
$blog->addAllMediaFromTokens($request->input('tokens', []), 'pictures');

Front End Basic Usage

<div id="app">
    <file-uploader
            :unlimited="true"
            collection="avatars"
            :tokens="{{ json_encode(old('media', [])) }}"
            label="Upload Avatar"
            notes="Supported types: jpeg, png,jpg,gif"
            accept="image/jpeg,image/png,image/jpg,image/gif"
    ></file-uploader>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/laravel-file-uploader"></script>
<script>
  new Vue({
    el: '#app'
  })
</script>

Or Install Component Via NPM

npm i laravel-file-uploader --save-dev

Now you should register the component in your resources/js/app.js:

// app.js

import FileUploader from 'laravel-file-uploader';

Vue.use(FileUploader);

Usage

<file-uploader :media="{{ $user->getMediaResource('avatars') }}"
               :unlimited="true"
               collection="avatars"
               :tokens="{{ json_encode(old('media', [])) }}"
               label="Upload Avatar"
               notes="Supported types: jpeg, png,jpg,gif"
               accept="image/jpeg,image/png,image/jpg,image/gif"
></file-uploader>

Attributes

Attribute	Rule	Type	Description
media	optional - default: []	array	used to display an existing files
unlimited	optional - default:false	boolean	upload unlimited files - if let it false will not be multiple select
max	optional - default:12	int	the maximum uploaded files - if 1 will not me multiple select
accept	optional - default: *	string	the accepted mime types
form	optional - default: false	string	the form id of the uploaded media
notes	optional - default null	string	the help-block that will be displayed under the files
label	optional - default null	string	the label of the uploader
collection	optional - default default	string	the media library collection that the file will store in
tokens	optional - default: []	array	the recently uploaded files tokens, used to display recently uploaded files in validation case
max-width	optional - default: 1200	string	The maximum width of uploaded image
max-height	optional - default: 1200	string	The maximum height of uploaded image

Using with BsForm

This uploader support laravel-bootstrap-forms you can use the image custom component instead of vue html tag:

{{ BsForm::image('avatar')->collection('avatars')->files($user->getMediaResource('avatars')) }}
{{ BsForm::audio('audio')->collection('audios')->files($user->getMediaResource('audios')) }}
{{ BsForm::video('video')->collection('videos')->files($user->getMediaResource('videos')) }}
{{ BsForm::media('media')->collection('videos')->accept('video/*')->files($user->getMediaResource('videos')) }}

{{ BsForm::image('avatar')->max(3)->collection('avatars')->files($user->getMediaResource('avatars')) }}

{{ BsForm::image('avatar')
    ->max(3)
    ->collection('avatars')
    ->maxWidth(500)
    ->maxHeight(500)
    ->files($user->getMediaResource('avatars')) }}

{{ BsForm::image('image')->unlimited()->files($user->getMediaResource()) }}

{{ BsForm::image('avatar')->collection('avatars') }}

Note: do not forget to add Cron job in your server to remove the expired temporary media.

* * * * * cd /path-to-your-project && php artisan schedule:run >> /dev/null 2>&1

Note: Do not forget to store the csrf token in an HTML meta tag:

<meta name="csrf-token" content="{{ csrf_token() }}">

API

• Upload Files
  • endpoint: /api/uploader/media/upload
  • method: POST
  • body:
    • files[]: multipart form data
  • response:
    • 
• Display Recently Uploaded Files
  • endpoint: /api/uploader/media
  • method: GET
  • params:
    • tokens[]: temporary token
  • response:
    • 
• Delete Files
  • endpoint: /api/uploader/media/{id}
  • method: DELETE
  • response:
    •