Kleber Mota Kleber Mota -4 years ago 86
Javascript Question

Unable to read image with FileReader (see Update 2)

I am trying read a image file selected by a

input[type=file]
field with this javascript code:

var reader = new FileReader();
var blob;
reader.onloadend = function (e) {
blob = e.target.result;
}
reader.readAsDataURL(this.files[0]);


but when I run the code in the browser, I am getting this error:

TypeError: Argument 1 of FileReader.readAsDataURL is not an object.


Anyone can see what's wrong here?

UPDATE

this is the code where this snippet is included. SHould given more context about what's causing the error, I hope:

$('#submit').on('click', function(){
var $form = $( 'form.form' ), url = $form.attr( "action" ), str = $form.serialize();
$('input[type=file]').each(function(){
var reader = new FileReader();
var blob;
reader.onloadend = function (e) {
blob = e.target.result;
}
reader.readAsDataURL(this.files[0]);
str = str + "\u0026" + $(this).attr("name") + "=" + blob;
});
var posting = $.post( url, str );
posting.done(function(data){
if(data == "") {
$("#alerta_sucesso").css("display", "block");
} else {
$("#alerta_erro").find("#texto").text(data);
$("#alerta_erro").css("display", "block");
}
});
});


UPDATE 2

I manage to change the code and execute it without errors, but even so I can't store the image inside the variable
blob
to send this data to the server. The curretn code is this:

$('#submit').on('click', function(){
var $form = $( 'form.form' ), url = $form.attr( "action" ), str = $form.serialize();
var input = $form.find('input[type=file]');
$form.find('input[type=file]').each(function(){
var id = $(this).attr("id");
if(typeof id !== "undefined") {
if(this.files.length > 0) {
var reader = new FileReader();
var blob;
reader.onloadend = function (e) {
blob = e.result;
}
reader.readAsDataURL(this.files[0]);
str = str + "\u0026" + $(this).attr("name") + "=" + blob;
}
}
});
var posting = $.post( url, str );
posting.done(function(data){
if(data == "") {
$("#alerta_sucesso").css("display", "block");
} else {
$("#alerta_erro").find("#texto").text(data);
$("#alerta_erro").css("display", "block");
}
});
});


I assume the problem now it's with the line:

blob = e.result;


Anyone knows what should be the right value for this?

Answer Source

So, I finally manage to solve this issue with this approach:

  var str = "";

  $('input[type=file]').on("change", function(){
    var id = $(this).attr("id");
    var name = $(this).attr("name");
    if(typeof id !== "undefined") {
      if(this.files.length > 0) {
        reader = new FileReader();
        reader.onloadend = function () {
          str += "&" + name + "=" + this.result;
        }
        reader.readAsDataURL(this.files[0]);
      }
    }
  });

  $('#submit').on('click', function(){
    var $form = $( 'form.form' );
    var url = $form.attr( "action" );
    str += $form.serialize();
    $.post(url, str, function(data){
      if(data == "") {
        $("#alerta_sucesso").css("display", "block");
      } else {
        $("#alerta_erro").find("#texto").text(data);
        $("#alerta_erro").css("display", "block");
      }
    });
  });

and now the image is being sent to server as a string which can be handled by the PropertyEditorSupport class; this is the thing I am trying make work right now.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download