How to convert Blob URL to Base64 string and retrieve an Image URL using Cloudinary Client-Side? Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of How to convert Blob URL to Base64 string and retrieve an Image URL using Cloudinary Client-Side? without wasting too much if your time.

The question is published on by Tutorial Guruji team.

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.

Answer

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.com/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);
          });
      };
    });
  };
We are here to answer your question about How to convert Blob URL to Base64 string and retrieve an Image URL using Cloudinary Client-Side? - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji