Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
DevCraftsmanShubham opened this issue Dec 10, 2021 · 7 comments
Open

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

DevCraftsmanShubham opened this issue Dec 10, 2021 · 7 comments

Comments

@DevCraftsmanShubham
Copy link

DevCraftsmanShubham commented Dec 10, 2021

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'
    );
  });
@akai-rothschild
Copy link

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

@DevCraftsmanShubham
Copy link
Author

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
Copy link

kaloraat commented Jul 7, 2022

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
Copy link

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
Copy link

lrphael commented Aug 1, 2022

Same here

@lesrpo
Copy link

lesrpo commented Feb 28, 2023

same here 2023 :(

@lesrpo
Copy link

lesrpo commented Feb 28, 2023

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"
        );
    });`

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants