This plugin register vue component to upload files using laravel-media-library.
You should install ahmed-aliraqi/laravel-media-uploader composer package to work successfully.
npm i laravel-file-uploader --save-dev<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"
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>// app.js
import FileUploader from 'laravel-file-uploader';
Vue.use(FileUploader);<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>| 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 |
- beforeUpload
- complete
<file-uploader
label="Upload File"
@beforeUpload="handleBeforeUpload()"
@complete="handleComplete()"
></file-uploader>Note: Do not forget to store the laravel
csrftoken in an HTMLmetatag:
<meta name="csrf-token" content="{{ csrf_token() }}">
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent