Safari - TypeError: files.map is not a function.

[KateMort]

In Safari 11 (maybe also earlier) dropping files into dropzone do not work for us.
In all other browsers tested (Chrome, Firefox) it works just fine. In Safari only the click/filebrowser functionality works.

JS Error in the Console:

TypeError: files.map is not a function. (In 'files.map((file) => this.addFile(file))', 'files.map' is undefined)
handleFiles — dropzone.js:1420
drop — dropzone.js:1400

Any idea?

[ruslanasa]

I observe the same issue on our site

[treehighroots]

same here. on mobile safari everything works fine.

[jfraetn]

Same here.

Anyone looking in to this?

[marcomarchesi]

Same here, on Safari 10.1

[djmassive]

I have the same issue v11

[djmassive]

I found solution for this error. Find (line 1654) and replace this:
return files.map(function (file) {
return _this5.addFile(file);
});

to this:

const files_array = Array.from(files);
return files_array.map(function (file) {
return _this5.addFile(file);
});

Now works with safari and chrome, also Firefox

I've added changes to source - please test on different browsers like IE and older SAFARI.

[treehighroots]

@djmassive absolutely great!
addition: Array.from is unknown by IE11. if you need IE11 support polyfill this with this polyfill

[sorenwiz]

@djmassive - Awesome!
How about this so we don't need the polyfill?

            const files_array = Object.values(files);
            return files_array.map(function (file) {
                return _this5.addFile(file);
            });

[djmassive]

@Sorenfu this works also on safari - so if this works on other browsers that will be all :-)

[sorenwiz]

Had issues in capybara. Did this now

        value: function handleFiles(files) {
            var _this5 = this;

            var files_array = [];
            for(var i=0; i<files.length; i++) {
              files_array.push(files[i]);
            }

            return files_array.map(function (file) {
                return _this5.addFile(file);
            });

        }

[zbauman3]

@Sorenfu That works great for me on safari, chrome, and mobile safari; thanks!

[nop33]

I am getting the same error and I am using the latest release of the library. However, the dropzone in http://www.dropzonejs.com works fine in Safari.

[MariusRumpf]

@nop33 The website seems to use an older version of dropzone, tested it with version 5.1.1 where this error does not exist.

[indreksiitan]

5.2.0 downloaded today had the problem, got fixed with the solution from @Sorenfu.

[Hobby-Student]

@Sorenfu solution also working for IE11

[lukeify]

Is any contributor/developer on the project actually working on this, either on here or on GitLab? Seems like a pretty serious issue that needs resolving immediately.

[nop33]

@lukeify, as @Sorenfu suggested, add the following temporary fix in your code.

Assuming an initialisation of the Dropzone as below:

var myDropzone = new Dropzone("#my-dropzone", {
  ...
});

add the following right below:

myDropzone.handleFiles = function(files) {
  var _this5 = this;
  var files_array = [];

  for (var i = 0; i < files.length; i++) {
    files_array.push(files[i]);
  }

  return files_array.map(function(file) {
    return _this5.addFile(file);
  });
};

[lukeify]

@nop33. Yup. Aware of the fix. Just extremely surprised such a simple problem which breaks drag & drop in both IE & Safari has taken over a month to even be actioned. A PR has been submitted on GitLab (merge request 30) I see, but this should've been fixed as a 5.2.x point release weeks ago.

[pierreclr]

Still not merged ? I see the issue closed but still have the bug by installing the latest version on npm .. (5.2.0)

[lukeify]

Update for those following this issue: the two-line fix has been merged, after 3+ months, into the master branch on the GitLab repository.

To be published as 5.3.0 at some undisclosed time in the future.

[amitparrikar]

I guess all we need is a pollyfill for Safari userAgent. Editing the js library is not a good solution i feel. feel free to correct me.
Here is my solution:

if (!FileList.prototype.map) {
        FileList.prototype.map = function(callback) {
          var T, A, k;

          if (this == null) {
            throw new TypeError('this is null or not defined');
          }

          var O = Object(this);
          var len = O.length >>> 0;

          if (typeof callback !== 'function') {
            throw new TypeError(callback + ' is not a function');
          }

          if (arguments.length > 1) {
            T = arguments[1];
          }

          A = new Array(len);

          k = 0;

          while (k < len) {

            var kValue, mappedValue;
            if (k in O) {
              kValue = O[k];
              mappedValue = callback.call(T, kValue, k, O);
              A[k] = mappedValue;
            }
            k++;
          }
          return A;
        };
      }

[baschny]

Service-Comment:

If you reach this issue and are wondering about the status of this fix, it has been merged (https://gitlab.com/meno/dropzone/merge_requests/31) and released with 5.3.0 (Jan, 23th 2018). See https://gitlab.com/meno/dropzone/blob/v5.3.0/CHANGELOG.md

Also note that github is no longer the repository of this project, so issues, MR and other stuff that you might find in github regarding dropzone are potentially no longer relevant.