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,509
  • 11
  • 53
  • 85
  • 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

0 Answers0