Dropzone: using myDropzone.uploadFiles([ ]); shows a cannot read property 'name' on undefined error

[nairvishal]

Error screenchot :

Basically I have a dropzone form which has some text inputs and the dropzone previews div in which i show files already uploaded in the server.
One case is that user can edit some text in the text input and submit the form without dropping any images . I read a solution of how to submit the form even when there are no files in dropzone in this issue Add existing file not triggering events #418 which was something like this -->

submitForm() {
  if (dropzone.getQueuedFiles().length > 0) {
    dropzone.processQueue();
  }
  else {
    // Upload anyway without files
    dropzone.uploadFiles([ ]);
  }
}

The error comes when the myDropzone.uploadFiles([ ]); is called, on line 1480 of the latest version somewhere near this

for (i = _m = 0, _ref5 = files.length - 1; 0 <= _ref5 ? _m <= _ref5 : _m >= _ref5; i = 0 <= _ref5 ? ++_m : --_m) {
        formData.append(this._getParamName(i), files[i], files[i].name);
      }

This error only happens on new version. If i try to use the old dropzone.js it gives some status error but still it submits,in the case of new version it shows the error shown on the screenshot above and does not submits .

[GeertRaze]

Is there any update on this issue?

[mahnunchik]

+1

[Giorgix]

Yes!, i was trying to figure it out, and finally i got it. You should replace formData.append(this._getParamName(i), files[i], files[i].name);
with

if ( typeof files[i] != "undefined" ) {
  formData.append(this._getParamName(i), files[i], files[i].name);
} else {
  formData.append(this._getParamName(i), "");
} 

Thta's it it worked for me. Hope it helps!! ;)

[yattias]

+1

[milesegan]

Would be great to see this fixed merged. I'm maintaining a manually patched version of Dropzone for now.

[south634]

I needed to submit a dropzone form without files, and was getting the error "files[i] is undefined" when using this suggestion to do so: http://stackoverflow.com/a/21221321

Giorgix's code replacement above solved that issue for me (thank you): https://github.com/enyo/dropzone/issues/687#issuecomment-72234975

Agree with others that it would be nice to see a fix for this in a future version (I am currently on v4.0.1).

Also would like to just add that DropzoneJS is awesome, and I appreciate all the work you've put into it!

[watoo]

+1

[pavgra]

+1

[ionatan-israel]

no solution to this bug?

[yokas]

current is
for (i = _m = 0, _ref5 = files.length - 1; 0 <= _ref5 ? _m <= _ref5 : _m >= _ref5; i = 0 <= _ref5 ? ++_m : --_m) { formData.append(this._getParamName(i), files[i], this._renameFilename(files[i].name)); }
still bug if file is []
Will this fix the bug?
for (i = _m = 0, _ref5 = files.length - 1; 0 <= _ref5 ? _m <= _ref5 : _m >= _ref5; i = 0 <= _ref5 ? ++_m : --_m) { if(files.length > 0) { formData.append(this._getParamName(i), files[i], this._renameFilename(files[i].name)); } }

[ghost]

Giorgix's code it was part of the solution but I also needed to add:

if (( typeof files[0] != "undefined" ) && (files[0].status === Dropzone.CANCELED)) {
            return;
 }

[jonatanes]

Hi! @RalucaP where we put this code?
if (( typeof files[0] != "undefined" ) && (files[0].status === Dropzone.CANCELED)) {
return;
}

[lphilipc]

@jonatanes line 1298

[ghost]

Hey @jonatanes! Sorry for the late reply, it was indeed on the line 1298.

In the meantime, I came up with another solution which works better for me when I want to submit the dropzone form without adding any file:

      $('input[type="submit"]').on("click", function (e) {
        if (myDropzone.getQueuedFiles().length > 0) {
          e.preventDefault();
          e.stopPropagation();
          myDropzone.processQueue();
        }
      });

[jonatanes]

@RalucaP Awesome! Thanks so much.

[ilarioengler]

You should check if there are files in the queue. If the queue is empty call directly dropzone.uploadFile(). This method requires you to pass in a file. As stated on canisue the File constructor isn't supported on IE/Edge, so just use Blob API, as File API is based on that.

The formData.append() method used in dropzone.uploadFile() requires you to pass an object which implements the Blob interface. That's the reason why you cannot pass in a normal object.

dropzone version 5.2.0 requires the upload.chunked option

if (this.dropzone.getQueuedFiles().length === 0) {
    var blob = new Blob();
    blob.upload = { 'chunked': this.dropzone.defaultOptions.chunking };
    this.dropzone.uploadFile(blob);
} else {
    this.dropzone.processQueue();
}

[shayah]

I tested all suggestions
the only workaround that working on Firefox and other browsers is the suggestion of yokas

change dropzone.js file by adding condition before appending

befor fix

for (i = _m = 0, _ref5 = files.length - 1; 0 <= _ref5 ? _m <= _ref5 : _m >= _ref5; i = 0 <= _ref5 ? ++_m : --_m) { formData.append(this._getParamName(i), files[i], this._renameFilename(files[i].name)); }

after fixing

for (i = _m = 0, _ref5 = files.length - 1; 0 <= _ref5 ? _m <= _ref5 : _m >= _ref5; i = 0 <= _ref5 ? ++_m : --_m) { if(this.files.length > 0) { formData.append(this._getParamName(i), files[i], this._renameFilename(files[i].name)); } }

[klsweat]

I implemented Giorgix

if ( typeof files[i] != "undefined" ) {
  formData.append(this._getParamName(i), files[i], files[i].name);
} else {
  formData.append(this._getParamName(i), "");
} 

and Ghosts

if (( typeof files[0] != "undefined" ) && (files[0].status === Dropzone.CANCELED)) {
            return;
 }

But also needed the dropzone success function to be called, after the form had submitted with no files so:

In the dropzone.js file under
Dropzone.prototype._finished = function(files, responseText, e) {
I appended this below, so I could have objects return from the server.

 if(typeof files[0] === 'undefined'){
        this.emit("success", file, responseText, e);
        this.emit("complete", file);
  }

so that this could run when there were no files.

success: function (file, response) {
                console.log('WE NEVER REACH THIS POINT.', response);
                sessionStorage.setItem('issue', response.id);
                var pathArray = window.location.pathname.split('/');
                if (pathArray.length === 5) {
                    var element = pathArray.pop();
                }
                pathArray = pathArray.join("/", pathArray);
                window.location.href = pathArray + '/' + response.id;
            }