Uploaded jpg from React Native iOS app to Azure Blob Storage will not open but contains base64 data

I’m trying to create a screen on a React Native mobile app that allows a user to upload and crop a profile pic, and then upload to Azure blob storage.

I struggled with this as lots of sites pointed to react-native-fs but when I tried to implement that I always got an error so I gave up.

I can get the file to upload to Azure Blob Storage. If I uploaded a text file it works perfectly and is readable. When I tried to do this with a jpg the file is uploaded but it is not readable. However, if I change the extension to .txt and open it in notepad I can copy the content and paste it into a base64 to image conversion website then it works perfectly.

I feel like I’m so close but can’t make the final hurdle. Here is the code …

  const saveFile = async () => {
    const currentDate = new Date();
    const dateString = currentDate.toUTCString();

    // read the contents of the selectedImage file
    const response = await fetch(selectedImage);
    const fileData = await response.blob();
    const base64Data = await new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(fileData);
      // reader.onload = () => resolve(reader.result.split(",")[1]);
      reader.onload = () =>
        resolve(`data:image/jpeg;base64,${reader.result.split(",")[1]}`);

      reader.onerror = (error) => reject(error);
    });

    var config = {
      method: "put",
      maxBodyLength: Infinity,
      url: "https://clubmanpics.blob.core.windows.net/playerpics/newfile13.jpg",
      headers: {
        "x-ms-version": "2017-11-09",
        "x-ms-date": dateString,
        "x-ms-blob-type": "BlockBlob",
        Authorization: `Bearer ${token}`,
        "Content-Type": "image/jpeg",
        "Content-Length": base64Data.length,
        "Content-Encoding": "base64",
      },
      data: Buffer.from(base64Data, "base64"),
    };

    axios(config)
      .then(function (response) {
        console.log(JSON.stringify(response.data));
      })
      .catch(function (error) {
        console.log(error);
      });

I’ve tried the code above with and without the “Content-Encoding”: “base64” string but no luck.