A Vuetify multi file upload with deletions and file previews

Kings Code

Last update: Jul 24, 2022

Related tags

File Upload vuetify-upload

Overview

Vuetify Upload

A Vuetify multi file upload with deletions and file previews.

Install the app in your main.js

import VuetifyUpload from '@kingscode/vuetify-upload';
Vue.use(VuetifyUpload);

Just add the component on the place you need it to be

And now your files contains an object with all the files that you'll need to add or delete With:

file which contains the file itself.
isDeleted: a boolean if the file must be deleted.
isNewFile: a boolean if the file is new and must be uploaded.
preview: a base64 or preview url to thee file
And all other attributes you added yourself to the v-model for your own logic

props:

max: maximum number of uploadable items. (default: 0 which is unlimited)
value: The value/v-model
accept: Just like the html accept
previewClass: the class on the previews (default xs3)
canDelete: a boolean which shows/hides the delete buttons

Also you can use the basic vuetify props like :rules and label

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

20 Nov 24, 2022

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

704 Dec 22, 2022

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

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"

0 Nov 11, 2021

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.

0 Dec 16, 2021

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

146 Dec 14, 2022

A simple upload file of vue

vue-uploader-files 安装 npm install vue-uploader-files main.js引入 import upfile from 'vue-uploader-files'; import 'vue-uploader-files/lib/vue-uploader-f

1 Dec 19, 2021

S3Client - A Javascript Library for AWS S3 File Upload

S3FileUpload is libray for upload any type of files to Amazon AWS S3

0 Dec 13, 2019

vue-file-upload，vue上传文件组件

319 Jul 7, 2022

A dead simple Vue.js component to upload file to Firebase Storage

vuetify-vuejs-firebaseUploader A dead simple VueJS component to upload file in Firebase Storage Installation npm install vuetify-vuejs-firebaseuploade

6 Oct 20, 2020

Comments

Able to add more images then allowed

My image uploader has a max property with value of 2. Only two images should be selectedable/allowed. When you're selecting more then two images, all will be selected.

bug

opened by martn001 1
Vuetify icon variables instead of font awesome

This package does not support multiple icon libraries at this moment see the example: https://codesandbox.io/s/vuetify-upload-demo-wd5p8

We should use https://vuetifyjs.com/en/customization/icons#using-custom-icons

opened by ricardovanlaarhoven 0
Styling
Update the styling, make it more material design/vuetify standard

let the color prop be default the accent color

let the text size and colors be the same as other inputs

check the example: https://codesandbox.io/s/vuetify-upload-demo-wd5p8
opened by ricardovanlaarhoven 0

Releases(0.8.0)

0.8.0(Feb 25, 2020)

Able to add more images then allowed bug #6

Styling #16

Vuetify icon variables instead of font awesome #17

is not working bug #22
Source code(tar.gz)
Source code(zip)
0.7.2(Jan 21, 2020)

The transpileDependencies was not set. This is necessary for browsers like Internet Explorer or Edge.
Source code(tar.gz)
Source code(zip)
0.7.1(Nov 21, 2019)

Before this update when you'd use vuetify 2.0 from the lib map, the plugin would break
Source code(tar.gz)
Source code(zip)
0.7.0(Oct 23, 2019)

You can now use the rules and label prop

Your code could look like this:
Source code(tar.gz)
Source code(zip)
0.6.1(Sep 18, 2019)

Source code(tar.gz)
Source code(zip)
0.3.0(May 23, 2019)

Source code(tar.gz)
Source code(zip)

Owner

Kings Code

In a nutshell: Kings Code translates ideas into software. That's our comfort zone, that's really our thing and we're very good at it.

GitHub https://codesandbox.io/s/vuetify-upload-demo-wd5p8

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

0 May 16, 2020

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