Get upload progress for Cloudinary Unsigned Upload

Question

I'm doing an unsigned upload from the browser straight to Cloudinary and am trying to display progress for large uploads.

I'm using the cloudinary node library.

Is there any way to get the upload progress using the cloudinary library in the browser, or is there another way to upload directly to cloudinary that would give me progress?

Answer 1

I ended up solving this by uploading through a XHR request rather than relying on cloudinary's library:

    const formData = new FormData();
    formData.append('upload_preset', CLOUDINARY_MEDIA_PRESET);
    formData.append("file", file); 

    const xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function(e) {
      if(xhr.readyState !== 4) {
        return;
      }
      if(xhr.status !== 200) {
        // Handle request errors
        return;
      }
      let res = JSON.parse(xhr.responseText);
      if(!res || !res.public_id) {
        // Handle cloudinary errors
        return;
      }
      // Handle success
    };

    xhr.upload.addEventListener("progress", e => {
      // Handle progress with Math.round((e.loaded * 100.0) / e.total)
    });

    xhr.open("post", `https://api.cloudinary.com/v1_1/${CLOUDINARY_CLOUD}/auto/upload`);
    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

    xhr.send(formData);