I can't get correctly blob file

[AliYmn]

Blob output is not correct for upload system.

To Reproduce 1-) Upload image file. 2-) I can't get correct blob output.

Expected behavior Blob output should be like this;

Screenshots blob output not correct.

Desktop (please complete the following information):

• OS: Ubuntu
• Browser : Chrome
• Version: Version 79.0.3945.130 (Official Build) (64-bit)

[kennyma603]

same issue. i wanted to first select image using react-dropzone, then pass the image file to react-image-file-resizer to resize it before it starts upload.

wondering if you figured it out? Thanks.

[kennyma603]

ok, figured it out, all you need is to convert blob to file: https://stackoverflow.com/questions/27159179/how-to-convert-blob-to-file-in-javascript

[rikinshah23]

I have tried this but its shows me blank result. What am I doing wrong?

var imageURI = '';
const resizedImg = await Resizer.imageFileResizer(
  fileList.fileList[0].originFileObj,
  300,
  300,
  'JPEG',
  100,
  0,
  uri  => {
    imageURI = uri 
    console.log(uri )
  },
  'blob'
);
console.log(resizedImg)
console.log(imageURI)

how to get result in imageURI variable and reuse it later ?

[kennyma603]

@rikinshah23 I believe when you log out console.log(uri ) it should give you correct uri?

if you want to use it in imageURI, use useState to store it, once imageURI get updated your component would be rerendered.

[sandunisuru]

Try it like this. You can get the file using Promise

const getResizedImage = (file) => new Promise((resolve) => { ImageResizerService.imageFileResizer(file, 2400, 2400, 'JPEG', 80, 0, blob => { resolve(blob); }, 'blob' ); })

Then access the file using this, etResizedImage(file).then(mediaFile => { console.log(mediaFile); }).catch(e => { fconsole.log(e.message); })