I am using React-Dropzone npm to use a nicely styled drag and drop out of the box file uploader. I got stuck on the fact that React-Dropzone as of version 8.2.0 didn't include the paths to the file, e.g. shortened it with just the image name. They do however, provide a Blob Url. I can't figure out how to convert a Blob-URL to a Base64 string and then send that to Cloudinary.

I am using React-Dropzone npm to use a nicely styled drag and drop out of the box file uploader. I got stuck on the fact that React-Dropzone as of version 8.2.0 didn't include the paths to the file, e.g. shortened it with just the image name. They do however, provide a Blob Url. I can't figure out how to convert a Blob-URL to a Base64 string and then send that to Cloudinary.

• javascript
• reactjs
• cloudinary

2 Answers 2

Another way can be:

const url = 'blob:http://uri';

const blobToBase64 = (url) => {
  return new Promise((resolve, _) => {
    // do a request to the blob uri
    const response = await fetch(url);

    // response has a method called .blob() to get the blob file
    const blob = await response.blob();

    // instantiate a file reader
    const fileReader = new FileReader();

    // read the file
    fileReader.readAsDataURL(blob);

    fileReader.onloadend = function(){
      resolve(fileReader.result); // Here is the base64 string
    }
  });
};

// now you can get the 
blobToBase64(url)
  .then(base64String => {
    console.log(base64String) // i.e: data:image/jpeg;base64,/9j/4AAQSkZJ..
  });

// or with await/async
const file = await blobToBase64(url);
console.log(file) // i.e: data:image/jpeg;base64,/9j/4AAQSkZJ..

I've figured it out:

After a few hours, and some nice people posting on StackOverflow I have pieced it together.

const getBlobData = (file) => {
    axios({
      method: "get",
      url: file, // blob url eg. blob:http://127.0.0.1:8000/e89c5d87-a634-4540-974c-30dc476825cc
      responseType: "blob",
    }).then(function (response) {
      var reader = new FileReader();
      reader.readAsDataURL(response.data);
      reader.onloadend = function () {
        var base64data = reader.result;
        const formData = new FormData();
        formData.append("file", base64data);
        formData.append("api_key", YOUR_API_KEY);
        // replace this with your upload preset name
        formData.append("upload_preset", YOUR_PRESET_NAME);//via cloudinary
        axios({
          method: "POST",
          url: "https://api.cloudinary./v1_1/YOUR_CLOUD_NAME/upload",
          data: formData,
        })
          .then((res) => {
            const imageURL = res.data.url;
            //YOU CAN SET_STATE HOWEVER YOU WOULD LIKE HERE.
          })
          .catch((err) => {
            console.log(err);
          });
      };
    });
  };