onurzorluer / react-image-file-resizer

Resize Local Images with React 🌄 🌅
MIT License
313 stars 41 forks source link

FileReader': parameter 1 is not of type 'Blob'. #64

Open DevCraftsmanShubham opened 2 years ago

DevCraftsmanShubham commented 2 years ago

I was trying to get the local image and tried to resize it, but getting this error.. Unhandled Rejection (TypeError): Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

I have imported the file import sample from './assets/sample.jpg'; and passed it into this method :


const resizeFile = (file) =>
  new Promise((resolve) => {
    Resizer.imageFileResizer(
      file,
      300,
      300,
      'JPEG',
      100,
      0,
      (uri) => {
        // resolve(uri);
      },
      'base64'
    );
  });
nduytung commented 2 years ago

I have the same issue. Did u figured out how to fix it? i'd be appreciate it

DevCraftsmanShubham commented 2 years ago

I have the same issue. Did u figured out how to fix it? i'd be appreciate it

I was unable to do this in the frontend, so I moved the image processing to the backend side

kaloraat commented 2 years ago

same issue here. I've been using this package for long time, never had this issue:

Screen Shot 2022-07-07 at 4 37 26 PM

PavelLaptev commented 2 years ago

Same here. I create an image like this

const createImage = (imageData: any) => {
    const image = new Image();
    image.src = `url(data:image/jpeg;base64,${imageData})`;
    return image;
};

and then pass it into Resizer

const resizeFile = file =>
    new Promise(resolve => {
        Resizer.imageFileResizer(
            file,
            300,
            300,
            'JPEG',
            100,
            0,
            uri => {
                resolve(uri);
            },
            'base64'
        );
    });
lrphael commented 1 year ago

Same here

lesrpo commented 1 year ago

same here 2023 :(

lesrpo commented 1 year ago

I did a walk around, I was getting an image URL from the camera, I got the image itself like this

async getImage(path){ const response = await fetch(path); const blob = await response.blob(); return blob; };

then I passed it to the resizer and voila

FMSService.getImage(url).then((image: any) => { onResizeImage(image).then((resizedFile: any)=>{ prepareFormData(resizedFile); //to send to the server }); });

I am also using cropperjs, so first crop, then resize.

the other functions

`const onResizeImage = async (imageFile: any) => { try { const file = imageFile; const image = await resizeFile(file); return image; } catch (err) { console.log(err); } }

const resizeFile = (file: any) =>
    new Promise((resolve) => {
        Resizer.imageFileResizer(
            file,
            700,
            700,
            "JPEG",
            100,
            0,
            (uri) => {
                resolve(uri);
            },
            "blob"
        );
    });`