Upload PDF to Firebase Storage - Uncaught Error: This browser doesn't seem to support creating Blobs

Question

Attempting to upload both image file and pdf file to Firebase storage, the image upload works perfectly, while the pdf file upload with very similar code return

Uncaught Error: This browser doesn't seem to support creating Blobs.

NodeJS, ReactJS

Please see below for the code

// post resume to firebase
function PostResumeToFirebase(id, resume){
  console.log("inside PostResumeToFirebase -------")
  resume.resume_files.forEach((data) => {
    console.log("file inside post resume", data)
    const file = data
    var storageRef = firebase.storage().ref()

    // Upload file and metadata to the object
    const uploadTask = storageRef.child('applicants/resume/' + file.name).put(file);

    // Listen to state changes, errors, and completion of the upload.
    uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED,
      function(snapshot) {

        // Get task progress, inlcuding number of bytes uploaded and the total number of bytes to be uploaded

        var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
        console.log('Upload is ' + progress + '% done');

        switch (snapshot.state) {
          case firebase.storage.TaskEvent.PAUSED: // or 'paused'
            console.log('Upload is paused');
            break;
          case firebase.storage.TaskState.RUNNING: // or 'running'
            console.log("Upload is running");
            break;
        }

      }, function(error){
        switch (error.code) {
          case 'storage/unauthorized':
            // User doesn't have permission to access the object
            console.log("storage/unauthorized", error)
            break;
          case 'storage/canceled':
            // User canceled the upload
            console.log("storage/canceled", error)
            break;
          case 'storage/unknown':
            // Unknown error occurred, inspect error.serverResponse
            console.log("storage/unknown", error)
            break;
        }

      }, function(){
        // Upload completed successfully, now we can get the download URL
        var downloadURL = uploadTask.snapshot.downloadURL;
        console.log("link to image", downloadURL)

        let resumeData = {
          user_id: id,
          resume_pdf: downloadURL
        }

      // PostPdf(resumeData)
    })

  })


}

function PostPdf(resumeData) {
  console.log("line 937", resumeData)
  $.post('https://atlas-cv-database.herokuapp.com/api/applicants/upload_pdf', resumeData)
    .done((data) => {
      console.log("yay!!! resume posted ---", data)
    })
    .error((error) => {
      console.log("noooooooooooooo")
    })

}

Answer 1

I've encountered the same issue in the last 24 hours, but in Ionic v2 / Angular 2 / TypeScript.

this.dbsref = firebase.storage().ref();

// ... other code ...

this.dbsref.child(picPreviewName).put(byteArray).then(() => {
  console.log("Success!");
});

Uncaught Error: This browser doesn't seem to support creating Blobs

I can't even upload an image. If I find the resolution I'll be sure to update here.

Update! Yes, I've found the issue and fixed it. There are three files in node_modules/firebase/, they are firebase-storage.js, firebase.js, and storage.js. They are minified JavaScript. In all of them, search for n(l.Blob) and replace it with n(Blob). For some reason, the l object doesn't have the Blob property. Blob is global scope anyway so it can just check there. This is a filthy hack but it seems to be a Firebase bug.

Answer 2

I'm having this same issue on [email protected], I've downgraded to [email protected] and everything is fine now.