Filepicker IE11 bug: cannot upload cropped photo

picker bug filestack-js version: 3.12.4 browser: Internet Explorer 11 polyfills: yes

The bug was introduced at some point since version 1.14.6.

“TypeError: Object doesn’t support this action” is thrown when a manually transformed file is uploaded.

Repro:

Instantiate a picker with transformations, such as

            transformations: {
              crop: {
                force: true,
                aspectRatio: 1
              }
            }

1. Open the picker
2. Select a file
3. Click “Save” on the crop screen
4. Click “Upload”
5. onFileUploadFailed is called with the file object and TypeError

[schutterp]

A colleague found the actual issue and we landed on filestack-js@3.7.0 as the last version we could get to work in IE11.

What they discovered is that:

the filestack-js client pins the version of the picker.js code they grab at run-time to actually display the file picker—and in https://static.filestackapi.com/picker/1.9.4/picker.js, they introduced a change which includes a call to new File.

The File constructor is not supported by IE 11 and there appear to be no easy polyfills that let us support it without changing the source code. In the most recent version of the picker.js file, this new File(…) call still exists. This means that anytime we try to have a cropped/transformed image upload in IE 11, the browser throws an error TypeError: Object doesn’t support this action and it silently fails.

https://static.filestackapi.com/picker/1.9.3/picker.js

if (a.transformed) {
  o = r
    .dispatch("resizeImageMaybe", a.transformed)
    // ...
    .then(function(t) {
      if (!r.getters.files[a.uuid]) {
        return Promise.resolve();
      }
      return e.upload(t, s, u, l);
    });
}

https://static.filestackapi.com/picker/1.9.4/picker.js

if (a.transformed) {
  o = r
    .dispatch("resizeImageMaybe", a.transformed)
    // ...
    .then(function(t) {
      if (!r.getters.files[a.uuid]) {
        return Promise.resolve();
      }
      if (t.toString() === "[object Blob]") {
        t = new File([t], t.name);
      }
      return e.upload(t, s, u, l);
    });
}

[billouboq]

Seems like a polyfill exist for this web API : https://www.npmjs.com/package/@tanker/file-ponyfill