Upload multiple image blobs to firebase 3 from ionic 1

Question

I can upload a single image converted to a blob to firebase 3 successfully. However, when I try to upload multiple images to firebase 3 from my ionic 1 app, it fails.

The console logs that the data was successfully uploaded. I cannot see it in the firebase storage UI. I only see the first image I selected.

This is the code that gets the images:

  $scope.getImages = function () {
  var options = {
    maximumImagesCount: 10,
    width: 1000,
    height: 1000,
    quality: 100
  };

  $cordovaImagePicker.getPictures(options)
    .then(function (results) {
      for (var i = 0; i < results.length; i++) {
        $scope.selectedImages.push(results[i]);
        var fileName = results[i].replace(/^.*[\\\/]/, '');

        // the image storage path is different on android
        var path = '';
        if ($ionicPlatform.is("android")) {
          path = cordova.file.cacheDirectory;
        }
        else {
          path = cordova.file.tempDirectory;
        } // end of android image rectification 

        $cordovaFile.readAsArrayBuffer(path, fileName)
          .then(function (realImage) {
            var imageBlob = new Blob([realImage], { type: "image/jpeg" });

            imgUpload(imageBlob, fileName)

          })
      }

    }, function (error) {
      // error getting photos
      console.log(error.name);
    })

Below is the code for firebase service

function imgUpload(_imgBlob, _filename) {

  var uploadsMetadata = {
    cacheControl: "max-age=" + (60 * 60 * 24 * 365) // One year of seconds
  };

  //create the storage reference and use it to access
  var storeRef = firebase.storage().ref();



  var uploadTask = storeRef.child('images/' + _filename).put(_imgBlob, uploadsMetadata);

  return new Promise(function (resolve, reject) {
    uploadTask.on('state_changed', function (snap) {
      console.log('Progress: ', snap.bytesTransferred, '/', snap.totalBytes, ' bytes');
    }, function (err) {
      console.log('upload error', err);
      reject(err);
    }, function () {
      var metadata = uploadTask.snapshot.metadata;
      var key = metadata.md5Hash.replace(/\//g, ':');
      var fileRecord = {
        downloadURL: uploadTask.snapshot.downloadURL,
        key: key,
        metadata: {
          fullPath: metadata.fullPath,
          md5Hash: metadata.md5Hash,
          name: metadata.name
        }
      };

      // uploadsRef.child(key).set(fileRecord).then(resolve, reject);
    });
  }); // end of Promise


  // return snapshot;
}  // end of function imgUpload

Answer 1

[Edited 2/15/2017]

Padrian, without knowing what your specific error(s) were in the code above I can only assume that your issue(s) are the same as what was dealing with, namely that the metadata.md5Hash was failing since the metadata wasn't defined. My code and your code are nearly identical barring the UI framework differences.

My first refactoring to remove the error was to removed the listening on events and went with just having a callback on the .put() like so:

storageRef.child(uploadFile.name).put(uploadFile).then(cb(snap)).catch(errCB(err))

I further refactored my code and just as mysteriously as there was an issue, there was no longer an issue. Below is my full code for processing the upload file. I placed the code inside an async.queue so I could limit the file uploads to 4 files at a time.

const q = async.queue(function (file, callback) {
  let reader = new window.FileReader()

  reader.onload = function (e) {
    const tags = ExifReader.load(e.target.result)
    if (tags['Orientation'].description === 'left-bottom') {
      file.rotation = 'rotate(-90deg)'
    }
  }

  reader.readAsArrayBuffer(file.file.slice(0, 128 * 1024))

  let uploadTask = storageRef.child(file.file.name).put(file.file, uploadsMetadata)
  file.uploadSuccess = false
  file.uploadError = false
  file.active = 'active'

  uploadTask.on('state_changed',
    function (snap) {
      file.progress = snap.bytesTransferred / snap.totalBytes * 100
    },
    function (err) {
      file.uploadError = true
      file.errorMessage = err
      callback(err)
    },
    function () {
      let metadata = uploadTask.snapshot.metadata
      let key = metadata.md5Hash.replace(/\//g, ':')
      let pendingInventoryRecord = {
        downloadURL: uploadTask.snapshot.downloadURL,
        key: key,
        metadata: {
          fullPath: metadata.fullPath,
          md5Hash: metadata.md5Hash,
          name: metadata.name
        },
        style: file.invStyle,
        size: file.invSize,
        count: file.invCount,
        rotate: file.rotation || ''
      }
      uploadRef.child(key).set(pendingInventoryRecord)
      .then(function () {
        pendingInventoryCountRef.child('counter').transaction(function (currentVal) {
          return (currentVal || 0) + 1
        })

        callback(null, file)
      })
      .catch(function (err) { console.log(err) })
    })
}, 4)