20 Upload components Examples with Vue.js

1.Vue rokka uploader

A little image uploader component for Vue. Vue component to upload images to rokka.io https://rokka.io

It uses vue-upload-component .

Vue rokka uploader

View on Github

2.Vux uploader component

a mobile vue component implementation for weui uploader.

Vux uploader component

Demo: https://ejayyoung.github.io/vux-uploader-component/index.html

View on Github

3.aammui fileuploader

It’s a vue js fileuploader plugin to handle multiple file upload specially made for laravel.

aammui fileuploader

View on Github

4.Vue image crop upload

A beautiful vue component for image crop and upload.

Notice: This component is designed for pc, not recommended for use on the mobile side.

Vue image crop upload

Demo: https://dai-siki.github.io/vue-image-crop-upload/example-2/demo.html

View on Github

5.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 created for the use in a webapp scenario where we had a large number of end users uploading camera photos from their mobile devices on partly low end data plans. The primary purpose is therefor client-side resizing and if needed exif-based auto-rotation. It can however also be use simply as a file upload component.

Based on [ImageUploader] (https://github.com/rossturner/HTML5-ImageUploader) by Ross Turner. The plugin makes use of an optional dependency JavaScript Canvas to Blob (for blob output).

Vue Image Upload and Resize
Demo: https://codesandbox.io/s/mqnow97omj?module=%2Fsrc%2Fcomponents%2FHelloWorld.vue

View on Github

6.Vue and Geo Simplifier

Upload your geojson geometry and simplify it.

You can insert your geojson or upload valid geojson file and simplify its geometry.

Vue and Geo Simplifier


View on Github

7.Vue upload multiple image

A simple upload multiple image component for Vuejs.

Vue upload multiple image

Demo: https://codepen.io/lekhang2512/pen/qJmQaZ

View on Github

8.v file upload

File upload component for Vue.js

v file upload

Demo: http://dflourusso.github.io/v-file-upload

View on Github

9.Vuetify upload button

A Vue component for Vuetify.

This component is a file upload input with the base functionality of a Vuetify button.
Vuetify upload button

View on Github


A Vue2 plugin make files upload simple and easier, single file upload with image preview, multiple upload with drag and drop https://terryz.github.io/vue/#/upload


View on Github

11.Vue FilePond

A handy FilePond adapter component for Vue https://pqina.nl/filepond

Vue FilePond is a handy adapter component for FilePond, a JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience.

Vue FilePond

Core Features

  • Accepts directories, files, blobs, local URLs, remote URLs and Data URIs.
  • Drop files, select on filesystem, copy and paste files, or add files using the API.
  • Async uploading with AJAX, or encode files as base64 data and send along form post.
  • Accessible, tested with AT software like VoiceOver and JAWS, navigable by Keyboard.
  • Image optimization, automatic image resizing, cropping, and fixes EXIF orientation.
  • Responsive, automatically scales to available space, is functional on both mobile and desktop devices.

View on Github

12.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 users require. If you’d like to help out with it’s maintenance drop a note on this issue

A Vue component for file uploads, powered by Dropzone.js. Check out the demo.

A Nuxt SSR-compatible component can be found at npm and github. Thanks to @Etheryte

Vue dropzone

View on Github

13.Vue2 multi uploader

Simple File upload component for Vue.js https://saivarunk.github.io/vue-simple-upload/

Vue2 multi uploader

Checkout Demo on JSFiddle

View on Github

14.Vue clip

Vue clip is a minimalistic and hackable file uploader for VueJs. I wrote this plugin due to the absence of well written file uploaders with fine-grained controls.

Vue clip


  • Written in vanilla Javascript.
  • Weighs 17.9KB ( Minified and Gzip ), 57KB ( Minified ).
  • Hackable to the core with custom events.
  • Does not pollute DOM by adding unnecessary markup. Infact the component will create a single div element.

View on Github

15.A simple file upload component for vue

A file upload component for vuejs.
A simple file upload component for vue
Demo: http://dai-siki.github.io/vue-upload-file/example/demo.html

View on Github

16.Vue upload component

A simple file upload component for vue
Vue.js file upload component, Support for multiple file uploads, progress, html4, ie9 Html4 does not support the progress bar, file size, accept, timeout, headers, response status code error of judgment

Vue upload component

View on Github

17.Instagram filter Rapid prototype

Rapid prototype of the Instagram filter selection UX.

Built with: Vue, Tachyons, CSSgram, Flickity.

18.Vue Core Image Upload

a vue plugin for image upload and crop ( Support :iphone: IE9+)

Vue Core Image Upload

View on Github

19.Magic upload image

magic upload image base on Vue.js Support paste, drag-drop, form – Github issues like http://upload.leanapp.cn/

Magic upload image

View on Github

20.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 original idea when looking at this repo. I knew I wanted a nice component with upload progress and so I copied some code from that library.

Vue file upload component

View on Github

#vuejs #javascript #vue-js

20 Upload components Examples with Vue.js
467.50 GEEK