rowanwins / vue-dropzone

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 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

---

Development

# install your dependencies
npm install

# install vue-dropzone
npm install vue2-dropzone

(or with yarn)

yarn add vue2-dropzone

# Execute dependencies script 
npm run dev

# serve example and docs at localhost:8080
npm run start

# build any changes made
npm run build

vue-dropzone's Issues

Readme demo code

when just running the demo code from the readme i get the following error:

You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

what does that mean?
Im using the the App.vue inside a new app defined via

vue init browserify-simple testapp

server response headers

When a file is uploaded to the server. How do we get the server response headers? Sometimes when the file is uploaded the name changes.

how do i pass a auth token when uploading a image

I am trying with this

 <dropzone id="fileDropZone" url="api/track/upload"
                                  v-bind:dropzone-options="options"
                                  v-bind:use-custom-dropzone-options="true">
                        </dropzone>

        data: function () {
            return {
                options: {headers: {Authorization: 'bearer:'+this.$auth.token(),trackCategory:1}},
            }
        }

Override CSS

How can I override the bundled CSS to use my own?

seems we can't have more than one instance of the component

Uncaught Error: Dropzone already attached.
at new t (eval at

Is it possible to change this?
Many thanks

maxNumberOfFiles & maxFileSizeInMB are ignored

Hi,

I have some trouble with maxNumberOfFiles & maxFileSizeInMB, both are ignored, i dont know why...

Other props (ref, url, the event success, headers, language) works but those 2 are ignored.

The vdropzone-sending event is executed after the request is sent

<template>
    <div id="app">
        <h1>Welcome to Your Vue.js Upload App</h1>
        <dropzone
                id="myVueDropzone"
                url="/upload"
                acceptedFileTypes="image/*"
                v-on:vdropzone-fileAdded="addFile"
                v-on:vdropzone-sending="sending"
                v-on:vdropzone-error="error"
                v-on:vdropzone-success="success">
        </dropzone>
    </div>
</template>

<script>
    import Dropzone from 'vue2-dropzone'
    export default {
        name: 'app',
        components: {
            Dropzone
        },
        methods: {
            success (file) {
                console.log('文件上传成功')
            },
            sending(file, xhr, formData){
                console.info(file,xhr,formData,'ssss');
            },
            addFile(file){
                console.info(file,'test');
            },
            error(file){
                console.info(file,'error');
            }
        }
    }
</script>

<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>

Preview html is broken

Hi

It seems the html generated markup is broken in some place:

<div class="dz-error-mark' + this.errorIcon + '</div>

https://github.com/rowanwins/vue-dropzone/blob/vue2/src/index.vue#L116

Cheers, Sebi

How to use with <script> tags

How do you use this with good ol' script tags?
I see a lot of webpack, app, manifest, vendor files... just looking for straight JS & CSS to include, thanks.

prop language doesn't work

I found a different way to change the component texts instead that you say in the documentation.

the languange prop never worked for me, i used instead:

:dropzone-options='{"dictDefaultMessage":"new text"}'
:use-custom-dropzone-options="true"

I post this just for another users reference, i think you could post this in the documentation and show more examples.

Have a nice day :)

Merge dropzoneOptions without "use-custom-dropzone-options"

Hi,

first of all, great package.

Anyway, what I want is to change the paramName using the defaults options too, is is possible?

<v-dropzone id="dz-photos" url="/api/upload"
	@vdropzone-success="photoUploaded"
	:thumbnail-width="144" :thumbnail-height="144"
	:headers="dzOptions.headers"
	:dropzone-options="dzOptions.paramName"
	:accepted-file-types="'.jpg,.jpeg,.png'"
	use-font-awesome></v-dropzone>

Thx.

Can I somehow use getQueuedFiles()

I have multiple dropzone components in a page with each one having a text area next to it.
I use processQueue: false and intercept each submit button so I can add the text input to the form.
I want to be able to submit the text input even if I have no file selected for upload.
I got an idea from here: http://stackoverflow.com/questions/33826960/dropzone-js-function-getqueuedfiles-causes-too-much-recursion

$("#submit-all-"+myDropzone.id).click(function (e) {
console.log('submitting!');
e.preventDefault();
e.stopPropagation();
// myDropzone.$refs.dropzoneEl.processQueue(); // this works when there is an image selected
// if (myDropzone.$refs.dropzoneEl.myDropzone.getQueuedFiles().length > 0) { // this doesn't work
if (myDropzone.getQueuedFiles().length > 0) { // this doesn't work
myDropzone.processQueue();
} else {
myDropzone.sending([]); //send empty
}
console.log('submited!');
});

