How to catch camera load event on Firefox Android?

Question

I am unable to catch the load event when my user select a picture directly from camera within Firefox Android.

I have an image input field that triggers this function:

const selectPicture = async () => {
    if (uploadPhotoRef.current?.files) {
      const reader = new FileReader();
      const file = uploadPhotoRef.current?.files[0];
      reader.readAsDataURL(file);

      reader.onloadend = async () => {
          let imageDataUrl = reader.result;
          const image = await createImage(imageDataUrl);
      }
   }
}         

When debugging, imageDataUrl is a valid base64 string, then I try to load it on a HTMLImageElement (I need this to do canvas operations) but the load event is not triggered.

export const createImage = (url: string) =>
  new Promise<HTMLImageElement>((resolve, reject) => {
    const image = new Image();
    image.addEventListener('load', () => {
      // PROBLEM IS HERE, THIS FUNCTION IS NEVER ENTERED
      resolve(image);
    });
    image.addEventListener('error', error => reject(error));
    image.setAttribute('crossOrigin', 'anonymous');
    image.src = url;
  });

Is it a bug from Firefox Android or am I doing something wrong?

---

This code does work for:

• Chrome Android
• Firefox Desktop
• Firefox Android when selecting the file from the File Explorer (instead of taking a picture when clicking on the input field).

Answer 1

I solved the problem by following this StackOverflow answer and by creating blob.

The base64 string would not work in firefox.