Vue-dropzone: Help needed: Nuxt and vue-dropzone

[MarcMagnin]

Hi,

Thanks for that really nice component.
I would like to use it with nuxt but within my current setup build is ok but I got nothing rendered for the dropzone (size 0x0 even if I set a size).
I'm pretty new to Vue and nuxtjs.
Here is my setup:

nuxt.config.js:

module.exports = {
  head: {
    title: 'Florie Briand',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' },
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/icon?family=Material+Icons' }
    ]
  },
  plugins: [
    { src: '~plugins/vue-dropzone.js', ssr: false },
  ]
 }

plugins/vue-dropzone.js

import Dropzone from 'vue2-dropzone'
import Vue from 'vue'

Vue.use(Dropzone)

pages/index.vue

<template>
  <div id="app">
    <p>Welcome to your Vue.js app!</p>

    <dropzone id="myVueDropzone"  width="200px" height="80px" url="https://httpbin.org/post" v-on:vdropzone-success="showSuccess">
        <!-- Optional parameters if any! -->
        <input type="hidden" name="token" value="xxx">
    </dropzone>

  </div>
</template>

<script>


  export default {
    name: 'MainApp',
    methods: {
      'showSuccess': function (file) {
        console.log('A file was successfully uploaded')
      }
    },
  }
</script>

Thanks for the help!

[rowanwins]

Hi @MarcMagnin

I can't say I've looked much at Nuxt although there have been some pull requests previously to get vue-dropzone supported in server-side rendering so I know it's doable.

My first suggestion would probably to look at your config file
plugins: [ { src: '~plugins/vue-dropzone.js', ssr: true}, ] }
Does anything different happen if you set ssr to true?

And looking at this nuxt doco is talks about some build settings so it might be worth seeing if they make any difference...

Cheers

[Etheryte]

You can't use ssr: true since Dropzone uses many browser environment properties (window, document, etc) and will error out on the server.

The Nuxt docs are notorious for being bad so personally I found it easier to just shim the whole thing:

import Vue from 'vue'

let component = {}
if (process.browser) {
  component = require('vue2-dropzone')
}
component.name = 'dropzone'
component.render = function(createElement) {
  const that = this._self
  return createElement('form', {
    attrs: {
      class: 'dropzone',
      id: that.id || '',
      action: that.url || '',
      dropzoneOptions: that.dropzoneOptions,
      useCustomDropzoneOptions: that.useCustomDropzoneOptions
    }
  }, this.$slots.default)
}
Vue.component('dropzone', component)

Essentially, all you need to do is load the component only if you're in a browser environment and unroll the render function (since it won't get precompiled).

If you want the component to be global, just configure the plugin as usual in nuxt.config.js:

module.exports = {
  plugins: [ '~plugins/dropzone.js' ]
}

Otherwise you can remove the Vue.component() call, add an export and import it where necessary.

Caveat emptor etc, this is just a hack, while it works for the time being it may eventually break somewhere down the road since Nuxt is still in beta.

[rowanwins]

Thanks for the write up @Etheryte . I'll try and take a look at it further as I need to get my head around this whole SSR stuff at some stage anyway!

[finalight]

@Etheryte i still have the issue saying that unknown component 'Dropzone' when i do that

any solutions?

[Etheryte]

@finalight If the component is not registered then your error seems to be somewhere else, from your current description it sounds like in capitalization.

[lomholdt]

Did anyone succeed using nuxt and this dropzone component when using SSR?

[rowanwins]

Hi @lomholdt

Im honestly not sure sorry. We're currently working on a major overhaul of this component and the docs so I'll try and include a SSR/Nuxt example in there. @AlexanderYW or @vrajroham is this something either of you could maybe take a look at?

[AlexanderYW]

Spent around an hour trying getting it to work with no luck, I haven't really played with Nuxt before

If @vrajroham can't either we should maybe tag it with hacktober and hope that someone have a fix?

[vrajroham]

Same here @AlexanderYW @rowanwins. Not familiar with nuxt.js, but I'll surely look into it and update here! Need some time :clock1:

[lomholdt]

Thanks @rowanwins, that sounds great!
@AlexanderYW Me too, no success so far.
Could be awesome with a nuxt-community version of the plugin leveraging this component. Just an idea of course, first of all it would be fantastic to just have it working with SSR :)

[Etheryte]

For anyone having a hard time or looking for an example, we've been using the solution I've outlined above in production for a few months now without any issues.

[AlexanderYW]

Hi @Etheryte, I Tried your sample, but I cannot get it to work

The first sample of code you wrote I assume belongs in ~plugins/dropzone.js
and the second ofc in nuxt.config.js as you write

But when I do that I get errors in the console like

Unable to get property 'destroy' of undefined or null reference ``

and

Invalid dropzone element

and

The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

are you sure your code works with the latest Nuxt.Js?, also It doesn't even render the page anymore

Do you know what the issue might be or what I am doing wrong / missing?, since I'm just following what you wrote

[lomholdt]

@AlexanderYW I tried the example as well, and I get the same error.

[Etheryte]

I haven't tested with the latest release, our production runs on 1.0.0-alpha3. I imagine the errors are rather straightforward to resolve if you set the debugger to catch on thrown errors.

[vrajroham]

@AlexanderYW I tried multiple ways but no luck :frowning_face:. Except @Etheryte solution work perfectly in my case.

[Etheryte]

The issue with the latest Nuxt release was simple prop passing. Since many people seem to struggle with this, I've packaged the solution and published it both on NPM as well as on Github.

Installation:

npm i --save nuxt-dropzone

Usage:

<template>
  <dropzone id="foo" url="http://httpbin.org/anything"></dropzone>
</template>

md5-a3643c85c83ba9c68ed828ab17616e0c

[lomholdt]

Cool @Etheryte, thanks.

[vrajroham]

Hey Thanks @Etheryte,
Your component links added to README. :tada:

[JMacLulich]

Thanks @Etheryte we've been struggling with exactly the same problem and have been throwing our hands up in frustration as the Nuxt docs are pretty bad. This helps immensely!

[rowanwins]

Thanks @Etheryte for writing up the docs and the component. FYI We've just published a fairly major overhaul of this component so you might want to take a look at updating your's to bring in the latest changes.

[Etheryte]

@rowanwins Thanks for the heads up, I've updated the component to 3.0.0. I've subscribed to the releases so that I can get notified automatically in the future.

[vijay18399]

data:[{"url":"https://mounty.sgp1.digitaloceanspaces.com/images/4517c293-7bc4-4292-b50a-56de76878965.jpeg","name":"index.jpg"},{"url":"https://mounty.sgp1.digitaloceanspaces.com/images/227e93d3-18e2-4f3b-af4d-99f736f575e7.jpeg","name":"index2.jpg"}]

every time when uploading multiple files it is sending two files at a time having response as above.
methods: {
success(file,response) {
this.$emit('uploaded',response.data[0].url)
}
}

data() {
return {
// See https://rowanwins.github.io/vue-dropzone/docs/dist/index.html#/props
options: {
url: "some images api/",
uploadMultiple: true,
autoProcessQuee: false
}
}
},

[Etheryte]

@vijay18399 Please ask either Stack Overflow or make a new ticket, this is an old ticket abut a completely different problem.