can't set html form input file from modal / popover - html

Question

I have an html form. For the image file input, I have a modal that pops up to set the input field but also allow the user to crop. When I submit the form, it says the input field is empty.
Here is the form with modal embedded:
<form class="form-horizontal" role="form" action="" method="post" enctype="multipart/form-data">
{% csrf_token %}
<h5>First Name</h5>
<div class="form-group">
{{ form.first_name|attr:"class:form-control"|attr:"placeholder:Enter Your First Name" }}
</div>
<h5>Profile Image (Square Image)</h5>
<div class="form-group">
<button data-toggle="tk-modal-demo" data-modal-options="slide-down" class="btn btn-primary">Upload</button>
</div>
{{ form.crop_coords }}
<!-- Create the modal dynamically via Handlebars -->
<script id="tk-modal-demo" type="text/x-handlebars-template">
<div class="modal fade" >
<div class="modal-dialog">
<div class="v-cell">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Upload Profile Image</h4>
</div>
<div class="modal-body container">
<div class="max-width: 560px;">
<div>
<img style="max-width: 100%;" id="tempImg" src="{% static 'app/images/default-team-large.jpg' %}"/>
<h5>Profile Image (Square Image)</h5>
<div class="form-group">
<input id="id_profile_image2" type="file" name="pic" accept="image/*">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Save</button>
</div>
</div>
</div>
</div>
</div>
</script>
<div class="form-group margin-none">
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-sm btn-primary" href="nml-home.html"> Confirm User Changes<i class="fa fa-fw fa-arrow-right"></i></button>
</div>
</div>
</form>
To test, I click the data-toggle button to popup the modal. It then opens the tk-modal-demo which has a file upload. I upload an image and then I click the save button in tk-modal-demo to dismiss the modal. Then I submit the form with the bottom form submit button. My validator says that the field is empty.
How can I set this required form field from the modal and have it populated when I submit?

Answer 1

It might be that the modal input elements are not created inside the <form> element. Input elements outside of this container will not be sent to the server upon submit.
You can first check out what is actually transmitted with the development console of your browser (in Chrome it's the Network tab). If your fields aren't there, then you might need to write a bit of Javascript, to either:
copy the contents of the input elements inside the modal to hidden fields within the form, for using the regular submission process
or, hijack the submit event and manually compose which fields you want to send