Vue.js file upload component, Multi-file upload, Upload directory, Drag upload, Drag the directory, Upload multiple files at the same time, html4 (IE 9), `PUT` method, Customize the filter

Last update: Aug 13, 2022

vue-upload-component

npm npm license gzip

Vue.js file upload component The component is just a button

  • Multi-file upload
  • Upload directory
  • Drag upload
  • Drag the directory
  • Upload multiple files at the same time
  • html4 (IE 9)
  • PUT method
  • Customize the filter
  • thumbnails
  • Chunk upload

Example

https://lian-yue.github.io/vue-upload-component/

Installation

npm install vue-upload-component --save

Vue3

npm install [email protected] --save

Documentation

https://lian-yue.github.io/vue-upload-component/#/documents

Vue.js 文件上传组件 组件只是一个按钮

  • 上传多文件
  • 上传目录
  • 拖拽
  • 拖拽目录
  • 多线程
  • html4(IE 9)
  • PUT 方法
  • 自定义过滤器
  • 缩略图

演示

https://lian-yue.github.io/vue-upload-component/#/zh-cn/

安装

npm install vue-upload-component --save

Vue3

npm install [email protected] --save

文档

https://lian-yue.github.io/vue-upload-component/#/zh-cn/documents

Special thanks (特别感谢)

GitHub

