A Vue2 plugin make files upload simple and easier, single file upload with image preview, multiple upload with drag and drop

Overview



v-uploader

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 Documentation

Explorer on

Plugin preview

Single file upload with image preview

v-uploader-single

Multiple files upload with drag and drop

v-uploader-multiple

Installation

npm i v-uploader -S

Include and install plugin in your main.js file.

import Vue from 'vue'
import Uploader from 'v-uploader'

/**
 * v-uploader plugin global config
 */
const uploaderConfig = {
  uploadFileUrl: 'https://some-site/upload',
  deleteFileUrl: 'https://some-site/delete',
  showMessage: (vue, message) => {
    // using v-dialogs to show message
    vue.$dlg.alert(message, null, { messageType: 'error' })
  }
}

// install plugin with options
Vue.use(Uploader, uploaderConfig)

There is using v-dialogs to show message in example

Dependencies

License

FOSSA Status

Vue plugin series

Plugin Status Description
v-page npm version A simple pagination bar, including length Menu, i18n support
v-dialogs npm version A simple and powerful dialog, including Modal, Alert, Mask and Toast modes
v-tablegrid npm version A simpler to use and practical datatable
v-uploader npm version A Vue2 plugin to make files upload simple and easier,
you can drag files or select file in dialog to upload
v-ztree npm version A simple tree for Vue2, support single or multiple(check) select tree,
and support server side data
v-gallery npm version A Vue2 plugin make browsing images in gallery
v-region npm version A simple region selector, provide Chinese administrative division data
v-selectpage npm version A powerful selector for Vue2, list or table view of pagination,
use tags for multiple selection, i18n and server side resources supports
v-suggest npm version A Vue2 plugin for input suggestions by autocomplete
v-playback npm version A Vue2 plugin to make video play easier
v-selectmenu npm version A simple, easier and highly customized menu solution
Comments
  • How do i limit the number of upload files in multiple mode?

    How do i limit the number of upload files in multiple mode?

    Thank you for this beautiful component, it works ! I am stuck with a situation where i want to limit my user to be able to upload only 5 images. How do i do that? @TerryZ TIA

    opened by power-cut 2
  • upload is not working

    upload is not working

    how i can resive the data from response controller

    this is my code : <v-uploader @done="uploadDone" :preview-width="400" upload-file-url="api/images" delete-file-urll="api/images" language='en' :preview-height="300" preview-img="/img/avatar.png"> </v-uploader> <script> export default { methods: { uploadDone(files){ if(files && Array.isArray(files) && files.length){ console.log(files); } }, } } </script>

    code in My Controller :

    fff

    the response ; responce

    the Console : dddddd

    i want to get responseText and Pass it to preview-img put i can't please help me Thanks

    opened by biloo-dev 1
  • Add license scan report and status

    Add license scan report and status

    Your FOSSA integration was successful! Attached in this PR is a badge and license report to track scan status in your README.

    Below are docs for integrating FOSSA license checks into your CI:

    opened by fossabot 1
  • [Fine Uploader 5.16.2] Error when attempting to parse xhr response text (Unexpected token < in JSON at position 0)

    [Fine Uploader 5.16.2] Error when attempting to parse xhr response text (Unexpected token < in JSON at position 0)

    Maybe someone can help me solve this error?

    my configuration:

    const uploaderConfig = {
    	language: "en",
    	itemLimit: 1,
    	uploadFileUrl: 'http://localhost:8080/upload/',
    	deleteFileUrl: 'http://localhost:8080/upload/',
    	showMessage: (vue, message) => {
    		console.log("???", vue, message);
    		
    		vue.$dlg.alert(message, {messageType: 'error'});
    	}
    }
    
                ....
                <v-uploader
                  :multiple="true"
                  buttonText="zmień avatar"
                  @done="uploadDone"
                ></v-uploader>
                ....
    
                   methods: {
                      uploadDone(files) {
                            if (files && Array.isArray(files) && files.length) {
                                console.log("????????//",files);
                             }
                        }
                   },
    
    opened by EwaMakowska 0
  • Include include extra fileParams and uploadHeaders Option

    Include include extra fileParams and uploadHeaders Option

    I had an issue in #9, I found a workaround, and there's a need to add form parameters (like user_id, image_title, etc) to the upload request.

    Also, because of authentication issues, I kept getting a 401 - Token not provided error. because there was no way to add custom headers.

    I have added fileParams and uploadHeaders options to be included by users.

    Include plugin in your main.js file like this.

    import Vue from 'vue';
    import vUploader from 'v-uploader';
    
    /**
     * v-uploader plugin global config
     */
    const uploaderConfig = {
        uploadHeaders: {
            Authorization: 'Bearer xxxxxxxxxxxxxxx'
        },
        uploadFileUrl: 'http://xxx/upload',
        deleteFileUrl: 'http://xxx/delete',
        showMessage: (vue, message) => {
            //using v-dialogs to show message
            vue.$vDialog.alert(message, null, {messageType: 'error'});
        }
    };
    
    //install plugin with options
    Vue.use(vUploader, uploaderConfig);
    

    Then in components:

    <template>
      <!-- bind event 'done' to receive file uploaded info -->
      <v-uploader :fileParams="uploadFileParams" @done="uploadDone" ></v-uploader>
    </template>
    
    export default {
        data(){
             return {
                  uploadFileParams: {
                        user_id: 1, 
                        file_title: "file.jpg"
                  }
             }
         },
        methods:{
            //receive uploaded files info
            //@type Array
            uploadDone(files){
                if(files && Array.isArray(files) && files.length){
                    // do something...
                }
            }
        }
    };
    

    This way, you can add custom headers, and send parameters to the server during an upload.

    opened by pamekar 1
  • how to place Thumbnail using javascript URL.createObjectURL(file);

    how to place Thumbnail using javascript URL.createObjectURL(file);

    hey there, i'm using this amazing component but i want to place URL.createObjectURL(file); to show fakePath in thumbnail currently its looking for a path from server side but i want to use it in form with couple of fields and want to process it manually that's why i disabled default fine-uploader autoUpload functionlity but unable to override thumbnail placement functionality immediate response will be highly apreciated Thanks 👍

    opened by safiullahsarhandi 3
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
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.

Andrew 0 Dec 16, 2021
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+.

Antony H 2 Dec 20, 2021
🖼️ Vue component that provides drag and drop images upload with preview.

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

Youssef 78 Nov 19, 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
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 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
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
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 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.

Mario Jankovic 1 Dec 18, 2019
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 63 Nov 24, 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
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

Kings Code 5 Jul 24, 2022
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
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
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 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

Magic Academy 1 Dec 19, 2021