0

I wanted to add files to <input type="file" multiple> using js/jQuery.

Here is where am having trouble, I am using cropperjs, so I want the cropped image to be appended to data of a form and sent on submit.

Robert Koritnik
  • 103,639
  • 52
  • 277
  • 404
lulliezy
  • 1,741
  • 5
  • 24
  • 49
  • 8
    If you mean that you want to automatically select a file in a file input, then I'm afraid that's not possible. Files can only be selected manually by the user for security reasons. – Rory McCrossan Feb 20 '17 at 08:18
  • Given the extra detail in your edit, can the CropperJS library give you the binary data of the image output? If so you can append it to a FormData object and upload it to the server via an AJAX request instead. – Rory McCrossan Feb 20 '17 at 08:24
  • Then you can dynamically create a form with input field having file type, then submit that form using javascript – RAUSHAN KUMAR Feb 20 '17 at 08:24
  • @RAUSHANKUMAR no you can't, because as I mentioned in my first comment you cannot programmatically set the file/data in a `file` input. – Rory McCrossan Feb 20 '17 at 08:26
  • cropperjs returns a canvas and using `toDataURL()` i convert it to binary data, but then from there how do i proceed using ajax – lulliezy Feb 20 '17 at 08:58
  • @RoryMcCrossan i mean i guess i will have to get the form data as well so how do i put them together then before sending them – lulliezy Feb 20 '17 at 09:14
  • 1
    See [this answer](http://stackoverflow.com/questions/4998908/convert-data-uri-to-file-then-append-to-formdata/5100158#5100158) for how to create the FormData, and [this answer](http://stackoverflow.com/questions/9622901/how-to-upload-a-file-using-jquery-ajax-and-formdata) for how to upload that FormData though AJAX. – Rory McCrossan Feb 20 '17 at 09:21
  • thanks @RoryMcCrossan that really helped – lulliezy Feb 20 '17 at 09:26

0 Answers0