large file upload

[cimenta]

Hi
would your example work for large file upload? For example 3GB file?
Thank you
Radek

[metadaddy]

Hi Radek - this sample will work for files up to 5 GB, uploaded in a single API call. I’ll look at adding code to do multipart uploads.

[cimenta]

I am learning how upload works .... so I have these questions

• how would 5GB file handle a browser, especially in terms of memory?
• what would happen if a user selects 10GB file?
• what would happen if the upload / internet connection is interupted for a while?
• are you planing to create a sample using resumable.js?
  Thank you

[Abhishek-Gawade-programmer]

Hey @metadaddy this is code from upload-file-to-backblaze-b2-from-browser-example by Matt.

i am facing a memory problem and browser crashes

const getUploadDetails = async () => {
  return new Promise((resolve, _) => {
    var data = null;

    var xhr = new XMLHttpRequest();
    xhr.withCredentials = false;

    xhr.addEventListener("readystatechange", function () {
      if (this.readyState === this.DONE) {
        console.info(`Get upload details response: `, this.responseText);
        const uploadDetails = JSON.parse(this.responseText);
        resolve(uploadDetails);
      }
    });

    xhr.open("GET", "{% url 'core:signed-url' %}");

    xhr.send(data);
  });
};

document.addEventListener("DOMContentLoaded", () => {
  const uploadFileInput = document.getElementById("id_upload_file");
  const uploadFileButton = document.getElementById("submitBtn");

  // When upload button clicked, get upload details and then perform file
  // upload with AJAX.
  uploadFileButton.addEventListener("click", async () => {
    const uploadDetails = await getUploadDetails();

    const file = uploadFileInput.files[0];
    const reader = new FileReader();
    console.log("file", file, reader);

    reader.onload = function () {
      const hash = CryptoJS.SHA1(CryptoJS.enc.Latin1.parse(reader.result));
      // Data hashed. Now perform upload.
      const xhr = new XMLHttpRequest();
      progress_bar.classList.remove("not-visible");
      xhr.upload.addEventListener("progress", progressHandler, false);

      xhr.addEventListener("load", function () {
        // Code to execute once the B2 API request finishes. It could have failed. It could
        // have succeeded. We'll find out using the checks in the code here.

        /**
         * @type {string}
         */
        let msg;

        if (xhr.status >= 200 && xhr.status < 300) {
          // Display the success element
          msg = "2xx response from B2 API. Success.";
          // print the ressponse json
          console.log("rresponse.jspn", JSON.parse(xhr.responseText));

          saveUploadFileDetails(JSON.parse(xhr.responseText));

          //console.log(`Upload file result: ${msg}`);
        } else if (xhr.status >= 400 && xhr.status < 500) {
          msg =
            "4xx error from B2 API. See other console log messages and requests in network tab for details.";
        } else if (xhr.status >= 500) {
          msg =
            "5xx error from B2 API. See other console log messages and requests in network tab for details.";
        } else {
          msg =
            "Unknown error. See other console log messages and requests in network tab for details.";
        }

        // Whether it succeeded or failed, log a message for the example runner.
        console.log(`Upload file result: ${msg}`);
      });

      xhr.open("POST", uploadDetails.uploadUrl);

      xhr.setRequestHeader("Content-Type", file.type);
      xhr.setRequestHeader("Authorization", uploadDetails.authToken);
      xhr.setRequestHeader(
        "X-Bz-File-Name",
        encodeURIComponent(uploadFileInput.files[0].name)
      );
      xhr.setRequestHeader("X-Bz-Content-Sha1", hash);

      const fileToSend = uploadFileInput.files[0];

      xhr.send(fileToSend);
    };
    reader.readAsBinaryString(file);
  });
});
function progressHandler(event) {
  var percentProgress = Math.round((event.loaded / event.total) * 100);
  console.log(percentProgress);
  progress_bar.innerHTML = `<div class="progress-bar progress-bar-striped bg-success" 
                    role="progressbar" style="width: ${percentProgress}%" aria-valuenow="${percentProgress}" aria-valuemin="0" 
                    aria-valuemax="100"></div>`;
}

[metadaddy]

@Abhishek-Gawade-programmer The code in this repo is quite different. Please file your issue at https://github.com/mattwelke/upload-file-to-backblaze-b2-from-browser-example

[Abhishek-Gawade-programmer]

Thanks @metadaddy I have reported issue on that repo too

@metadaddy is there a way to add progress listener to fetch API

[metadaddy]

@Abhishek-Gawade-programmer I have no idea. Have you tried a Google search?

[metadaddy]

Hi @cimenta:

how would 5GB file handle a browser, especially in terms of memory?

The file must be completely read into memory in order to calculate the SHA-1 digest.

what would happen if a user selects 10GB file?

Assuming the client machine has enough memory to read the file and start the upload, B2 would respond with a 400 HTTP response containing an error message stating that the file is too big.

what would happen if the upload / internet connection is interupted for a while?

The upload would fail and an error would be displayed.

are you planing to create a sample using resumable.js?

No - resumable.js uses its own scheme for splitting and uploading files, so this would not be possible.