CODEWITHSUNDEEP
javascriptdropzone.js
Asur
Asur

Reputation: 4017

Dropzone.js v5 not showing files from server: Cannot read property 'filename' of undefined

I'm building a single image upload form using the most recent Dropzone.js v5.1. I need to show files that are already stored in my server so I followed the official tutorial in the repo wiki. My code looks like this: 

Dropzone.options.mainMediaForm = {
    paramName: "file",
    maxFilesize: 2,
    maxFiles: 1,
    thumbnailHeight: null,
    thumbnailWidth: null,
    acceptedFiles: 'image/*',
    init: function() {
        this.on("addedfile", function(file) {
            if (this.files.length > 1) {
                this.removeFile(this.files[0]);
            }
        });
        this.on("thumbnail", function(file) {
            if (file.width != imageWidth || file.height != imageHeight) {
                file.rejectDimensions()
            }
            else {
                file.acceptDimensions();
            }
        });
        // Start of tutorial code //
        var mockFile = { name: "Filename", size: 12345 };
        this.emit("addedfile", mockFile);
        this.emit("thumbnail", mockFile, "url/image.jpg");
        this.emit("complete", mockFile);
        // End of tutorial code //
    },
    accept: function(file, done) {
        file.acceptDimensions = done;
        file.rejectDimensions = function() { done("Invalid dimension."); };
    }
};

Everything works just fine except the tutorial code applied, which logs an error: 

Uncaught TypeError: Cannot read property 'filename' of undefined
at Dropzone.addedfile (dropzone.js:296)
at Dropzone.Emitter.emit (dropzone.js:58)
at Dropzone.init (edit:516)
at Dropzone.init (dropzone.js:721)
at new Dropzone (dropzone.js:506)
at Function.Dropzone.discover (dropzone.js:1596)
at Dropzone._autoDiscoverFunction (dropzone.js:2046)
at HTMLDocument.init (dropzone.js:2015)

Here is the HTML, quite standard: 

<!-- Main media form -->
<form id="main-media-form" action="action/url" class="dropzone">
  <div class="fallback">
    <input name="file" type="file"/>
  </div>
</form>

I've already tried some other answers I found here in SO, but none of them worked, getting always the same error. At this point I don't know if I'm doing something wrong or the tutorial is outdated.

Any help is appreciated.

Upvotes: 0

Views: 1976

Answers (2)

MonoStas
MonoStas

Reputation: 54

Had the same issue. Now fixed in version 5.1.1!

Upvotes: 1

Chou4i3b
Chou4i3b

Reputation: 11

i had the same problem and i solve it by using a previous version of dropzone , its a problem with v 5

Upvotes: 1

Related Questions