3

I'm trying to submit a form with a blob appended to one of the hidden input tags like so.

<form method="POST" action="api/save/image">
   <input id="p_id" type="hidden" name="p_id" value=""/>
   <input id="image" type="hidden" name="image" value=""/>
   <button type="submit">Save Photo</button>
</form>

And my Javascript looks something like this.

$(document).ready(function(){
    $('#p_id').val("444666"); //set hidden input

    var croppedPhoto = $('#crop_stage').cropper('getCroppedCanvas');
    croppedPhoto.toBlob(function (blob) {
          $('#image').val(blob); //set blob to form hidden input
    }

});

My issue is that I am unable to submit this because the blob isn't getting saved to the hidden field, instead it's the value [object Blob].

How do I append my blob so it can be submitted to the server?

Also please note that I am not able to use formData(); since I have to support IE8/IE9.

Thank you for your help.

BaconJuice
  • 3,739
  • 13
  • 56
  • 88
  • Please provide a working example using a code snippet or [JSFiddle](http://jsfiddle.net) – imtheman Aug 18 '15 at 19:14
  • sure here you go https://jsfiddle.net/b69tcdnm/ there isn't much of a working example since that's the reason for this question. – BaconJuice Aug 18 '15 at 19:35
  • You should take a look at the console. You have a couple errors. – imtheman Aug 18 '15 at 19:45
  • @BaconJuice I have the same problem. Were you able to resolve the issue? – S.Basnagoda Jun 15 '18 at 12:24
  • With this it should be possible to do it. This is a hack however, and will probably not work in all current browsers. https://stackoverflow.com/questions/47119426/how-to-set-file-objects-and-length-property-at-filelist-object-where-the-files-a?answertab=active#tab-top – Max Jan 30 '19 at 15:13

1 Answers1

0

this is an 8 years old question by now, and unfortunately I experienced the same thing..

And my solution was to replace toBlob with toDataURL

$(document).ready(function(){
    $('#p_id').val("444666"); //set hidden input

    var croppedPhoto = $('#crop_stage').cropper('getCroppedCanvas');
    $('#image').val(croppedPhoto.toDataURL); // set hidden input

});

That code untested yet because I not using jquery for long now.. In vanilla.js can be done with

let img = document.getElementById("image")
let data = croppedPhoto.toDataURL("image/jpeg", 0.9)
img.setAttribute("value", data)

Notice I use setAttribute instead of directly set value because that not work in my case somehow

Susilo
  • 816
  • 8
  • 17