VueJS fileuploader

There are a couple of libraries available for file upload in VueJS. What I use is Element Components library. Here is the file upload component in Element: http://element.eleme.io/#/en-US/component/upload

You can install Element and import 'upload' component alone.

Or there are standalone components like

https://github.com/lian-yue/vue-upload-component

https://github.com/saivarunk/vue-simple-upload

https://github.com/abarta/vue2-multi-uploader

https://github.com/rowanwins/vue-dropzone

You can use this, which allows for drag and drop: https://github.com/plantain-00/file-uploader-component

In component:

<file-uploader @file-uploaded="addFileToForm(arguments[0])" multiple="false"></file-uploader>

And in your methods:

addFileToForm(e) {
    this.form.file = e // gets the full file object
    this.form.file_name = e.name // get the name of the file
}

Then you can submit the form using multipart/form-data.

You can try my component which I use as filePicker:

<template>
  <input v-show="showNative" type="file" :name="name" @change="onFileChanged" :multiple="multiple" :accept="accept"/>
</template>

<script>

/**
 * Handles system files selection and provides the selected files.
 * 
 * How to use:
 * 
 * - import the component -> declare the directive.
 * - provide a <name> -> is used for the formData creation (is the name which is going to backend).
 * - to display it us the <show> property 
 *   Note: sync recommended if needed to be opened multiple times in the same page. Check the bottom examples. ( /!\ Vue 2.3 required for sync /!\ )
 * - listen to @files event to get an array of selected files as parameter
 * - if you want to use it as multiple file select, then provide the property <multiple> as true.
 * - use <accept> prop to filter the files (valid accept types: https://stackoverflow.com/questions/11832930/html-input-file-accept-attribute-file-type-csv).
 * - when <showNative> is set to true, the component displays 'select file' button (input type file), otherwise it is hidden, and windows displayed by Js.
 */
export default {
  props: {
    name: { type: String, required: true },
    show: { type: Boolean, Default: false },
    multiple: { type: Boolean, default: false },
    accept: { type: String, default: "" },
    showNative: { type: Boolean, default: false }
  },
  watch: {
    show(value) {
      if (value) {
        // Resets the file to let <onChange> event to work.
        this.$el.value = "";

        // Opens select file system dialog.
        this.$el.click();

        // Resets the show property (sync technique), in order to let the user to reopen the dialog.
        this.$emit('update:show', false);
      }
    }
  },
  methods: {
    onFileChanged(event) {
      var files = event.target.files || event.dataTransfer.files;
      if (!files.length) {
        return;
      }

      var formData = new FormData();

      // Maps the provided name to files.
      formData.append(this.name, this.multiple ? files : files[0]);

      // Returns formData (which can be sent to the backend) and optional, the selected files (parent component may need some information about files).
      this.$emit("files", formData, files);
    }
  }
}
</script>

And you can use it simple like this:

  SINGLE SELECT
   <file-upload name="fooImport" @files="selectedFile" :show.sync="true" />

  MULTIPLE SELECT
   <file-upload name="barUpload" @files="selectedFiles" :show.sync="displayUpload" accept="text/plain, .pdf" />

The callback:

selectedFiles(formData) {
  // FOR EXAMPLE
  Axios.post('/api/upload/', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  });
},

Hope it helps :)