Multiple File Uploads with Meteor?

help
1

Hey. I’m writing an Android App that can Upload Files (images) to a S3 Server with Slingshot. I got it to work on mobile but now I hit a Brick Wall. I can’t figure out how to upload multiple files at once.

I use <input id="upload" type="file" multiple="true"> and it works on a normal browser, but on mobile this lets me only select one file.

I already researched this problem and the only information I can find is that all Android Versions <5.x don’t support multiple=“true” on the input tag.

Anyone have an Idea/Package/Workaround/Fix?

2

Bump. I hope this is not impossible. I love Meteor but this is way to difficult as it should be

3

Sounds like you’ll need a Cordova plugin for that - the problem here could be that you aren’t allowed to access local files from your app, because it is binded to “meteor.local”. So a plugin that provides you the paths to the selected files won’t work.

4

I found a way. I’m using https://github.com/wymsee/cordova-imagePicker // it gives me the paths to the file and it took me some time to figure out how to make those URI’s to actual blobs that can be used by something like Slingshot. But I do something like this, even thought it’s probably ugly:

imagePick = function() {
window.imagePicker.getPictures(
function(results) {
var blobArray = [];
for (var i = 0; i < results.length; i++) {
console.log(results[i]);
console.log(“test sequence”);
if (window.File && window.FileReader && window.FileList && window.Blob) {
} else {
console.log(‘The File APIs are not fully supported in this browser.’);
}
var filePathFull = results[i];
var fileName = filePathFull.split(“cache/”)[1];
readFromFile(fileName, function(blob) {
console.log(blob);
blobArray.push(blob);
if (blobArray.length == i) {
console.log("----- upload simulation ----- file: " + blob.name);
console.log(blob.orderNo);
multiUpload(blobArray)
}
});
}
}, function (error) {
console.log('Error: ’ + error);
}

);

};

function readFromFile(fileName, callback) {
var pathToFile = cordova.file.applicationStorageDirectory + “cache/” + fileName;
window.resolveLocalFileSystemURL(pathToFile, function (fileEntry) {
fileEntry.file(function (file) {
var reader = new FileReader();

    reader.onloadend = function (e) {
      console.log("reader.onloadened");
      //alert(JSON.stringify(this.result, null, 4));
      var byteString = this.result.split(',')[1];
      //alert(JSON.stringify(byteString, null, 4));
      b64toBlob(byteString, fileName, null, null, callback);
    };
    reader.readAsDataURL(file);
  }, errorHandler.bind(null, fileName));
}, errorHandler.bind(null, fileName));

}

errorHandler = function (fileName, e) {
var msg = ‘’;

switch (e.code) {
  case FileError.QUOTA_EXCEEDED_ERR:
    msg = 'Storage quota exceeded';
    break;
  case FileError.NOT_FOUND_ERR:
    msg = 'File not found';
    break;
  case FileError.SECURITY_ERR:
    msg = 'Security error';
    break;
  case FileError.INVALID_MODIFICATION_ERR:
    msg = 'Invalid modification';
    break;
  case FileError.INVALID_STATE_ERR:
    msg = 'Invalid state';
    break;
  default:
    msg = 'Unknown error';
    break;
}
console.log('Error (' + fileName + '): ' + msg);

};

b64toBlob = function(b64Data, fileName, contentType, sliceSize, callback) {
console.log(“window.resolveLocalFileSystemURL”);
contentType = contentType || ‘image/jpeg’;
sliceSize = sliceSize || 512;

var byteCharacters = atob(b64Data);
var byteArrays = [];

for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
  var slice = byteCharacters.slice(offset, offset + sliceSize);

  var byteNumbers = new Array(slice.length);
  for (var i = 0; i < slice.length; i++) {
    byteNumbers[i] = slice.charCodeAt(i);
  }

  var byteArray = new Uint8Array(byteNumbers);

  byteArrays.push(byteArray);
}

var blob = new Blob(byteArrays, {type: contentType});
blob.orderNo = UserLastOrder;
blob.name = fileName;
console.log("blobbed");
callback(blob);
return blob;

};

I know that some lines like the last return blob; at the end are uneccesary but that is the code that is working right now but i haven’t cleaned it up so I post how it’s working for me

5

Hey,

I try to do the same thing and your code helps can you please provide the multiUpload(blobArray) function ? I’m stuck at this part.

Thnaks

6

UserLastOrder is not defined

7

vsivsi can handle multiple files upload

try his example

https://github.com/crapthings/meteor-cordova-file-upload