🔥 V2 is in the making...!

Vue File Agent

Every file deserves to be treated equally

High performant Vue file upload component with elegant and distinguishable previews for every file type and support for drag and drop, validations, default uploader with progress support and externally customizable in the "vue way"

Live Demo · CodePen Playground

Contributors

Author

Contributors

Features

Exclusively designed for Vue with performance and simplicity in mind
No dependency but small footprint - 17KB minified, gzipped
Elegant and responsive design with two official themes: grid view and list view
File input with drag and drop with support for folders
Smooth Transitions
Multiple File Uploads
Max File Size, Accepted file types validation
Image/Video/Audio Previews
File type icons
Default uploader with progress
Externally controllable via Vue bindings and methods
Built in support for server side validation and error handling
Official Upload Server Examples for PHP and Node Js
File names can be edited with :editable prop
Intuitive drag & drop sortable with :sortable prop
Resumable uploads with :resumable prop through tus.io protocol
Can be used with any css/component framework, including but not limited to: Bootstrap, Bulma, Tailwind, Vuetify, etc.

Basic Usage

<template>
  <VueFileAgent :uploadUrl="uploadUrl" v-model="fileRecords"></VueFileAgent>
</template>

NOTE: when uploadUrl is provided, auto uploading is enabled. See Advanced Usage section below for manual uploading example.

<script>
  export default {
    data() {
      return {
        // ...
        fileRecords: [],
        uploadUrl: 'https://example.com',
        // ...
      };
    },
    // ...
  };
</script>

That's it?

Yes. That's it. It's that simple. See Advanced Usage section below to tailor it for your specific needs.

Installation

npm install vue-file-agent --save

import Vue from 'vue';
import VueFileAgent from 'vue-file-agent';
import VueFileAgentStyles from 'vue-file-agent/dist/vue-file-agent.css';

Vue.use(VueFileAgent);

or with script tag

<!-- jsdelivr cdn -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-file-agent@latest/dist/vue-file-agent.css" />
<script src="https://cdn.jsdelivr.net/npm/vue-file-agent@latest/dist/vue-file-agent.umd.js"></script>

<!-- unpkg -->
<link rel="stylesheet" href="https://unpkg.com/vue-file-agent@latest/dist/vue-file-agent.css" />
<script src="https://unpkg.com/vue-file-agent@latest/dist/vue-file-agent.umd.js"></script>

Download from Github

Advanced Usage

<template>
  <VueFileAgent
    ref="vueFileAgent"
    :theme="'list'"
    :multiple="true"
    :deletable="true"
    :meta="true"
    :accept="'image/*,.zip'"
    :maxSize="'10MB'"
    :maxFiles="14"
    :helpText="'Choose images or zip files'"
    :errorText="{
      type: 'Invalid file type. Only images or zip Allowed',
      size: 'Files should not exceed 10MB in size',
    }"
    @select="filesSelected($event)"
    @beforedelete="onBeforeDelete($event)"
    @delete="fileDeleted($event)"
    v-model="fileRecords"
  ></VueFileAgent>
  <button :disabled="!fileRecordsForUpload.length" @click="uploadFiles()">
    Upload {{ fileRecordsForUpload.length }} files
  </button>
</template>

<script>
  export default {
    data: function () {
      return {
        fileRecords: [],
        uploadUrl: 'https://www.mocky.io/v2/5d4fb20b3000005c111099e3',
        uploadHeaders: { 'X-Test-Header': 'vue-file-agent' },
        fileRecordsForUpload: [], // maintain an upload queue
      };
    },
    methods: {
      uploadFiles: function () {
        // Using the default uploader. You may use another uploader instead.
        this.$refs.vueFileAgent.upload(this.uploadUrl, this.uploadHeaders, this.fileRecordsForUpload);
        this.fileRecordsForUpload = [];
      },
      deleteUploadedFile: function (fileRecord) {
        // Using the default uploader. You may use another uploader instead.
        this.$refs.vueFileAgent.deleteUpload(this.uploadUrl, this.uploadHeaders, fileRecord);
      },
      filesSelected: function (fileRecordsNewlySelected) {
        var validFileRecords = fileRecordsNewlySelected.filter((fileRecord) => !fileRecord.error);
        this.fileRecordsForUpload = this.fileRecordsForUpload.concat(validFileRecords);
      },
      onBeforeDelete: function (fileRecord) {
        var i = this.fileRecordsForUpload.indexOf(fileRecord);
        if (i !== -1) {
        // queued file, not yet uploaded. Just remove from the arrays
          this.fileRecordsForUpload.splice(i, 1);
          var k = this.fileRecords.indexOf(fileRecord);
          if (k !== -1) this.fileRecords.splice(k, 1);
        } else {
          if (confirm('Are you sure you want to delete?')) {
            this.$refs.vueFileAgent.deleteFileRecord(fileRecord); // will trigger 'delete' event
          }
        }
      },
      fileDeleted: function (fileRecord) {
        var i = this.fileRecordsForUpload.indexOf(fileRecord);
        if (i !== -1) {
          this.fileRecordsForUpload.splice(i, 1);
        } else {
          this.deleteUploadedFile(fileRecord);
        }
      },
    },
  };
</script>

License

The MIT License

s-you / vue-file-agent Goto Github PK

vue-file-agent's Introduction

🔥 V2 is in the making...!

Vue File Agent

Sponsors

Live Demo · CodePen Playground

Contributors

Author

Contributors

Features

Basic Usage

That's it?

Installation

Advanced Usage

License

vue-file-agent's People

Contributors

Watchers

Recommend Projects

Recommend Topics

Recommend Org