A Vue.js upload component powered by simple-uploader.js

Overview

vue-simple-uploader NPM Version NPM Downloads juejin likes

A Vue.js upload component powered by simple-uploader.js

example

QQ

中文

Features

  • Treat Folder and File as File
  • Pause/Resume upload
  • Recover upload
  • Error handling
  • Drag and Drop with folder reader
  • Custom upload buttons
  • Folder Upload
  • Queue management
  • File validation
  • Upload progress
  • Time remaining
  • Chunk uploads

Install

npm install vue-simple-uploader --save

Notes

Usage

init

import Vue from 'vue'
import uploader from 'vue-simple-uploader'
import App from './App.vue'

Vue.use(uploader)

/* eslint-disable no-new */
new Vue({
  render(createElement) {
    return createElement(App)
  }
}).$mount('#app')

App.vue

<template>
  <uploader :options="options" class="uploader-example">
    <uploader-unsupport></uploader-unsupport>
    <uploader-drop>
      <p>Drop files here to upload or</p>
      <uploader-btn>select files</uploader-btn>
      <uploader-btn :attrs="attrs">select images</uploader-btn>
      <uploader-btn :directory="true">select folder</uploader-btn>
    </uploader-drop>
    <uploader-list></uploader-list>
  </uploader>
</template>

<script>
  export default {
    data () {
      return {
        options: {
          // https://github.com/simple-uploader/Uploader/tree/develop/samples/Node.js
          target: '//localhost:3000/upload',
          testChunks: false
        },
        attrs: {
          accept: 'image/*'
        }
      }
    }
  }
</script>

<style>
  .uploader-example {
    width: 880px;
    padding: 15px;
    margin: 40px auto 0;
    font-size: 12px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .4);
  }
  .uploader-example .uploader-btn {
    margin-right: 4px;
  }
  .uploader-example .uploader-list {
    max-height: 440px;
    overflow: auto;
    overflow-x: hidden;
    overflow-y: auto;
  }
</style>

Components

Uploader

Root component.

Props

  • options {Object}

    See simple-uploader.js options.

    Besides, some other options are avaliable too:

    • parseTimeRemaining(timeRemaining, parsedTimeRemaining) {Function}

      this function option to format the current file's time remaining value(seconds, number), you can return your language time remaining text, params:

      • timeRemaining{Number}, time remaining seconds

      • parsedTimeRemaining{String}, default shown time remaining text, you can use it like this:

        parseTimeRemaining: function (timeRemaining, parsedTimeRemaining) {
          return parsedTimeRemaining
            .replace(/\syears?/, '年')
            .replace(/\days?/, '天')
            .replace(/\shours?/, '小时')
            .replace(/\sminutes?/, '分钟')
            .replace(/\sseconds?/, '秒')
        }
    • categoryMap {Object}

      File category map, default:

      {
        image: ['gif', 'jpg', 'jpeg', 'png', 'bmp', 'webp'],
        video: ['mp4', 'm3u8', 'rmvb', 'avi', 'swf', '3gp', 'mkv', 'flv'],
        audio: ['mp3', 'wav', 'wma', 'ogg', 'aac', 'flac'],
        document: ['doc', 'txt', 'docx', 'pages', 'epub', 'pdf', 'numbers', 'csv', 'xls', 'xlsx', 'keynote', 'ppt', 'pptx']
      }
  • autoStart {Boolean}

    Default true, Whether the file will be start uploading after it is added.

  • fileStatusText {Object}

    Default:

    {
      success: 'success',
      error: 'error',
      uploading: 'uploading',
      paused: 'paused',
      waiting: 'waiting'
    }

    An object map for file status text.

    After 0.6.0, fileStatusText can be a function with params (status, response = null), you can control the status text more flexible:

    fileStatusText(status, response) {
      const statusTextMap = {
        uploading: 'uploading',
        paused: 'paused',
        waiting: 'waiting'
      }
      if (status === 'success' || status === 'error') {
        // only use response when status is success or error
    
        // eg:
        // return response data ?
        return response.data
      } else {
        return statusTextMap[status]
      }
    }

Events

See simple-uploader.js uploader/events

Note:

  • All events name will be transformed by lodash.kebabCase, eg: fileSuccess will be transformed to file-success

  • catchAll event will not be emited.

  • file-added(file), file added event, this event is used for file validation. To reject this file you should set file.ignored = true.

  • files-added(files, fileList), files added event, this event is used for files validation. To reject these files you should set files.ignored = true or fileList.ignored = true.

