A simple file upload component for Vue.js. Emits events for XHR Upload Progress for nice progress bars.

I came up with the original idea when looking at this repo. I knew I wanted a nice component with upload progress and so I copied some code from that library.

Available through npm as vue-file-upload-component. Or include as an inline script, like in example.html.

In order to use the demo, you need to have PHP setup and this project running under a server. There is a script in the root called upload.php, which is a simple script to handle single file uploads. Most likely you will have your own way of handling files.

You can set headers for the submission by using the attribute v-bind:headers="xhrHeaders". xhrHeaders may look something like this:

// ... Vue stuff above
data: {
  xhrHeaders: {
    "X-CSRF-TOKEN": "32charactersOfRandomStringNoise!"
  }
},
// ... more stuff below

You can set many headers in the object.

This upload script only uploads 1 file at a time. The upload handler uses Promises internally to know when all the files are uploaded.

If you are using Internet Explorer, you will probably need a polyfill. I have used this one before and it is small and well tested.

You also need support for FormData but it has higher support than Promises so you are probably fine.