Append Response Data to an Input Form

Question

beginner, please be patient.... i have a file dropzone and when a file is dropped it is buffered in memory by multer to read metadata and then prefill a form in a modal. This so far works as expected except that the Modal that is opened up has a file input and i try to attach the file from dropzone to this input/form but never got it working. How is it possible to pass the file to the form of the modal?

I tried like: $('#Bild').val(response.bild); without success...

This is the api/filemeta (shortened, just to give idea):

response = {
    datum: createDate,
    uhrzeit: createTime,
    gewaesser: wtr,
    bild: req.file,
}
res.send(response);

This is the dropzone:

$("#uploadfile").click(function() {
  $("#file").click();
});

$("#file").change(function() {
  var fd = new FormData();
  var files = $('#file')[0].files[0];
  fd.append('file', files);
  $.ajax({
    type: "POST",
    url: '/api/filemeta',
    data: fd,
    processData: false,
    contentType: false,
    success: function(response) {
      //alert(response);
      $('#id_datum').val(response.datum);
      $('#id_uhrzeit').val(response.uhrzeit);
      $('#id_gewaesser').val(response.gewaesser);
      $("#addNew").modal('show');
    }
  });
});

This is the Modal (shortened):

<div class="modal fade" id="addNew" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <form id="faenge-data" method="post" enctype="multipart/form-data">
    <input id="id_picture" type="file" name="Bild" accept="image/*" multiple="multiple" />
  </form>
</div>
<div class="modal-footer">
  <button type="submit" class="menuebuttons">Speichern</button>
  <button type="button" class="cancelbtn" data-dismiss="modal" aria-label="Close">Abbrechen</button>
</div>

You cannot set a the value of a HTML file field programatically because of security issues.. see this https://stackoverflow.com/questions/1017224/dynamically-set-value-of-a-file-input — Amogh Hegde, Feb 15 '19 at 09:51

score 0 · Accepted Answer · answered Feb 15 '19 at 09:58

0

You cannot set a the value of a HTML file field programatically because of security issues.. see this Dynamically set value of a file input

But since you have already uploaded your file to your server you can return the URL/ID of the file in your POST Response and use it for your next form(modal) submit

answered Feb 15 '19 at 09:58

Amogh Hegde

392
3
10

Even if the file is in buffer? Could you give an example? – MaikelNight Feb 15 '19 at 10:47
There is no way to change the Value property of a File Input using JS. since it is Read Only. The only way it can be changed is when a user clicks and uploads a file of his choice.. this is for security reasons – Amogh Hegde Feb 15 '19 at 10:50
@MaikelNight You just want to use the file in your next submission right? the best way would be to return the ID of the object in your db which the file is stored and also the URL, You can use the URL to create a preview for the user on the modal and then you can submit the ID from the modal which your server can pick up and retrieve the file from your Db object – Amogh Hegde Feb 15 '19 at 10:55
Hedge: thanks much so far. I understand your approach. This means that it would be necessary to save the file on the server (maybe temporary) instead of having it in the buffer/memory, right? – MaikelNight Feb 15 '19 at 11:10
Yes right.. since you are already POST-ing it to the server before you append it to the modal – Amogh Hegde Feb 15 '19 at 11:30

Append Response Data to an Input Form

1 Answers1