In both my attempts I get:
Uncaught TypeError: myDropzone.$refs.dropzoneEl.getQueuedFiles is not a function
and
Uncaught TypeError: myDropzone.getQueuedFiles is not a function
Some help please?

Options

Any examples of providing options to the component. Lets say you wanted to pass a auth token as a parameter

Any chances of a making two branches for this component

One for Vue 1.x and one for Vue 2.x.

Included styles should be namespaced

The styles included with this component can easily wreak havoc on the existing styles of an application. The styles should be namespaced so that they do not conflict.

remove not mobile friendly

Would be nice if you can make the remove button mobile friendly. I would have a remove button always there not on hover. Great component.

What is the syntax for executing methods

<script>
import Dropzone from 'vue2-dropzone'

export default {
    components: {
        Dropzone
    },
    props: ['url'],
    created() {
        bus.$on('video-created', function () {
            this.upload()
        })
    },
    methods: {
        upload() {
            this.Dropzone.processQueue()
        },
    }
}
</script>

this.Dropzone.processQueue() isn't right. what is the correct way?

index.vue contains a non-specific i-tag styling

When adding this component to my vue app in combination with webpack this changes my styling of all i tags that are not specifically styled whenever I browse to the page with dropzone on it.

I'd like to see the i tag be made a little more specific.

Relates to index.vue line 129

Can't access dropzone event methods when vue component is from Dynamic Route Matching

Greets,

