etheryte/nuxt-dropzone

A Nuxt SSR-compatible Dropzone component.

nuxt-dropzone

A Nuxt SSR-compatible Dropzone component, internally powered by vue-dropzone.

Installation

npm i --save nuxt-dropzone 

Usage

See the demo project.

<template>
  <dropzone id="foo" ref="el" :options="options" :destroyDropzone="true"></dropzone>
</template>

<script>
import Dropzone from 'nuxt-dropzone'
import 'nuxt-dropzone/dropzone.css'

export default {
  components: {
    Dropzone
  },
  data() {
    return {
      // See https://rowanwins.github.io/vue-dropzone/docs/dist/index.html#/props
      options: {
        url: "http://httpbin.org/anything"
      }
    }
  },
  mounted() {
    // Everything is mounted and you can access the dropzone instance
    const instance = this.$refs.el.dropzone
  }
}
</script>

See the vue-dropzone docs for futher configuration information.

Direct AWS S3 uploads are also supported.

Common issues and solutions

• Importing styles doesn't work with PostCSS out-of-the-box
• IE support
• Scoped styles are not applied

Issues & contributing

Please file any issues under Github issues, be sure to include your Nuxt release version as well as a minimal, complete, and verifiable example.
Contributions welcome, be sure to test the demo application with any changes before filing a pull request.

nuxt-dropzone's Issues

The client-side rendered virtual DOM tree is not matching server-rendered content.

I'm getting error message on every time when page renders from server side

[Vue warn]: 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.

My parent element is my form.

Form html

    <form v-on:submit.prevent="addProduct" accept-charset="utf-8" enctype="multipart/form-data">
      <div class="field">
        <label for="name" class="label">Name</label>
        <div class="control has-icons-left">
          <input class="input" type="text" v-model="form.name">
          <span class="icon is-small is-left">
            <i class="fa fa-envelope"></i>
          </span>
        </div>
      </div>
      <div class="field">
        <label for="text" class="label">Description</label>
        <div class="control">
          <textarea class="textarea" type="text" v-model="form.text"></textarea>
        </div>
      </div>
      <div class="field">
        <dropzone id="productImage" :options="dropzoneOptions"></dropzone>
      </div>
      <div class="field">
        <div class="control has-text-right">
          <button class="button is-primary" :class="button" :disabled="button.disabled">Submit</button>
        </div>
      </div>
    </form>

Unexpected token: punc

Started getting this error on heroku today. Any idea?

ERROR in nuxt.bundle.cadbc7734092be762616.js from UglifyJs
Unexpected token: punc (() [./~/vue2-dropzone/dist/vue2Dropzone.js:1,41920][nuxt.bundle.cadbc7734092be762616.js:32676,41885]

Question: what is this package for ?

Hi. 👋🏻
Thanks for your work here ! 🙏🏻
Don't want to be rude, just to know what is the point of this package.
Basically, we can add vue-dropzone as a client only plugin and it is basically just useful when used on a client. Does SSR helps performance-wise here (taking the static generation btw) ? Or is it purely for "SEO" ??

Thanks again and have a nice day. 😸

SCRIPT1003: Expected ':' in IE11.

If I open page where I use nuxt-dropzone, it throws SCRIPT1003: Expected ':' in IE11.
I thought transpiling will fix IE Support. by adding below configuration in nuxt.config.js
build: {
transpile: ['vue2-dropzone']
}
No error comes in IE but component stopped working , Following error is displayed in browser console
Error Log:-
Unknown custom element: - did you register the component correctly? For recursive
components, make sure to provide the "name" option.

Please check.
Thanks

FYKI:-
Using Nuxt version:- ^2.10.2
"nuxt-dropzone": "^1.0.4"

Typo in the installation instructions

Describe the bug:
In the install docs it says to add

mounted() { const instance = this.$refs.el.dropzone; },

but I think it's just

mounted() { const instance = this.$refs.el; // or whatever other ref you call the component with },

Importing styles doesn't work with Postcss

First off, thank you for your work with this library. Exactly the sort of solution I was hoping for.

I've figured out a way around this, but for future users importing styles with import 'nuxt-dropzone/dropzone.css' doesn't work if you're using postcss. As a work around I copied the styles directly from here and pasted them into my styles globally (not scoped). Not the most elegant, but I thought I would document it in case someone else runs into this problem.

Property "_self" was accessed during render but is not defined on instance.

I'm Getting This Error on nuxt3 beta.
package.json
{
"private": true,
"scripts": {
"dev": "nuxi dev",
"build": "nuxi build",
"start": "node .output/server/index.mjs"
},
"devDependencies": {
"nuxt3": "latest"
},
"dependencies": {
"axios": "latest",
"nuxt-dropzone": "^1.0.4"
}
}

My style does not work

I use previewTemplate, and want to use some styles.
Inline CSS is work normally, but CSS in <style> block does not work.

<script>
...

data() {
    return {
        ...
      options: {
        previewTemplate: this.template(),
      }
    };
  },
  methods: {
    template() {
      return `
          <div class="preview__card">
            ...
          </div>
        `;
    },
  },
...
</script>

...

<style lang="scss" scoped>
.preview__card {
  background-color: red;
}

This don't pass build

Unexpected token: name (component) [./node_modules/nuxt-dropzone/index.js:1,0]

try npm run build

How to hide filesize?

How to hide filesize?

Files array empty

Describe the bug:
After dragging files into the file dropzone and pressing the button i made for debugging which logs the instance object. It says there are no files in the file dropzone.

vue2-dropzone 3.5.6 has broken CSS

Using this off-the-shelf results in broken CSS:

This is because vue2-dropzone's CSS is in the wrong order. They fixed it in 3.5.8, and if you update the dependency it seems to work.

Exposing DropZone class so that confirm can be edited

The DropZone class can have its confirm method overridden.
please see:
https://docs.dropzone.dev/configuration/basics/methods

as it stands, there doesn't seem to be a way to access the DropZone class directly via nuxt-dropzone, only an instance.

My suggestion would be to allow DropZone to be exposed via a plugin

:include-styling="false" doesn't work

seems that :include-styling="false" doesn't work I didn't even included css as per example but anyway getting the default css which is not required in my case?

Update vue2-dropzone dependency to 3.5.2

This allows the ability to send additional info to our AWS S3 signingURL api endpoints, allowing you to customise where the file ends up - as described at the end of this page: https://rowanwins.github.io/vue-dropzone/docs/dist/#/aws-s3-upload

I've tested by swapping out the old dist js file with the new one and it all appears to work fine.

Events is not working

Hm. Looks like this doesn't work and you didn't provide any example, like events didn't exist.

<dropzone id="foo" ref="el" :options="options" :destroyDropzone="true" @vdropzone-success="setImageFilename"></dropzone>

@vdropzone-success="setImageFilename" how to make it work?

Change languaje

Is there a way to change the default message "Drop files to upload"?

Thanks.

Module not found: Error: Can't resolve './vue2-dropzone/dist/vue2Dropzone.css'

CSS import like below, will result in an error.

import 'nuxt-dropzone/dropzone.css'

I changed it to workaround.

import 'vue2-dropzone/dist/vue2Dropzone.css'