To use this component, make sure you've loaded Vue in your application. By using this component, you can easily browse for files to upload.
Quick install
NPM:
npm install @spicycoding/vue-file-uploader
Yarn
yarn add @spicycoding/vue-file-uploader
Documentation
Add this at the top of your javascript file
import FileUploader from '@spicycoding/vue-file-uploader';
Now add it to the components object of your Vue instance.
components: { 'vue-file-uploader': FileUploader },
You can put the component in your HTML like this
<vue-file-uploader upload-url="/upload.php"></vue-file-uploader>
You don't need to import any CSS files, everything will just work as expected. If you want to pass a csrf token, you can do that by adding this to the component:
csrf-token="your-token"
Listen for events
You can add the @success
and @error
events to your component to do whatever you want to do after the XMLHttpRequest finished. For example:
<vue-file-uploader @success="mySuccessMethod" @error="myErrorMethod" upload-url="/upload.php"></vue-file-uploader>
Custom translations
You can edit the default translations by using the setTranslations
method:
FileUploader.setTranslations({
noFilesFound: 'No files found.',
filename: 'Filename',
buttons: {
browse: 'Browse for files',
delete: 'Delete',
clear: 'Clear queue',
upload: 'Upload files',
}
});
The upload manager will only work on HTML5 supported browsers!
Thank you for using our file uploader!
Kind regards,
Pim vd Molen (Spicy Coding)