Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/safrazik/vue-file-agent

The most beautiful and full featured file upload component for Vue JS
https://github.com/safrazik/vue-file-agent

Last synced: about 2 months ago
JSON representation

The most beautiful and full featured file upload component for Vue JS

Lists

README 

        
#### 🔥 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"






## Sponsors



[Become a Sponsor/Supporter](https://www.patreon.com/safrazik)



## [Live Demo][] · [CodePen Playground](https://codepen.io/safrazik/pen/BaBpYme)



![Demo](website/assets/demo.gif?v=1.5)



## Contributors



### Author



[![safrazik](https://avatars1.githubusercontent.com/u/3174706?s=50&v=4)](https://github.com/safrazik)



### Contributors



[![kevinleedrum](https://avatars1.githubusercontent.com/u/3342530?s=40&v=4)](https://github.com/kevinleedrum)

[![seriouslag](https://avatars1.githubusercontent.com/u/14366926?s=40&v=4)](https://github.com/seriouslag)

[![codeflorist](https://avatars1.githubusercontent.com/u/41453547?s=40&v=4)](https://github.com/codeflorist)

[![algm](https://avatars1.githubusercontent.com/u/146385?s=40&v=4)](https://github.com/algm)

[![yanqd0](https://avatars1.githubusercontent.com/u/8525143?s=40&v=4)](https://github.com/yanqd0)



## 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](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](https://tus.io) protocol

- Can be used with any css/component framework, including but not limited to: Bootstrap, Bulma, Tailwind, Vuetify, etc.



## Basic Usage



```html



  



```



**NOTE:** when `uploadUrl` is provided, auto uploading is enabled. See [Advanced Usage](#advanced-usage) section below for manual uploading example.



```html



  export default {

    data() {

      return {

        // ...

        fileRecords: [],

        uploadUrl: 'https://example.com',

        // ...

      };

    },

    // ...

  };



```



### That's it?



Yes. That's it. It's _that_ simple. See [Advanced Usage](#advanced-usage) section below to tailor it for your specific needs.



## Installation



```

npm install vue-file-agent --save

```



```javascript

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



```html



```



[Download from Github](https://github.com/safrazik/vue-file-agent/releases)



## Advanced Usage



```html



  

  

    Upload {{ fileRecordsForUpload.length }} files

  



```



```html



  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);

        }

      },

    },

  };



```



## License



The MIT License



## [Live Demo][]



[live demo]: https://safrazik.github.io/vue-file-agent