CODEWITHSUNDEEP
javascriptnode.jsvue.jsvuejs3
RiBi
RiBi

Reputation: 883

How to increase file upload size for dropzonejs with vuejs3

I have made a vue dropzone component using dropzonejs. The component works however I'm not able to configure the dropzone to upload files larger than 256mb which I believe is the default. For testing purposes I have put 1mb(reducing max file size).

I have also tried putting my config code inside mounted beforeMount, create etc.

My Code

<template>
  <div class="dropzone-container">
    <form
      :action="uploadurl"
      class="dropzone drop-area"
      enctype="multipart/form-data"
      id="myDropzone"
      ref="myDropzone"
      :key="`dz-${dzkey}`"
    >
      <input type="hidden" name="path" :value="currentPath" />
    </form>
    <button class="finish-button" @click="finishUpload">Finish Upload</button>
  </div>
</template>

<script>
// import * as Dropzone from "dropzone/dist/min/dropzone.min.js";
import FileHandling from "../fileHandling";
const Dropzone = require("dropzone/dist/dropzone.js");
Dropzone.autoDiscover = true;
export default {
  name: "DropZone",
  props: ["currentPath"],
  data() {
    return {
      uploadurl: FileHandling.SendForUpload(),
      dzkey: 0,
    };
  },
  methods: {
    finishUpload() {
      this.$refs.myDropzone.dropzone.removeAllFiles();
      this.$emit("finishedUpload");
    },
    dropconfig() {
      console.log(Dropzone);
      Dropzone.options[this.$refs.myDropzone] = {
        maxFilesize: 1,
      };
    },
  },
  ready: function() {
    this.dropconfig();
  },
};
</script>

Upvotes: 1

Views: 873

Answers (1)

tony19
tony19

Reputation: 138636

There are two issues in your code:

  1. There is no ready hook. Perhaps you meant mounted:

    export default {
  // ❌ ready hook does not exist
  //ready() {
  //  this.dropconfig();
  //},

  // ✅
  mounted() {
    this.dropconfig();
  }
}

  2. Dropzone.options is a map of element IDs (strings), not element instances (HTMLElement):

    // ❌
//Dropzone.options[this.$refs.myDropzone] = {/*...*/};

// ✅ `myDropzone` is a string that matches element ID in template
Dropzone.options.myDropzone = {/*...*/};

Fixing those issues should allow your maxFilesize config to take effect.

Upvotes: 1

Related Questions