ahmed-aliraqi / laravel-media-uploader
This package used to upload files using laravel-media-library
Installs: 15 993
Dependents: 2
Suggesters: 0
Security: 0
Stars: 328
Watchers: 5
Forks: 36
Open Issues: 3
Requires
- php: >=7.4
- laraeast/laravel-bootstrap-forms: >=5.0
- laravel/framework: >=5.7
- php-ffmpeg/php-ffmpeg: ^1.0
- spatie/laravel-medialibrary: ^9.0|^10.0
Requires (Dev)
- mockery/mockery: ^1.4
- orchestra/testbench: >=3.0
- dev-master
- v7.0.0
- v6.3.5
- v6.3.4
- v6.3.3
- v6.3.2
- v6.3.1
- v6.3.0
- v6.2.0
- v6.1.2
- v6.1.1
- v6.1.0
- v6.0.1
- v6.0.0
- v5.1.1
- v5.1.0
- v5.0.2
- v5.0.1
- v5.0.0
- v4.1.2
- v4.1.1
- v4.1.0
- v4.0.0
- v3.x-dev
- v3.0.1
- v3.0.0
- v2.x-dev
- v2.1.0
- v2.0.1
- v2.0.0
- v1.0.1
- v1.0.0
- dev-processing-media
- dev-media-regenerate
- dev-analysis-ZlNL9a
- dev-analysis-KZd2nA
- dev-analysis-OM0MB0
- dev-circleci-project-setup
This package is auto-updated.
Last update: 2024-03-01 00:13:28 UTC
README
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 inrequest('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 HTMLmeta
tag:
<meta name="csrf-token" content="{{ csrf_token() }}">