Scoped Slots

  • files {Array}

    An array of files (no folders).

  • fileList {Array}

    An array of files and folders.

  • started

    Started uploading or not.

Get Uploader instance

You can get it like this:

const uploaderInstance = this.$refs.uploader.uploader
// now you can call all uploader methods
// https://github.com/simple-uploader/Uploader#methods
uploaderInstance.cancel()

UploaderBtn

Select files button.

Props

  • directory {Boolean}

    Default false, Support selecting Folder

  • single {Boolean}

    Default false, To prevent multiple file uploads if it is true.

  • attrs {Object}

    Default {}, Pass object to set custom attributes on input element.

UploaderDrop

Droped files area.

UploaderList

An array of Uploader.File file(folder) objects added by the user, but it treated Folder as Uploader.File Object.

Scoped Slots

  • fileList {Array}

    An array of files and folders.

UploaderFiles

An array of Uploader.File file objects added by the user.

Scoped Slots

  • files {Array}

    An array of files (no folders).

UploaderUnsupport

It will be shown if the current browser do not support HTML5 File API.

UploaderFile

File item component.

Props

  • file {Uploader.File}

    Uploader.File instance.

  • list {Boolean}

    It should be true if it is puted in UploaderList

Scoped Slots

  • file {Uploader.File}

    Uploader.File instance.

  • list {Boolean}

    In UploaderList component or not.

  • status {String}

    Current status, the values is one of success, error, uploading, paused, waiting

  • paused {Boolean}

    Indicated if the file is paused.

  • error {Boolean}

    Indicated if the file has encountered an error.

  • averageSpeed {Number}

    Average upload speed, bytes per second.

  • formatedAverageSpeed {String}

    Formated average upload speed, eg: 3 KB / S

  • currentSpeed {Number}

    Current upload speed, bytes per second.

  • isComplete {Boolean}

    Indicated whether the file has completed uploading and received a server response.

  • isUploading {Boolean}

    Indicated whether file chunks is uploading.

  • size {Number}

    Size in bytes of the file.

  • formatedSize {Number}

    Formated file size, eg: 10 KB.

  • uploadedSize {Number}

    Size uploaded in bytes.

  • progress {Number}

    A number between 0 and 1 indicating the current upload progress of the file.

  • progressStyle {String}

    The file progress element's transform style, eg: {transform: '-50%'}.

  • progressingClass {String}

    The value will be uploader-file-progressing if the file is uploading.

  • timeRemaining {Number}

    Remaining time to finish upload file in seconds.

  • formatedTimeRemaining {String}

    Formated remaining time, eg: 3 miniutes.

  • type {String}

    File type.

  • extension {String}

    File extension in lowercase.

  • fileCategory {String}

    File category, one of folder, document, video, audio, image, unknown.

