javascriptimagefilegoogle-oauthblob

How to convert an image url to File object from Google oAuth response?

In my React project I have a google oAuth API which I'm retrieving the google image url from the response:

const userInfoResponse = await axios.get('https://www.googleapis.com/oauth2/v3/userinfo', {
   headers: { Authorization: `Bearer ${googleResponse.access_token}` }
});

const google_image = userInfoResponse.data.picture;
console.log(google_image);
//https://lh3.googleusercontent.com/a/ACg8ocKjThtaGf5USLuL2LBMBuYxfDG0gDdM-RLA_I__UvNI3p_2Hlk=s96-c

Now I want to convert this URL to a File Object. So i tried to first convert this to a blob and then use the blob to construct a File but is not working as expected!

const googleImageResponse = await fetch(google_image);
const blob = await googleImageResponse.blob();
const googleImageFile = new File([blob], "profileAvatar.png");
const formData = new FormData();
formData.append('profile', googleImageFile);
formData.append('record', userResponse.data.id);

But in the above code the blob type is text/html and not an image. So when I'm adding the File to the FormData is failing to render it because the image is not of image type.

Required Solution:

I want to be able to:

Solution

  • Add the MIME type explicitly by using the options parameter in the File constructor.

    const googleImageFile = new File([blob], 'profileAvatar.png', {
  type: blob.type || 'image/png'
});