Vuetify Upload Component

This is a simple upload component for Vuetify.

Install:

npm i vuetify-upload-component -s

Props:

accept <String>: Limit accepted file-types. [default: "*"] More information...

multiple <Boolean>: Set to accept multiple files. [default: "false"]

label <String>: Header text. [default: "Attachments"]

Usage examples:

Template:

Component with defaults:

<template>
  <v-upload v-model="files"></v-upload>
</template>

Allow multiple files:

<template>
  <v-upload v-model="files" multiple></v-upload>
</template>

Accept only image files:

<template>
  <v-upload v-model="files" accept="image/*"></v-upload>
</template>

Script:

<script>
  import VUpload from "vuetify-upload-component";
  
  export default {
    components: { VUpload },

    data: () => ({
      files: [] // An array of files received from the vuetify_upload_component
    }),
    
    methods: {
      doSomethingWithFiles: () => {
        if (this.files) {
          this.files.forEach(file => {
            const reader = new FileReader();
        
            reader.onload = () => {
              /*
               * Do something with the file
               */
            }

            reader.readAsBinaryString(file);
          }
        }
      }
    }
  }
</script>

Useful links:

FileReader API Example

1.8 KiB Raw Blame History