I am having problems with accessing dropzone events from within a Dynamic Route Matching component (ex: http://localhost:8080/#/order/7567) howevever I have no problem using dropzone on one of my regular none dynamic routed pages. Any solutions to solve this problem?

The dropzone component on dynamic routes works when I do not add any dropzone event functions.

Thanks!

[Vue warn]: Property or method "showSuccess" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
(found in component at /home/project/pages/OrderNumber.vue)

[Vue warn]: Invalid handler for event "vdropzone-success": got undefined
(found in component at /home/project/pages/components/dropzone.vue)

Process Queue does not process all items when upload multiple is on nor does it trigger multiple upload event

When I trigger the processQueue function it only does the first two, then subsequent submits process the next two and so on. Shouldn't processQueue run all files?

Also even with uploadMultiple set to true on the dropzone element, no events to do with multiple uploads are triggered.

Header Parm names

I have added some parameters. But in Laravel there is no value being passed here is my vue code of the component.

 <dropzone id="fileDropZone"  url="api/track/upload" options="{headers:{'Token':{{tokenVal}},'trackCategory':{{track.trackCategory}}}}"></dropzone>

Upload controller code

   /*Upload File */
    public function uploadFile(Request $request){

        $file = $request->file('file');
        $file->store('tracks/multiv');
        $trackCat= $request->trackCategory;

        $token= $request->Token;
        $fileName=$file->getFilename();

        /*Return response */
        return response()->json([
            'filename' => $fileName,
            'trackCategory' => $trackCat,
            'token' => $token,
        ]);

    }

Cannot read property 'previewTemplate' of undefined

I cannot get it to work using the dist file. When I paste the example code into my app I get this:

TypeError: Cannot read property 'previewTemplate' of undefined
    at Dropzone (dropzone.js:416)
    at resolveAsyncComponent (vue.js:1823)
    at createComponent (vue.js:1618)
    at _createElement (vue.js:2130)
    at createElement (vue.js:2084)
    at Proxy.vm._c (vue.js:2182)
    at Proxy.eval (eval at makeFunction (vue.js:8480), <anonymous>:2:234)
    at VueComponent.Vue._render (vue.js:2220)
    at VueComponent.updateComponent (vue.js:2613)
    at Watcher.get (vue.js:2936)
logError @ vue.js:439

The problematic line in the Dropzone.js looks like this:

      this.defaultOptions.previewTemplate = this.defaultOptions.previewTemplate.replace(/\n*/g, "");

I tried running the build command and got this error

ERROR in bundle.js from UglifyJs
SyntaxError: Unexpected token: name (Vue) [./dev/index.js:1,0]

The modification date on the dist file has beed updated though, but nothing changed for me.

Is there a solution?

Assigning file container with files on the server

I couldn't find any documentation on assigning the drop zone container files. Lets say you have a update form and your database pulls the image names form the server. Would be nice to see a example of assigning the file container the files that are already on the server.

Extern previewTemplate

Hi there,

I would like to set de previewTemplate of the dropzone, regarding the official doc, they recommend to do vit this way: document.getElementById('preview-template').innerHTML
But I can't make it work, could it be a good idea to create a slot with the template?

<dropzone id="myVueDropzone"  
  url="https://httpbin.org/post" 
  v-on:vdropzone-success="showSuccess" 
  :use-custom-dropzone-options="true" 
  :dropzone-options="{previewTemplate: function(){return document.getElementById('preview-template').innerHTML} }">
</dropzone>

<div id="preview-template" style="display: none;">
    <div class="dz-preview dz-file-preview">
      <div class="dz-details">
        <div class="dz-filename"><span data-dz-name></span></div>
        <div class="dz-size" data-dz-size></div>
        <img data-dz-thumbnail />
      </div>
      <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
      <div class="dz-success-mark"><span>✔</span></div>
      <div class="dz-error-mark"><span>✘</span></div>
      <div class="dz-error-message"><span data-dz-errormessage></span></div>
    </div>
</div>

How to trigger event?

How can you trigger an event? I'm trying to process the queue like so:

...
methods: {
  uploadFiles() {
    this.$emit('processQueue')
  }
}
...

vm.$refs.myUniqueID.processQueue() not work

vm.$refs.myUniqueID.processQueue() not work, because object vm.$refs.myUniqueID has no method processQueue();

to fix this i called vm.$refs.myUniqueID.dropzone.processQueue() - it`s worked for me

Can't handle vdropzone-sending

I'm trying to use the vdropzone-sending event but it's not making sense. Or it's not working now?

Dynamic Url - build fails

Hello,

I need to pass dynamic url for the dropzone form, because my route contains an ID. This is my code <dropzone id="myVueDropzone" url="{{ entityId }}" v-on:vdropzone-success="showSuccess"></dropzone> , but the build of my js failes, because of this. Is it possible to set dynamic url to the form.

multiple upload

hi
how about multiple upload?
I've add use-custom-dropzone-options=true and in my options uploadMultiple but how can I use successmultiple event of dropzone?

Modifying images before sending

Hello,
does anyone know if there is a way to change images before they are sent? My use-case for this would be to rescale large photos before sending. I figure this could be done on events vdropzone-file-added or vdropzone-sending to be able to retrieve the file, but i can't seem to find any way to replace or add a new resized version to the queue.

Maybe something like dropzone.enqueueFile or accessing dropzone.files[fileIndex] could be made accessible?

Submit file with other input parameter

Hi,

Does anyone know how to submit the files with other input paramaters as well? I have a form with input name, description etc...how to submit all this input together to the api?

How Do I get file source

Is there any way I can get the uploaded file source? using vdropzone-fileAdded(file) event

Cannot import css from dropzone package when build

I tried to use vue2-dropzone with Nuxt.js (with SSR)
When i imported source file src/index.vue, and started build, i got error:
Cannot find module "-!../../../../../../../usr/local/lib/node_modules/nuxt/node_modules/css-loader/index.js

I try to change import dropzone.css in src/index.vue from ../node_modules/dropzone/dist/dropzone.css to ~dropzone/dist/dropzone.css as it says documentation for webpack less-loader and it works

XSRF-TOKEN

I am trying to pass xsrf token for laravel.
I have tried to put :headers='{ "X-CSRF-TOKEN": headers}' , headers holding the token but it doesn't get passed when sending the request to server.
Any idea?

CSS not displayed properly with latest version

I am using the latest version (2.1.4 on npm) which allows me to add customized headers while sending the post request. However the CSS doesn't seemed to display correctly. 2.1.3 and prior versions worked properly.

remove file

I'am able to catch the @vdropzone-success event, but I am not sure if @vdropzone-removedFile is working indeed:

<dropzone
ref="myUniqueID"
:id="id"
:url="uploadUrl"
@vdropzone-success="showSuccess"
@vdropzone-removedFile="deleteImage"
etc.

Building gives this error
Found camelCase attribute: @vdropzone-removedFile="deleteImage". HTML is case-insensitive. Use @vdropzone-removed-file="deleteImage" instead. Vue will automatically interpret it as camelCase in JavaScript. If this is an SVG camelCase attribute, use the .camel modifier.

and using @vdropzone-removed-file="deleteImage" doesn't work neither.

Any idea ? Any example of use ?

vue-dropzone CDN

Hi, I was wondering how can I use it with out using npm to install, what files do I need to include and if theres a way to get them in a cdn?

Appreciate any help

regards

Tidy error messages

If my upload fails badly (i.e. the response is poorly formatted or a 404) the response body gets inserted as the error message when hovering the over the file. If the response is HTML this error message includes that raw HTML tags. Is there any way to customise this error message?

Material icons vs font awesome

I think you should use Font Awesome instead as it is more popular. Or if you can make the icon a prop so we can pass either a Font Awesome or Material icon class name to it. Making this plugin more open and friendly. These are my two cents....

Injected Styles interferring

Is there a way of disabling the injected styles?

It seems there are css declarations that don't seem to be name spaced, eg

i{color:#ccc}.dropzone

Issue using vue-dropzone in npm run dev mode

Hi all,
this is the error in the console:
You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

Best regards
P

Does not work with runtime-only build

At least i get this error:

bundle.js:4420 [Vue warn]: You are using the runtime-only build of Vue where the template option is not available. Either pre-compile the templates into render functions, or use the compiler-included build. 
(found in component <dropzone>)

Error: Invalid dropzone element.

Do you know if it should work without the standalone template compiler ?

file isn't uploading to the server

When I upload the file using postman to test and see if the API is working. It works but when uploading with vue-dropzone it doesn't work. Here is my code. I can drag the file no problem and it appears but doesn't save it to the server.

Upload form code

<template>
    <div class="content-grid mdl-grid">
        <div class="mdl-grid">
            <div class="mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet">


                <form action="#" @submit="storeTrack(track)" v-on:submit.prevent autocomplete="false" enctype="multipart/form-data">

                    <input type="hidden" name="token" value="this.$auth.token('login-as')" v-model="track.token">

                    <h3>File</h3>


                    <div class="mdl-textfield mdl-js-textfield">
                        <dropzone id="fileDropZone"  url="/api/track/upload"></dropzone>
                    </div>



                    <!-- Raised button with ripple -->
                    <div class="mdl-textfield mdl-js-textfield" >
                        <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
                            Add
                        </button>

                    </div>
                </form>


            </div>
            <div class="mdl-cell mdl-cell--4-col mdl-cell--6-col-tablet"></div>
            <div class="mdl-cell mdl-cell--2-col mdl-cell--4-col-phone"></div>
        </div>


    </div>

</template>

<script>
    var data='';
    export default{

        data: function () {
            return {
                tkn:''
            }
        },

        actions: {

        },


        events: {
            'vdropzone-success': function (file) {
                console.log('A file was successfully uploaded' + file);
            }
        },

        methods:{



        },

        ready: function () {
            


        }



    }
</script>

Laravel Returns the following error

FatalErrorException in TracksController.php line 103: Call to a member function store() on null. Looks like the filename is null.

API Laravel Code

 /*Upload File  Controller*/
    public function uploadFile(){
        $file = request()->file('fileDropZone');
        $file->store('tracks');

        //return $file->getFilename();
    }

Route

 /*Upload files */
    Route::post('track/upload',[
        'uses' => 'TracksController@uploadFile'
    ]);

Now this upload all works in postman so not sure why it isn't working in the app. In case here are my dependencies.

{
  "private": true,
  "dependencies": {
    "@websanova/vue-auth": "^1.5.1-beta",
    "babel-core": "^6.17.0",
    "babel-eslint": "^7.0.0",
    "babel-loader": "^6.2.5",
    "babel-plugin-transform-runtime": "^6.12.0",
    "babel-preset-es2015": "^6.16.0",
    "babel-preset-stage-2": "^6.0.0",
    "bootstrap-sass": "^3.3.7",
    "css-loader": "^0.23.0",
    "dropzone": "^4.3.0",
    "gulp": "^3.9.1",
    "jquery": "^3.1.0",
    "laravel-elixir": "^6.0.0-9",
    "laravel-elixir-vue-2": "^0.2.0",
    "laravel-elixir-webpack-official": "^1.0.2",
    "lodash": "^4.16.2",
    "material-design-lite": "*",
    "path": "^0.12.7",
    "style-loader": "^0.13.0",
    "vue": "^1.0.26",
    "vue-hot-reload-api": "^2.0.6",
    "vue-html-loader": "1.2.3",
    "vue-loader": "8.5.4",
    "vue-mdl": "^0.9.4",
    "vue-resource": "^1.0.3",
    "vue-router": "^0.7.13",
    "vue-strap": "^1.0.11",
    "vue-style-loader": "^1.0.0",
    "vuex": "^1.0.0-rc.2",
    "webpack": "^1.12.2",
    "webpack-dev-server": "^1.16.1"
  },
  "devDependencies": {
    "babel-core": "^6.17.0",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015": "^6.16.0"
  }
}

Settings options via attributes

When I try to set the thumbnailWidth and Height via an attribute my console error tells me
vue.js?3de6:2643 [Vue warn]: Invalid prop: type check failed for prop "thumbnailHeight". Expected Number, got String.
And
vue.js?3de6:2643 [Vue warn]: Invalid prop: type check failed for prop "thumbnailWidth". Expected Number, got String.

When I try to make an object in and try to pass that via dropzoneOptions attribute it says it expects an Object instead of a String.

This is the component I use now (for testing):

<dropzone id="myVueDropzone" url="some-url" v-on:vdropzone-success="dzImageSucces" v-on:vdropzone-removedFile="dzImageRemoved" thumbnailHeight="30" thumbnailWidth="30"></dropzone>

So there's pretty much no winning here :-p
P.S the docs on the NPM page are not up-to-date nor working properly for Vue 2. So it may be that this issue is related to bad documentation

Handle more dropzone events

I lack more of dropzone's events being emitted from this component.

Specifically, I would like to remove all files and reload the content listing on queue complete - but now I have to do that after each file is uploaded, resulting in as many content reloads as there are files uploaded.

Register the Component

Hi,

I understand how to npm install and how to import, but i don't know how to register the component. What is the path?

Thanks!

Error

After I install it in my project by npm , fellow the usage list :
import Dropzone from 'vue-dropzone/lib/Dropzone'
but I can't find the right file,
I change it to :
import Dropzone from 'vue-dropzone/VueDropzone'
and go on,then I run my project , I get error with :
Uncaught (in promise) ReferenceError: url is not defined(…)
but I set the url attr like this

could you please help me ?

import statement did not as shown in readme

npm could not find this

  import Dropzone from 'vue-dropzone/lib/Dropzone'

This worked (found here: #5 (comment))

  import Dropzone from 'vue2-dropzone'

I don't have much knowledge of how import works. Not sure if the line in readme should be replaced or maybe another section added if you are using vue2-dropzone

dropzone not defined

I am using this via a cdn and on one page in my Laravel app but I get the error: media:149 Uncaught ReferenceError: Dropzone is not defined is this setup right?

<div id="user-upload-media">

    <h2></h2>

    <dropzone id="myVueDropzone" url="https://httpbin.org/post" v-on:vdropzone-success="showSuccess"></dropzone>

  </div>

  <script type="text/javascript" src="https://cdn.rawgit.com/rowanwins/vue-dropzone/vue2/dist/vue2-dropzone.js"></script>
  <script type="text/javascript">
    
    jQuery(document).ready(function($) {

      var vm = new Vue({
        el: '#user-upload-media',
        data: function() {
        },
        components: {
          'Dropzone': Dropzone,
        },
        mounted: function(){
        },
        methods:{
          showSuccess: function (file) {
            console.log('A file was successfully uploaded')
          }
        }

      });


    });

  </script>

paramName prop ignored / not set

My application backend requires a different file parameter name from the default ('file'). When I attempt to pass in the paramName to the dropzone component requests to the server continue to send the file with the parameter name set to 'file'. My custom paramName is ignored.

Pulling up vue dev-tools and browsing the component tree I can see that my dropzone component "props" section contains all the other props I'm supplying as well as the default settings I see in the vue-dropzone code that I don't supply / override. What I don't see is any reference to the prop called "paramName". I mean, it's not that paramName exists and it's undefined -- the prop is not shown at all. Which is strange particularly because the default of 'file' should have set it even in the case where my input is not being accepted for some reason.

I've walked the vue-dropzone .vue file and verified that the paramName prop is present / supported and the mounted() hook correctly assigns it to the Dropzone object instantiated at that time. So I have no idea why this is not working, while every other prop is working / defined as expected.

I installed from npm and am currently using version 2.2.4.