Upload (multiple) files with Vue

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)