vue-easy-multi-file-uploader

File uploading made easy for vueJs. Custom validators, custom styling, file preview support for image & videos...

Please use the latest version.

How to use

1. Install package via npm

npm i vue-easy-multi-file-upload --save

2. Import & use

<template>
  <div id="app">
    <VueEasyMultiFileUpload :config="config" v-model="values" />
    {{values}}
  </div>
</template>

<script>
import VueEasyMultiFileUpload from "vue-easy-multi-file-upload";

export default {
  components: { VueEasyMultiFileUpload },
  data() {
    return {
      config: {
        id: "multi-file-uploader",
        label: "Upload your files",
        maxFiles: 6,
        uploadUrl: "...",
        deleteUrl: "...",
        uploadHttpMethod: "POST",
        deleteHttpMethod: "DELETE",
        uploadFieldName: "file",
        deleteFieldName: "filePath",
        Authorization: "Bearer ...",
        style: {
          width: "90px",
          height: "75px",
        },
        allowExt: ["jpg", "png", "gif", "mp4", "txt", "webm", "pdf"],
        maxSize: 5,
        delimiter: "|",
        customValidator: (file) => {
          // ... custom validation logic ...
          return {
            status: true, // or false
            message: "It passes validation" // or null
          }
          // Tip: function can be async, can also return promise
        }
      },
      values: null
    };
  },
};
</script>

Props

There is only one prop i.e. config. Fields marked with asterisk(*) are required.

Name	Description	Default Value
*uploadUrl*	URL to upload file. Specified request is sent as FormData.
uploadHttpMethod*	HTTP method for uploadUrl. Generally it's either POST or PUT.	POST
uploadFieldName*	Name of key for FormData that holds file.	file
deleteUrl	URL to delete file. Specified request is sent to this url with application/json ContentType & uploaded file's path.
deleteHttpMethod	HTTP method for deleteUrl. Generally its DELETE, can also be POST or PUT.	DELETE
deleteFieldName	fieldName containing file path to delete.	filePath
Authorization	Authorization header. eg: Beaker token
allowExt*	File extensions to allow. Used for validating file before upload.	["jpg", "png", "gif", "mp4", "txt", "pdf"]
maxSize	Max size of file in Mb.
maxFiles	Maximum number of files to upload
label	Text to show at initial state. Also supports HTML.	Upload a file
uploadingMessage	Text to show at uploading state. Also supports HTML.	Loading...
style	Custom style for file upload section. Accepts style in plain string or object
delimiter	If delimiter is specified, a single string containing file paths seperated by delimeter is returned. eg: pipes, comma
id	Id of parent element	multi-file-uploader
customValidator	Custom validation for uploaded file before sending it to server. View example above.
compress	Compress images. Uses compressorjs	false
compressorOptions	Compressorjs options. View compressorjs for more details	null

Events

Name	Description
@input	Fired when new file is uploaded or existing file is deleted