Uploading a base64 encoded image (as uri) from React Native

Question

I am going thorough the React Native tutorial on expo.dev and I am stuck on "Handling platform differences".

For the web implementation, the tutorial uses some crufty old npm library 'anonymous-files' that hasn't been maintained in years, and it looks to me like the anonymous file sharing service it points to is no more.

I am trying to replace the library call with straightforward XMLHttpRequest to api.anonymousfiles.io or api.anonfiles.com/upload. When I curl to these, everything works great, but when I try and upload my image object nothing works. So now on the the details:

1. The native stuff works fine, this is specific to the web handler.
2. I am grabbing an image using ImagePicker.launchImageLibraryAsync()
3. I setup XMLHttpRequest properly with a new object, some event handlers (so I can debug), a .open with the POST and URL, I have tried with headers and without. It should not matter as it is supposed to default to form-multipart.
4. I send. I have tried both creating a new formData object and appending my object with key 'file' and just sending the object. Neither works. With formData I get an undefined error, without it I get nothing. Execution just stops.
5. FYI I am developing and testing in snack.expo.dev

async function uploadImageAsync(uri) {
    alert(uri); 
    //alert displays: data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAA...
    let formData = new FormData();
    formData.append("file", uri);
    const xhr = new XMLHttpRequest();

    xhr.upload.onprogress = function(event) {
      alert(`Uploaded ${event.loaded} of ${event.total} bytes`);
    };
    xhr.upload.onload = function() {
      alert(`Upload finished successfully.`);
    };
    xhr.upload.onerror = function() {
      alert(`Error during the upload: ${xhr.status} / ${xhr.statusText}`);
    };

    xhr.open('POST', 'https://api.anonfiles.com/upload',true);
    xhr.responseType = 'text'
    xhr.send(formData);
    alert(`done: ${xhr.statusText}`);
    
  return;
}

I have looked at dozens of stackoverflow questions and other sources too. Nothing I have tried from those sources works. None of them are dealing specifically with the return of ImagePicker.launchImageLibraryAsync().

It is me? Or is there something wrong here? Is my only option to convert to a blob?, I was trying to avoid that because I was hoping for a solution terse enough to use in the tutorial and then create a PR to update it (the tutorial source is maintained in Github). I feel a whole new function to convert to blob would be a little too much for beginners.

Answer 1

You can not send Base64 as uri. you need to make a blob first. If you are using some image picker you can use this code to append image to form data

let formdata = new FormData();
formdata.append('Name of the key from backend', {
    uri: 'file path of image',
    type: 'image type e.g jpeg/png etc',
    name: 'image name',
    });

After that send request like this

let axiosConfig = {headers:{}}
axios.post(URL, formdata, axiosConfig)