Git Product home page Git Product logo

v-uploader's Introduction



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'
import { DialogAlert } from 'v-dialogs'

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

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

Use v-dialogs plugin to display message for example

Dependencies

License

FOSSA Status

v-uploader's People

Contributors

fossabot avatar terryz avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

v-uploader's Issues

Adding custom headers

Please can someone drop a hint on how to add custom headers to the file upload request. I've tried to find a hack, but it's not so easy here.

[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);
                         }
                    }
               },

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

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 👍

Localization

Hey. Is there a way to make a different localization for ui?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.