Development

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report
Comments
  • Uploader的complete事件触发时机问题

    Uploader的complete事件触发时机问题

    发现选择文件后complete事件会触发,上传成功后也会再次触发 请问这里是否有问题

    ` <uploader class="uploader-example" ref="uploader" :simultaneousUploads="5" :options="options" :autoStart="true" :permanentErrors="[401, 404, 415, 500, 501]" @file-added="fileAdded" @files-submitted="filesSubmitted" @file-error="fileError" @file-success="fileSuccess" @complete="complete"> 不支持此功能,请升级微信或浏览器 选择文件

    `

    ` complete() { console.log('complete'); this.isComplete = true; this.isUploading = false; },

    ` image

    bug 
    opened by lwpassvoice 31
  • 可以支持传md5值吗?

    可以支持传md5值吗?

    你好,我自己搞了半天不行,用的是js-spark-md5插件,console可以得到,query却是undefined

    // xx.vue
    import { getMd5 } from './md5.js'
    options: { // options配置
      target: docUploadPath,
      testChunks: false,
      query: function(file) {
        getMd5(file.file, function(md5) {
          console.log(md5) // d6ff424312924d81646c3189b42cb5f5
          return {'md5': md5}
        })
      }
    }
    
    // md5.js
    import './spark-md5.min.js'
    
    export function getMd5(file, callBack) {
      var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice,
        chunkSize = 8097152, // Read in chunks of 2MB
        chunks = Math.ceil(file.size / chunkSize),
        currentChunk = 0,
        spark = new SparkMD5.ArrayBuffer(),
        fileReader = new FileReader()
    
      fileReader.onload = function (e) {
        spark.append(e.target.result); // Append array buffer
        currentChunk++;
        if (currentChunk < chunks) {
          loadNext();
        } else {
          callBack(spark.end())
        }
      };
    
      fileReader.onerror = function () {
        console.warn('oops, something went wrong.');
      };
    
      function loadNext() {
        var start = currentChunk * chunkSize,
          end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;
        fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
      }
      loadNext();
    }
    
    question 
    opened by tong233 13
  • 你好,问下断点续传的问题

    你好,问下断点续传的问题

    使用testChunks 后,在 target: (...args)=>{ if(args[2]){ return xxx/mgr/getTaskProgress.do }else{ return xxx/mgr/uploadPart.do } }, 在checkChunkUploadedByResponse处理好后,使用第二个接口(xxx/mgr/uploadPart.do)上传为啥第一块没有上传了?急急急!!!

    opened by 364124337 9
  • genTarget时,rmvb文件的file.fileTye为“”

    genTarget时,rmvb文件的file.fileTye为“”

    <uploader :options="options"></uploader>
    
    options: {
      target: this.genTarget,
    }
    // 选择rmvb为 "", mp4为video/mp4
    genTarget(file) {
      file.fileType;
    }
    

    版本0.4.6

    opened by lwpassvoice 8
  • uploader.progress()没有重新计算

    uploader.progress()没有重新计算

    你好,十分感谢你的项目,我想重新搞个进度条,在fileProgress()里调用uploader.progress()方法,但是多次上传,第一次progress()正常,之后progress()从很大的数开始。

    <uploader
      :options="options"
      ref="uploader"
      @file-progress="fileProgress">
    </uploader>
    
    mounted() {
      this.$nextTick(() => {
        this.uploader = this.$refs.uploader.uploader
     }
    },
    methods: {
      fileProgress() {
        this.uploadProgress = Math.floor(this.uploader.progress() * 100)
        console.log('progress: '  + this.uploadProgress)
      }
    }
    

    上传了4次console

    image

    opened by tong233 6
  • Show error message from backend

    Show error message from backend

    I try to use vue-uploader with YII-1 backend. I want to inform a user about why the server side cannot upload a file. For example, such file exists, or file is too big and so on. User should to know the reason exactly. Backend responses with code 417, for example, and JSON like this: {"success":false,"message": "File is too big"}

    How can I show my "File is too big" message instead of simple "error" which comes from statusText object? Thank you.

    enhancement 
    opened by maxotto 4
  • Uploader is undefined after Vue.use

    Uploader is undefined after Vue.use

    As mentioned in usage, I have this: import Vue from 'vue' import App from './App' Vue.use(uploader)

    new Vue({ el: '#mountPoint', router, template: '', components: { App }, })

    But when I try to use it in another single file component like this: export default { name: 'upload', mounted(){ const uploaderInstance = this.$refs.uploader.uploader console.log(uploaderInstance) } } I get only Error in mounted hook: "TypeError: Cannot read property 'uploader' of undefined". I tried to import it before export default: import uploader from 'vue-simple-uploader' export default{...} and use it like uploader.files but I still got only undefined. Am I missing something or is it a bug and I have to register it somehow else?

    opened by Liniik 4
  • file-added事件问题

    file-added事件问题

    你好,这样写对吗?但是没有过滤掉,还是上传了

    <uploader 
      :options="options"
      ref="uploader"
      @file-added="fileAdded">
    </uploader>
    
    methods: {
      fileAdded (file) {
        if (file.size > 0.5 * 1024 * 1024) {
          console.log('文件大于0.5M')
          file.ignored = true
        }
      }
    }
    
    bug 
    opened by tong233 4
  • How to use dynamic target which is dependent on a selectbox

    How to use dynamic target which is dependent on a selectbox

    I've the options as follows :

    return {
          url: '/api/upload/product',
          options: {
            target: null,
            testChunks: false,
            singleFile: true,
            chunkSize: 1e+9,
          },
          attrs: {
            accept: ['.csv', '.xls', '.xlsx'],
          },
          product: null,
          items: [
            'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine', 'Ten',
          ],
        };
    
    
    watch: {
        product(value) {
          console.log('WATCH : ', value);
          this.options.target = `${this.url}/${value}`;
        },
      },
    

    The target is getting changed if I check in VueDev Tools, but on uplading files it is setting the call as :

    /api/upload/product/null

    opened by pranabkalita 3
  • 关于测试模式的问题。

    关于测试模式的问题。

    版本 0.5.4

    1. 请问一下如何修改测试模式为正式模式?

    我运行example目录中的例子如下设置options

    options: {
            target(file,Chunk,isTest){
              console.log(isTest)
              return '//localhost:3000/upload'
            },
            simultaneousUploads: 1, // 并发上传数
            testChunks: false, // 是否测试每个块是否在服务端已经上传了
            testMethod: 'POST'
          },
    

    我修改 testChunks 为 true 属性的时候,打印的 isTest 也为true,isTest 是由 testChunks 属性决定的吗?

    1. 请问一下是不是只有在 isTest 为 false 时才会上传文件数据。 isTest = true 时 11 isTest = false 时 12

    2. 我修改 testChunks 为 false 上传文件时会报错:this.xhr.upload.addEventListener is not a function,为 true 时不会报错。

    opened by haibucuo 3
  • 又来求助,上传完后合并

    又来求助,上传完后合并

    如果我希望是全部上传完后,在fileComplete单独发起一个异步请求进行合并,得到结果后再将上传结束,能做到吗? 我看到有processResponse,这个方法能在fileComplete中再调用吗,还是说可以通过某个钩子去等待fileComplete中的合并回调后再触发processResponse?

    opened by hasbug 3
  • Bump loader-utils, html-webpack-plugin and webpack

    Bump loader-utils, html-webpack-plugin and webpack

    Bumps loader-utils to 1.4.2 and updates ancestor dependencies loader-utils, html-webpack-plugin and webpack. These dependencies need to be updated together.

    Updates loader-utils from 1.1.0 to 1.4.2

    Release notes

    Sourced from loader-utils's releases.

    v1.4.2

    1.4.2 (2022-11-11)

    Bug Fixes

    v1.4.1

    1.4.1 (2022-11-07)

    Bug Fixes

    v1.4.0

    1.4.0 (2020-02-19)

    Features

    • the resourceQuery is passed to the interpolateName method (#163) (cd0e428)

    v1.3.0

    1.3.0 (2020-02-19)

    Features

    • support the [query] template for the interpolatedName method (#162) (469eeba)

    v1.2.3

    1.2.3 (2018-12-27)

    Bug Fixes

    • interpolateName: don't interpolated hashType without hash or contenthash (#140) (3528fd9)

    v1.2.2

    1.2.2 (2018-12-27)

    Bug Fixes

    ... (truncated)

    Changelog

    Sourced from loader-utils's changelog.

    1.4.2 (2022-11-11)

    Bug Fixes

    1.4.1 (2022-11-07)

    Bug Fixes

    1.4.0 (2020-02-19)

    Features

    • the resourceQuery is passed to the interpolateName method (#163) (cd0e428)

    1.3.0 (2020-02-19)

    Features

    • support the [query] template for the interpolatedName method (#162) (469eeba)

    1.2.3 (2018-12-27)

    Bug Fixes

    • interpolateName: don't interpolated hashType without hash or contenthash (#140) (3528fd9)

    1.2.2 (2018-12-27)

    Bug Fixes

    ... (truncated)

    Commits
    Maintainer changes

    This version was pushed to npm by evilebottnawi, a new releaser for loader-utils since your current version.


    Updates html-webpack-plugin from 2.30.1 to 5.5.0

    Changelog

    Sourced from html-webpack-plugin's changelog.

    5.5.0 (2021-10-25)

    Features

    • Support type=module via scriptLoading option (1e42625), closes #1663

    5.4.0 (2021-10-15)

    Features

    5.3.2 (2021-06-22)

    Bug Fixes

    • update lodash and pretty error (9c7fba0

    5.3.1 (2021-03-09)

    Bug Fixes

    • remove loader-utils from plugin core (82d0ee8)

    5.3.0 (2021-03-07)

    Features

    • allow to modify the interpolation options in webpack config (d654f5b)
    • drop loader-utils dependency (41d7a50)

    5.2.0 (2021-02-19)

    Features

    5.1.0 (2021-02-12)

    Features

    • omit html tag attribute with null/undefined/false value (aa6e78d), closes #1598

    5.0.0 (2021-02-03)

    ... (truncated)

    Commits
    • 873d75b chore(release): 5.5.0
    • ddeb774 chore: update examples
    • 1e42625 feat: Support type=module via scriptLoading option
    • 7d3645b Bump pretty-error to 4.0.0 to fix transitive vuln for ansi-regex CVE-2021-3807
    • 79be779 [chore] changes actions to run on pull_requests
    • b7e5859 [chore] fixes CI to avoid race conditions
    • 48131d3 chore(release): 5.4.0
    • 16a841a [chore] rebuild examples
    • 3bb7c17 Update index.js
    • e38ac97 Update index.js
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by jantimon, a new releaser for html-webpack-plugin since your current version.


    Updates webpack from 2.7.0 to 5.75.0

    Release notes

    Sourced from webpack's releases.

    v5.75.0

    Bugfixes

    • experiments.* normalize to false when opt-out
    • avoid NaN%
    • show the correct error when using a conflicting chunk name in code
    • HMR code tests existance of window before trying to access it
    • fix eval-nosources-* actually exclude sources
    • fix race condition where no module is returned from processing module
    • fix position of standalong semicolon in runtime code

    Features

    • add support for @import to extenal CSS when using experimental CSS in node
    • add i64 support to the deprecated WASM implementation

    Developer Experience

    • expose EnableWasmLoadingPlugin
    • add more typings
    • generate getters instead of readonly properties in typings to allow overriding them

    v5.74.0

    Features

    • add resolve.extensionAlias option which allows to alias extensions
      • This is useful when you are forced to add the .js extension to imports when the file really has a .ts extension (typescript + "type": "module")
    • add support for ES2022 features like static blocks
    • add Tree Shaking support for ProvidePlugin

    Bugfixes

    • fix persistent cache when some build dependencies are on a different windows drive
    • make order of evaluation of side-effect-free modules deterministic between concatenated and non-concatenated modules
    • remove left-over from debugging in TLA/async modules runtime code
    • remove unneeded extra 1s timestamp offset during watching when files are actually untouched
      • This sometimes caused an additional second build which are not really needed
    • fix shareScope option for ModuleFederationPlugin
    • set "use-credentials" also for same origin scripts

    Performance

    • Improve memory usage and performance of aggregating needed files/directories for watching
      • This affects rebuild performance

    Extensibility

    • export HarmonyImportDependency for plugins

    v5.73.0

    ... (truncated)

    Commits

    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.

    dependencies 
    opened by dependabot[bot] 0
  • @file-added=

    @file-added="onFileAdded"中的参数失去响应式

    bug:onFileAdded(file)的参数file中有很多key->value,第一次传文件的参数file里面的set和get都齐全,但第二次就有一些没有set和get,例如_prevProgress。

    发生场景:通过file对象拿_prevProgress,以显示自定义进度条。发现第一次传文件进度条是正常的,第二次进度条不动。

    解决方案:file.progress()可以拿到上传进度。但不是响应式,需要在@file-progress="onFileProgress"里面人工调用。

    opened by squanchxiong 0
  • Bump css-what from 2.1.0 to 6.1.0

    Bump css-what from 2.1.0 to 6.1.0

    Bumps css-what from 2.1.0 to 6.1.0.

    Release notes

    Sourced from css-what's releases.

    v6.1.0

    • feat: Support pseudo elements with data (#762) 3be227a

    https://github.com/fb55/css-what/compare/v6.0.1...v6.1.0

    v6.0.1

    • Fix parsing column combinators after tag names 503570e

    https://github.com/fb55/css-what/compare/v6.0.0...v6.0.1

    v6.0.0

    Breaking Changes

    • Added ES6 module export (by @​spocke, fb55/css-what#680)
      • CommonJS is still provided for earlier NodeJS versions, but this change might cause issues with your build system. If they aren't trivially resolved, please open an issue!
    • Removed all options 5cad07b
      • BREAKING: Added a new value for ignoreCase: 'quirks' should ignore the case only in quirks mode.
      • BREAKING: Tags and attributes aren't lowercased anymore
    • Made selector types & actions enums 65121fe
    • Set empty namespace to null in attributes de367ca
    • Simplify stringify output 8a29466 b3e5e59

    Features

    • Support parsing column combinators 8030f67

    Fixes

    • Strip leading whitespace encapsulated in comments a812a1c
      • This used to be a way to sneak in descendant operators in front of selectors.

    Refactors

    • Switched parsing to numbers 65121fe
    • Restructured the parser to a big switch statement 7b6cc76

    Other

    • Adopted CSS Selector parsing tests from WPT 1881bba
    • Updated README to reflect changes b165a8d

    New Contributors

    Full Changelog: https://github.com/fb55/css-what/compare/v5.1.0...v6.0.0

    v5.1.0

    What's Changed

    Full Changelog: https://github.com/fb55/css-what/compare/v5.0.1...v5.1.0

    v5.0.1

    Fixes:

    ... (truncated)

    Commits
    • ee41dda 6.1.0
    • 3be227a feat: Support pseudo elements with data (#762)
    • 13ffc5b build(deps-dev): bump @​typescript-eslint/parser from 5.16.0 to 5.17.0 (#760)
    • 7d0cc2f build(deps-dev): bump @​typescript-eslint/eslint-plugin (#759)
    • 389d1b3 build(deps-dev): bump eslint from 8.11.0 to 8.12.0 (#758)
    • afd14e7 build(deps-dev): bump prettier from 2.6.0 to 2.6.1 (#757)
    • a1542de build(deps-dev): bump typescript from 4.6.2 to 4.6.3 (#756)
    • 41d9752 build(deps-dev): bump ts-jest from 27.1.3 to 27.1.4 (#755)
    • fed0407 build(deps): bump minimist from 1.2.5 to 1.2.6 (#754)
    • 96a2408 build(deps-dev): bump @​types/node from 17.0.22 to 17.0.23 (#753)
    • Additional commits viewable in compare view

    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.

    dependencies 
    opened by dependabot[bot] 0
Releases(v1.0.0-beta.3)
Owner
null
A Vue.js upload component powered by simple-uploader.js

vue-simple-uploader A Vue.js upload component powered by simple-uploader.js 中文 Features Treat Folder and File as File Pause/Resume upload Recover uplo

null 1.7k Nov 30, 2022
Handy Uploader is a responsive Vue.js file uploader and file viewer with an image compressor. It offers three display options (simple / thumbnail / table).

Handy Uploader is a responsive Vue.js file uploader and file viewer with an image compressor. It offers three display options (simple / thumbnail / table).

ali jahanpak 62 Oct 6, 2022
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

Terry Zeng 231 Nov 21, 2022
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

James Doyle 232 Feb 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

yazan alnughnugh 41 Nov 17, 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

Daniel Fernando Lourusso 59 Nov 14, 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

Mohamed Hafidi 8 Aug 17, 2022
Simple and hackable file uploader for VueJs. Supports Vue = 2.1

Introduction Vue clip is a minimalistic and hackable file uploader for VueJs. I wrote this plugin due to the absence of well written file uploaders wi

Harminder Virk 221 Jul 22, 2022
Makes using Fine Uploader in a VueJS 2 app simple

Makes using Fine Uploader in a VueJS 2 app simple. Drop-in high-level components for a turn-key UI. Use small focused components to build a more custom UI.

Dieter Sting 104 Oct 22, 2022
A mobile vue component implementation for weui uploader

vux-uploader-component a mobile vue component implementation for weui uploader Install npm install -S vux-uploader-component Mobile demo https://ejayy

eJay 99 Nov 19, 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

InCuca Tech 20 Nov 24, 2022
A reactjs and vuejs component of file uploader

file-uploader-component features reactjs component vuejs component drag file(s) and drop to the component click to choose file(s) paste file from clip

York Yao 12 Jan 18, 2022
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

UPDIVISION 47 Sep 29, 2022
Vue.js drag & drop uploader based on Dropzone.js

Vue-Transmit STATUS: Unmaintained I am currently unable to give this project much attention. I won't be addressing issues or creating new versions for

Alex Regan 212 Aug 4, 2021
Vue multipart file uploader

Vuejs Uploader Multipart uploader Vue component. This uploader will optionally upload files in multipart chunks. This get's around max upload sizes al

Charlie Kassel 61 Nov 24, 2022
jj-uploader is designed for single file update usage in your Vue App.

jj-uploader is designed for single file update usage in your Vue App. Usage install jj-uploader via npm npm i jj-uploader import it into your view

null 0 Dec 23, 2018
Configurable image uploader with preview

vue-upload-image Configurable image uploader with preview drag and drop with input backup image previews simple resizing events minimal configurable I

Viral-Vector 34 Apr 20, 2022
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

Varun Kruthiventi 143 Nov 17, 2022
A simple vue-component for client-side image upload with resizing

Vue Image Upload and Resize A Vue.js Plugin Component for client-side image upload with optional resizing and exif-based autorotate. This plugin was c

Kartoteket (3by5) 170 Jul 3, 2022