I am using to take a file I've uploaded and resize it before I send it along a backend API that does some analysis.

Right now I'm getting the error:

TypeError: Failed to construct 'File': The object must have a callable @@iterator property

My understanding is that the file constructor can take a blob as the first argument and that the resizer function is providing that blob. So, I'm not sure where I'm short circuiting. I do know my input is good as I have another resizer called in the same ponent that is working (it provides a base64 encoded version of the resized file that I display as the original image before processing)

The relevant code is:

uploadImageHandler = (event) => {
    const tempImage = event.target.files[0];
    const imageType = tempImage.type;

    Resizer.imageFileResizer(
      tempImage,
      300,
      300,
      imageType,
      100,
      0,
      (uri) => {
        const file = new File(uri, tempImage.name);
      },
      'blob',
    );
};

When I do a console.log on uri just before I try and do the new File it returns

Blob {size: 127332, type: "image/image/jpeg"}
size: 127332
type: "image/image/jpeg"
__proto__: Blob
arrayBuffer: ƒ arrayBuffer()
size: (...)
slice: ƒ slice()
stream: ƒ stream()
text: ƒ text()
type: (...)
constructor: ƒ Blob()
Symbol(Symbol.toStringTag): "Blob"
get size: ƒ size()
get type: ƒ type()
__proto__: Object

I am using https://www.npmjs./package/react-image-file-resizer to take a file I've uploaded and resize it before I send it along a backend API that does some analysis.

Right now I'm getting the error:

TypeError: Failed to construct 'File': The object must have a callable @@iterator property

My understanding is that the file constructor can take a blob as the first argument and that the resizer function is providing that blob. So, I'm not sure where I'm short circuiting. I do know my input is good as I have another resizer called in the same ponent that is working (it provides a base64 encoded version of the resized file that I display as the original image before processing)

The relevant code is:

uploadImageHandler = (event) => {
    const tempImage = event.target.files[0];
    const imageType = tempImage.type;

    Resizer.imageFileResizer(
      tempImage,
      300,
      300,
      imageType,
      100,
      0,
      (uri) => {
        const file = new File(uri, tempImage.name);
      },
      'blob',
    );
};

When I do a console.log on uri just before I try and do the new File it returns

Blob {size: 127332, type: "image/image/jpeg"}
size: 127332
type: "image/image/jpeg"
__proto__: Blob
arrayBuffer: ƒ arrayBuffer()
size: (...)
slice: ƒ slice()
stream: ƒ stream()
text: ƒ text()
type: (...)
constructor: ƒ Blob()
Symbol(Symbol.toStringTag): "Blob"
get size: ƒ size()
get type: ƒ type()
__proto__: Object

• javascript
• reactjs
• image

2 Answers 2

My understanding is that the file constructor can take a blob as the first argument and that the resizer function is providing that blob.

This is almost correct :). If we read the specification carefully:

Syntax

new File(bits, name[, options]);

bits

An Array !!! of ArrayBuffer, ArrayBufferView, Blob, ...

So I think if you change your code from:

...
(uri) => {
   const file = new File(uri, tempImage.name);
...

to:

...
(uri) => {
   const file = new File([uri], tempImage.name);
...

it should work without the problem you described.

This is just my guess - I did not test it!

In version 0.4.2, you can give "file" property to outputType. For details: read the documentation