Laravel File Uploader

This plugin register vue component to upload files using laravel-media-library.

Requirements

You should install ahmed-aliraqi/laravel-media-uploader composer package to work successfully.

Installation

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

Basic Usage

<div id="app">  
    <file-uploader  
            :unlimited="true"  
            collection="avatars"  
            name="media"  
            :tokens="{{ json_encode(old('media', [])) }}"  
            label="Upload Avatar"  
            notes="Supported types: jpeg, png,jpg,gif"
            :display-validation-messages="true"  
    ></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>  

Configure With Laravel Ui

// app.js  
  
import FileUploader from 'laravel-file-uploader';  
  
Vue.use(FileUploader);  

Usage

<file-uploader :media="{{ $user->getMediaResource('avatars') }}"  
               :unlimited="true"  
               collection="avatars"  
               name="media"  
               :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>  

Working with images

You optimize images size before uploading by adding max-{width|height} attribute and will upload the image as a base64 file:

<file-uploader :media="{{ $user->getMediaResource('avatars') }}"  
               :unlimited="true"  
               collection="avatars"  
               name="media"  
               max-width="800"  
               max-height="800"  
               :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 |
|--|--|--|--|
| name | optional - default: media |string | the name of tokens fields |
| 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|
|name| optional - default: null|array|the input name of the uploader|
|max-width| optional - default: 1200|string|The maximum width of uploaded image|
|max-height| optional - default: 1200|string|The maximum height of uploaded image| |display-validation-messages| optional - default: false|boolean|Used for displaying validation messages|

Use With Vue Or SPA Applications

<file-uploader   
    name="media"  
    v-model="tokens"  
></file-uploader>  
  
<script>  
    new Vue({  
        el: '#app',  
        data() {  
            return {  
                tokens: []  
            }  
        }  
    })  
</script>  

Events

• beforeUpload
• complete

<file-uploader   
   label="Upload File"   
   @beforeUpload="handleBeforeUpload()"  
   @complete="handleComplete()"  
></file-uploader>  

• upload-error

<file-uploader   
   label="Upload File"   
   @beforeUpload="handleBeforeUpload()"  
   @upload-error="errorHandler"
></file-uploader>  
<script>  
    new Vue({  
        el: '#app',  
        methods: {  
		  errorHandler(error) {  
			  console.log(error.file) // the file object  
			  console.log(error.response) // the error response from the server  
			  console.log(error.status) // the error status code from the server  
		  }  
		}
    })  
</script> 

File Preview Component

This component used to preview uploaded media (images, audios, videos).

<file-preview :media="{{ $user->getMediaResource('avatars') }}"></file-preview>  

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

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