将图像文件转换为Blob

Question

I have the following code:

var file = document.getElementById("image1");
var filename = file.files[0].name;
//console.log("Archivo: " + filename);
var storageRef = firebase.storage().ref();
var ref = storageRef.child('imagenes/'+filename);

var reader = new FileReader();
var rawData;

reader.onload = function(e) {
    rawData = reader.result;   
}

reader.readAsBinaryString(file);

ref.put(rawData).then(function(snapshot){

});

File -> get the data file input (an image).

And I want convert this file to blob in the moment that the form is send, to upload to firebase storage the image in the format BLOB, how I can do this? I was used the fileReader, but always return the same error:

'readAsBinaryString' on 'FileReader': parameter 1 is not of type 'Blob'.

How do convert the file image to a blob?

Answer 1

You can't simply set rawData inside the onload function like you're doing. By the time ref.put() is run, the onload function will not have been called, so rawData will ALWAYS be undefined. ref.put() takes in the file as its parameter, so simply use ref.put(file.files[0]) (No reader required):

var file = document.getElementById("image1");
var filename = file.files[0].name;
//console.log("Archivo: " + filename);
var storageRef = firebase.storage().ref();
var ref = storageRef.child('imagenes/'+filename);

ref.put(file.files[0]).then(...);

See also the very common: How do I return the response from an asynchronous call?