Filepicker IE11 bug: cannot upload cropped photo

[schutterp]

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

[hliangz]

@schutterp hi, did you find a solution for this issue? I have the same problem

[schutterp]

I'm afraid not @hliangz. I simply avoided upgrading the library because the older version still works.

If you explore solutions, please share your results!

[hliangz]

@schutterp thank you for letting me know. I was thinking to disable crop when i detect IE11. but it is not good. do you know which version works fine? I can downgrade. thanks again

[schutterp]

😬 1.14.6

[hliangz]

@schutterp thank you for letting me know. I tried 2.xx, it is working too.

@pcholuj sorry to bother you, would you please help us to resolve this issue, so that we can use the v3? Thank you

[JoshReedSchramm]

Has anyone revisited this? We're seeing the same issue in 3.X.X version of the library.

[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