https://github.com/lian-yue/vue-upload-component
Comments
  • 1. 组件为什么上传又被无限次触发了???急。。。

    你好,我用这个上传组件,想要实现一个上传页面和批量上传后的任务管理页面,来同步的更改上传文件的各种信息,进行取消和重新上传的操作,因为是兄弟组件,我在上传页面,使用watch 监听了上传组件的files,使用this.$emit("files-upload", this.files),传递给父组件,在给任务管理页面,实现兄弟组件的数据传递,在ie 10 ,和chrome 中都没有问题,可是在FireFox 中,watch 会产生个死循环,一直调用上传的接口,页面都卡死了。。。这个问题怎么解决,组件为什么上传又被无限次触发了???急。。。

    Reviewed by zhangzeting1314 at 2017-08-28 12:13
  • 2. Ability to use custom component as trigger

    Hello, I'm trying to use a child element (or a custom component) to trigger the filer picker window, like this:

    <uploader>
      <button type="button">Browse</button>
    </uploader>
    

    However, this doesn't seem to work, while this works:

    <uploader>Browse</uploader>
    

    Is there a way I can accomplish this?

    Thanks

    Reviewed by tegola at 2018-01-08 11:05
  • 3. Simaltaneous File Uploads when set to multiple

    So far this has been working great with vuex-2 and its configurations and examples has helped me so much. Thank you. Is there a way to enable simultaneous file uploads instead of one after the other?

    Reviewed by abishekrsrikaanth at 2017-03-09 23:12
  • 4. Alert to show file is sucessfully uploading / No error

    I'm trying to fire a toast message, when the file is successfully uploading. (Upload is in progress)

    So no error has been found so the file will be uploaded.

    I can send a message if the file has been fully uploaded, but I want to show a message to say for example, a large file is being uploaded.

    Any suggestions?

    Reviewed by mezzaninegold at 2017-09-01 14:28
  • 5. Upload file not working with two component include upload component

    I have a problem:

    <component>
     <media-modal>
       <file-upload>1</file-upload>
     </media-modal>
     <media-modal>
       <file-upload>2</file-upload>
     </media-modal>
    <component>
    

    When I upload file in <file-upload>2</file-upload> then file uploaded in <file-upload>1</file-upload>. I think its conflict id of file-upload, but I add input-id in <file-upload> then button upload not working. Can you support for me? Thank you!

    Reviewed by BuiHuyCuong at 2018-10-19 10:56
  • 6. How can i apply vuex to this component?

    Hi,

    I'd like to use this component for video upload.

    so, it is important to apply vuex.

    I coded like "Vuex.vue" and "Full.vue" but it does not work well...

    When i start the upload first, it runs well, but after i travel other pages and come back, upload stopped.

    ( file list were still exists but couldn't start again... but it is not really what i want. as you know, file uploading have to keep processing like c++ threads )

    please, give me advise for it


    MultiUpload.vue

    <template>
        <div>
            <div>
                Welcome back, {{ID}}
            </div>
            <div class="upload">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th width="5%">#</th>
                            <th width="45%">Name</th>
                            <th width="10%">Size</th>
                            <th width="10%">Speed</th>
                            <th width="10%">Status</th>
                            <th width="20%">Action</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(file, index) in files" :key="file.id">
                            <td>{{index}}</td>
                            <td>
                            <div class="filename">
                                {{file.name}}
                            </div>
                            <div class="progress" v-if="file.active || file.progress !== '0.00'">
                                <div :class="{'progress-bar': true, 'progress-bar-striped': true, 'bg-danger': file.error, 'progress-bar-animated': file.active}" role="progressbar" :style="{width: file.progress + '%'}">{{file.progress}}%</div>
                            </div>
                            </td>
                            <td>{{file.size | prettyBytes }}</td>
                            <td>{{file.speed | prettyBytes }}</td>
    
                            <td v-if="file.error">{{file.error}}</td>
                            <td v-else-if="file.success">success</td>
                            <td v-else-if="file.active">active</td>
                            <td v-else></td>
                            <td>
                            <div class="btn-group">
                                <button class="btn btn-secondary btn-sm" type="button" v-if="!file.active && !file.success && file.error !== 'abort'" @click.prevent="$refs.upload.update(file, {active: true, error: '', progress: '0.00'})">
                                    <i class="fa fa-arrow-up" aria-hidden="true"></i>
                                </button>
                                <button class="btn btn-secondary btn-sm" type="button" v-if="file.error && file.error !== 'compressing' && $refs.upload.features.html5" @click.prevent="$refs.upload.update(file, {active: true, error: '', progress: '0.00'})">
                                    <i class="fa fa-refresh" aria-hidden="true"></i>
                                </button>
                                <button class="btn btn-secondary btn-sm" type="button" v-if="file.active" @click.prevent="$refs.upload.update(file, {active: false , error: '', progress: '0.00'})" >
                                    <i class="fa fa-stop" aria-hidden="true"></i>
                                </button>
                                <button class="btn btn-secondary btn-sm" type="button" v-if="!$refs.upload || !$refs.upload.active" @click.prevent="$refs.upload.remove(file)" >
                                    <i class="fa fa-times" aria-hidden="true"></i>
                                </button>
                            </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <file-upload
                    class="btn btn-defualt"
                    :post-action="postAction"
                    :extensions="extensions"
                    :accept="accept"
                    :multiple="true"
                    :size="1024 * 1024 * 1024 * 5"
                    :value="files"
                    @input="inputUpdate"
                    :name="uploadFieldName"
                    :thread="4"
                    ref="upload">
                    <i class="fa fa-plus"></i>
                    Select files
                </file-upload>
                <button type="button" class="btn btn-default" v-if="!$refs.upload || !$refs.upload.active" @click.prevent="$refs.upload.active = true" >
                    <i class="fa fa-arrow-up" aria-hidden="true"></i>
                    Upload All
                </button>
                <button type="button" class="btn btn-default" @click.prevent="filelistclear()">
                    <i class="fa fa-trash-o" aria-hidden="true"></i>
                    Clean List
                </button>
            </div>
        </div>
    </template>
    
    <script>
    import axios from "axios";
    import Vue from "vue";
    import VueResource from "vue-resource";
    import VueProgress from "vue-progress";
    
    import { Table, TableColumn } from "element-ui";
    import {
      Switch as LSwitch,
      Radio as LRadio,
      Checkbox as LCheckbox,
      FormGroupInput as FgInput
    } from "src/components/index";
    
    /*      for using vuex      */
    import * as store from "../../../store/store";
    import { mapState } from "vuex";
    
    Vue.use(mapState);
    Vue.use(store);
    
    Vue.use(VueProgress);
    Vue.use(VueResource);
    
    import FileUpload from "vue-upload-component";
    const VueUploadComponent = require("vue-upload-component");
    Vue.component("file-upload", VueUploadComponent);
    
    Vue.filter("prettyBytes", function(num) {
      // jacked from: https://github.com/sindresorhus/pretty-bytes
      if (typeof num !== "number" || isNaN(num)) {
        throw new TypeError("Expected a number");
      }
    
      var exponent;
      var unit;
      var neg = num < 0;
      var units = ["B", "kB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
    
      if (neg) {
        num = -num;
      }
    
      if (num < 1) {
        return (neg ? "-" : "") + num + " B";
      }
    
      exponent = Math.min(
        Math.floor(Math.log(num) / Math.log(1000)),
        units.length - 1
      );
      num = (num / Math.pow(1000, exponent)).toFixed(2) * 1;
      unit = units[exponent];
    
      return (neg ? "-" : "") + num + " " + unit;
    });
    
    export default {
      component: {
        LSwitch,
        [Option.name]: Option,
        [Table.name]: Table,
        [TableColumn.name]: TableColumn,
        FileUpload
      },
      computed: mapState({
        files: state => state.files
      }),
    
      methods: {
        filelistclear: function() {
          /* this.$store.commit("updateFiles", files); */
          /* this.files = []; */
          this.$store.commit("updateFiles", []);
        },
        inputFilter(newFile, oldFile, prevent) {
          if (newFile && !oldFile) {
            if (/(\/|^)(Thumbs\.db|desktop\.ini|\..+)$/.test(newFile.name)) {
              return prevent();
            }
            if (/\.(php5?|html?|jsx?)$/i.test(newFile.name)) {
              return prevent();
            }
          }
        } /*
        inputFile(newFile, oldFile) {
          if (newFile && !oldFile) {
            // add
            console.log("add", newFile);
          }
          if (newFile && oldFile) {
            // update
            //this.$store.commit('updateFiles', newFile)
            console.log("update", newFile);
          }
          if (!newFile && oldFile) {
            // remove
            //this.$store.commit('updateFiles', oldFile)
            console.log("remove", oldFile);
          }
        },*/,
        inputUpdate(files) {
          console.log("updated", files);
          this.$store.commit("updateFiles", files);
        }
      },
      data() {
        return {
          ID: "[email protected]",
          page: "http://localhost:4853a7/uploads",
          uploadFieldName: "",
          postAction: "http://localhost:48537/uploads",
          extensions: "mp4,avi,mkv,mpg,swf,vob,wmv,flv,m4v,asf,rm,srt",
          /* files: [], */
          accept:
            "video/webm,video/ogg,video/mpeg,video/mp4,video/mkv,video/wmv,video/swf,video/asf,video/avi,video/mpg,video/vob,video/flv"
        };
      }
    };
    </script>
    
    <style>
    .extended-forms .el-select {
      width: 100%;
      margin-bottom: 30px;
    }
    
    .extended-forms .progress {
      margin-bottom: 30px;
    }
    </style>
    

    /src/store/store.js

    // import Vue from 'vue'
    import Vuex from 'vuex'
    import Vue from 'vue'
    // import master from '../App.vue'
    //
    Vue.use(Vuex)
    
    const state = {
      files: []
    }
    
    const mutations = {
      updateFiles (state, files) {
        state.files = files
      }
    }
    export default new Vuex.Store({
      strict: true,
      state,
      mutations
    })
    
    

    /src/store/index.js

    module.exports = require('./FileUpload.vue')
    
    
    Reviewed by ktokw at 2018-01-17 10:21
  • 7. 移动端ios测试,好像并不能限制图片格式

    accept: 'image/png,image/jpeg,image/jpeg',extensions: 'jpg,jpeg,png'这个是我的设置,我做的webapp,项目在电脑上打开是可以正确限制图片格式的,但是在手机上(苹果机测试)好像并不能限制选择的图片格式(测试上传web成功),不知什么原因

    Reviewed by rainwalkerhu at 2017-11-07 09:05
  • 8. dynamic post-action

    I need to send custom params through post-action URL, how can I do that using the post-action attribute? I tried to create a method but returns Expected String, not Function error in console.

    Reviewed by juanbrujo at 2017-10-23 19:17
  • 9. Special characters in filenames

    Is it possible to restrict certain / special characters from the file names.

    Just had users uploading files with , & / in their filenames, which caused some minor issues on our site.

    So if a , is found the file should not be uploaded.

    Thanks,

    Reviewed by mezzaninegold at 2017-09-22 13:41
  • 10. How to retrieve the backend response ?

    Hello.

    I'm trying to implement your fabulous component in an application. All is working very well to choose files, and to send them via a post request. In my backend (under Laravel), I made a route that handles it and which is storing the uploaded files successfully. I made that post php route responding with each stored file path. My question is how, from the files array props, can I get these responded file paths in my frontend if I need it ?

    Thank you very much for your work.

    Reviewed by ssouron at 2016-11-03 22:20
  • 11. Cannot read property 'id' of undefined

    Using a "custom-action" which successfully returns, but as soon as the promise resolves I get the error Cannot read property 'id' of undefined. What should the custom-action be returning?

    Here is the method that gets called for the custom-action, it returns a promise resolved from axios:

    uploadImage: async function (file, component) {
    
         return await this.$store.dispatch('entities/clients/uploadLogo', { clientId: this.data.id, file: file });
    },
    
    Reviewed by rhysstubbs at 2019-04-04 10:44
  • 12. Bump terser from 5.10.0 to 5.14.2

    Bumps terser from 5.10.0 to 5.14.2.

    Changelog

    Sourced from terser's changelog.

    v5.14.2

    • Security fix for RegExps that should not be evaluated (regexp DDOS)
    • Source maps improvements (#1211)
    • Performance improvements in long property access evaluation (#1213)

    v5.14.1

    • keep_numbers option added to TypeScript defs (#1208)
    • Fixed parsing of nested template strings (#1204)

    v5.14.0

    • Switched to @​jridgewell/source-map for sourcemap generation (#1190, #1181)
    • Fixed source maps with non-terminated segments (#1106)
    • Enabled typescript types to be imported from the package (#1194)
    • Extra DOM props have been added (#1191)
    • Delete the AST while generating code, as a means to save RAM

    v5.13.1

    • Removed self-assignments (varname=varname) (closes #1081)
    • Separated inlining code (for inlining things into references, or removing IIFEs)
    • Allow multiple identifiers with the same name in var destructuring (eg var { a, a } = x) (#1176)

    v5.13.0

    • All calls to eval() were removed (#1171, #1184)
    • source-map was updated to 0.8.0-beta.0 (#1164)
    • NavigatorUAData was added to domprops to avoid property mangling (#1166)

    v5.12.1

    • Fixed an issue with function definitions inside blocks (#1155)
    • Fixed parens of new in some situations (closes #1159)

    v5.12.0

    • TERSER_DEBUG_DIR environment variable
    • @​copyright comments are now preserved with the comments="some" option (#1153)

    v5.11.0

    • Unicode code point escapes (\u{abcde}) are not emitted inside RegExp literals anymore (#1147)
    • acorn is now a regular dependency
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-07-20 17:28
  • 13. Is there any recommendations for file download after upload ?

    Hello, thanks for this beautiful work @lian-yue !

    Currently I have a tempFile variable in which I'm storing the selected files as their original structure (objects), and I'm getting the stored files as an array of names from my database and that's what's being rendering in the UI.. I want to add a download function @click , I think there isn't any Options / Props for this feature, would you recommend a way to get or generate the files url? Proabably something like this ? const url = window.URL.createObjectURL(new Blob([response.data]))

    Reviewed by Klodovsky at 2022-07-14 21:07
  • 14. File type is empty for .doc and .docx

    I'm using the Vue 3 version. Whenever I try to upload a .doc .docx file the newFile.type is empty, therefore I'm not able to validate on inputFilter

    I'm aware that I can check file type as per filename as explained in docs, but it doesn't fill very trustworthy. Instead, I'd like to check with file type as I use to do with any other file (which works as expected)

    The odd thing is that .xls and .xlsx files work fine returning this in newFile.type:

    .xlsx => type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
    .xls => type: "application/vnd.ms-excel"
    

    Any advice will be appreciated

    const inputFilter = (newFile, oldFile, prevent) => {
          console.log(newFile, oldFile)
          // Handle new file
          if (newFile && !oldFile) {
            // Check valid extension
            if (!accept.includes(newFile.type)) {
              alert('Tipo de archivo no valido')
              return prevent()
            }
         }
    }
    

    The log returns this

    {
      active: false
      data: {}
      error: ""
      file: File 
      lastModified: 1657148890308
      lastModifiedDate: Wed Jul 06 2022 20:08:10 GMT-0300 (Argentina Standard Time) {}
      name: "IMBATIBLE 2019 CICLO SUPERIOR Cs Sociales.doc"
      size: 93184
      type: ""
      webkitRelativePath: ""
      fileObject: true
      headers: {...}
      id: "9716pv89zvt"
      name: "IMBATIBLE 2019 CICLO SUPERIOR Cs Sociales.doc"
      postAction: "http://api.foobar.test/files"
      progress: "0.00"
      putAction: undefined
      response: {}
      size: 93184
      speed: 0
      success: false
      timeout: 0
      type: ""
    }
    
    Reviewed by lucianobosco at 2022-07-06 23:22
  • 15. Bump node-forge from 1.2.1 to 1.3.0

    Bumps node-forge from 1.2.1 to 1.3.0.

    Changelog

    Sourced from node-forge's changelog.

    1.3.0 - 2022-03-17

    Security

    • Three RSA PKCS#1 v1.5 signature verification issues were reported by Moosa Yahyazadeh ([email protected]).
    • HIGH: Leniency in checking digestAlgorithm structure can lead to signature forgery.
    • HIGH: Failing to check tailing garbage bytes can lead to signature forgery.
    • MEDIUM: Leniency in checking type octet.
      • DigestInfo is not properly checked for proper ASN.1 structure. This can lead to successful verification with signatures that contain invalid structures but a valid digest.
      • CVE ID: CVE-2022-24773
      • GHSA ID: GHSA-2r2c-g63r-vccr

    Fixed

    • [asn1] Add fallback to pretty print invalid UTF8 data.
    • [asn1] fromDer is now more strict and will default to ensuring all input bytes are parsed or throw an error. A new option parseAllBytes can disable this behavior.
      • NOTE: The previous behavior is being changed since it can lead to security issues with crafted inputs. It is possible that code doing custom DER parsing may need to adapt to this new behavior and optional flag.
    • [rsa] Add and use a validator to check for proper structure of parsed ASN.1 RSASSA-PKCS-v1_5 DigestInfo data. Additionally check that the hash algorithm identifier is a known value from RFC 8017 PKCS1-v1-5DigestAlgorithms. An invalid DigestInfo or algorithm identifier will now throw an error.
      • NOTE: The previous lenient behavior is being changed to be more strict since it could lead to security issues with crafted inputs. It is possible that code may have to handle the errors from these stricter checks.

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-03-25 23:49
  • 16. Folder path in Vue3 version

    I have recently upgraded my project to Vue version 3, updating the upload component accordingly. Everything works perfectly, but I noticed an important difference when I upload a folder (i.e. with :multiple="true" and :directory="true"):

    The filename arriving at the server through the post-action now only contains the name of the individual files contained in the folder, without the relative path including the name of the specific folder, which was the case in the previous version. In other words, after post request:

    vue-upload-component (Vue 2) - filename: img_folder/img_1.png, filename: img_folder/img_2.png... vue-upload-component (Vue 3) - filename: img_1.png, filename: img_2.png...

    Is there a way to get the name of the loaded folder also in the Vue 3 compatible version, as in my case it is essential to know it for later backend operations?

    Reviewed by AngeloLaudani at 2022-03-25 09:53
A Vue2 plugin make files upload simple and easier, single file upload with image preview, multiple upload with drag and drop
A Vue2 plugin make files upload simple and easier, single file upload with image preview, multiple upload with drag and drop

v-uploader A Vue2 plugin make files upload simple and easier, single file upload with image preview, multiple upload with drag and drop Examples and D

Aug 2, 2022
A Vuetify multi file upload with deletions and file previews

Vuetify Upload A Vuetify multi file upload with deletions and file previews. Install the app in your main.js import VuetifyUpload from '@kingscode/vue

Jul 24, 2022
Vue File upload component is created to help you upload files using vuejs and ajax
Vue File upload component is created to help you upload files using  vuejs and ajax

Vue File upload component is created to help you upload files using vuejs and ajax

Aug 7, 2022
A Vue plugin for the simple Ajax file uploading (single or multiple files selection)

A Vue plugin for the simple Ajax file uploading (single or multiple files selection). This plugin works well with any Laravel backend 5.5+.

Dec 20, 2021
Drag and drop multiple file uploader with Vue.js v2 and Axios

vue2-multi-uploader A drag and drop multiple file uploader component that uses Vue.js v2 and Axios. Uploader shows file names, sizes and total size of

Jan 9, 2022
v-file-upload: File upload component for Vue.js

v-file-upload File upload component for Vue.js Installation Using yarn yarn add v-file-upload Using npm npm i --save v-file-upload Demo DEMO Usage As

Feb 25, 2022
Multiple Images Upload With Preview – Media-Upload

??️ Media-Upload-Demo This project is a demo for Media-Upload package: ?? Installation guide As always you need to: composer install Then npm install

Jun 12, 2022
This component is a multi-file uploader for firebase

ic-firebase-uploader This component is a multi-file uploader for firebase Installation Using yarn yarn add ic-firebase-uploader Using npm npm i --save

May 11, 2021
Vue Component for upload a file with drag and drop, and out data will be json with data in base64 formate

Vue Component for upload a file with drag and drop, and out data will be json with data in base64 formate

Feb 5, 2020
Simple single file upload with Drag'n'Drop for Vue2 and Vue3
Simple single file upload with Drag'n'Drop for Vue2 and Vue3

Modern upload input with Drag'n'Drop support, based on the Fetch Api (POST and DELETE methods). As simple and lightweight as possible.

Dec 16, 2021
A simple file upload component for Vue.js. Emits events for XHR Upload Progress for nice progress bars.

vue-file-upload-component A simple file upload component for Vue.js. Emits events for XHR Upload Progress for nice progress bars. I came up with the o

Feb 24, 2022
Contains all of the example components to upload files with VueJS and Axios.
Contains all of the example components to upload files with VueJS and Axios.

Hi! We're Dan and Jay. We're a two person team with a passion for open source products. We created Server Side Up to help share what we learn. Find us

Aug 15, 2022
A Vue.js component for Dropzone.js - a drag’n’drop file uploads utility with image previews
A Vue.js component for Dropzone.js - a drag’n’drop file uploads utility with image previews

vue-dropzone CO-MAINTAINERS WANTED This component has far outgrown my initial expectations and I'm not able to provide the amount of support that user

Aug 15, 2022
Vue3 Library Component for drag’n’drop file uploads with image previews
Vue3 Library Component for drag’n’drop file uploads with image previews

dropzone-vue ?? Features Live Demo Link: Click here !! Vue3 Library Component for drag’n’drop file uploads with image previews. ??

Jun 17, 2022
Vue.js file upload component The component is just a button

Vue.js file upload component, Multi-file upload, Upload directory, Drag upload, Drag the directory, Upload multiple files at the same time, html4 (IE 9), `PUT` method, Customize the filter. fork from lianyue's vue-upload-component

Dec 13, 2018
🖼️ Vue component that provides drag and drop images upload with preview.
🖼️ Vue component that provides drag and drop images upload with preview.

??️ Vue component that provides drag and drop images upload with preview.

Jul 10, 2022
A simple vue upload component with HTML only drag and drop features

A simple vue upload component with HTML only drag and drop features. It has image preview functionality and uses axios to push your image to whatever endpoint you specify.

Dec 18, 2019
Simple File upload component for Vue.js

vue-simple-upload An simple file upload component for vue.js. Checkout Demo on JSFiddle Installation npm install vue-simple-upload Usage vue-simple-up

Jul 29, 2022
The most beautiful and full featured file upload component for Vue JS
The most beautiful and full featured file upload component for Vue JS

?? V2 is in the making...! Vue File Agent Every file deserves to be treated equally High performant Vue file upload component with elegant and disting

Aug 14, 2022