A Vuetify multi file upload with deletions and file previews

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

">

Or

">

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

You might also like...
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

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

The most beautiful and full featured file upload component for Vue JS
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"

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.

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

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

S3Client - A Javascript Library for AWS S3 File Upload

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

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

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

A dead simple Vue.js component to upload file to Firebase Storage
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

Comments
  • Able to add more images then allowed

    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.

    selecting-more-images-then-allowed

    after-selecting-images

    bug 
    opened by martn001 1
  • Vuetify icon variables instead of font awesome

    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

    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)
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.
Kings Code
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

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

null 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

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

Rowan Winsemius 2k Dec 31, 2022
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. ??

Brunino Criniti 33 Nov 26, 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
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
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
Vuetify Image Upload and Resize

Vuetify Image Upload and Resize A Vuetify style adaptation of the [vue-image-upload-resize] (https://www.npmjs.com/package/vue-image-upload-resize) pl

null 2 Dec 12, 2022
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

Egor 1 Feb 5, 2020