Vuetify Upload Component

This is a simple upload component for Vuetify.

Installation:

In the <script> tag:

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuetify-upload-component"></script>
...
  <v-upload ...>
...

Or as a project dependency:

npm i vuetify-upload-component -s

Props:

Name <Type> | Description | Defaults | Notes --- | --- | --- | --- accept <String> | Limit accepted file-types. | "*" | More information... multiple <Boolean> | Set to accept multiple files. | false | label <String> | Header text. | "Attachments"

Usage examples:

Template:

Component with defaults:

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

Allow multiple files:

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

Accept only image files:

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

Script:

<script>
  import VUpload from "vuetify-upload-component"; // SSR and webpack
  
  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