I have a dilemma. I'm creating a page where there's a file input that's OUTSIDE of the form, like so. The reason is because of design, there's random file inputs on the page.
So here's a file input that's outside of the form.
<input type='file' id='image_upload'>
I'm trying to get the form to get the file from this file upload above and upload that file via the form.
<form action='' method='post' enctype="multipart/form-data">
<input type='file' name='file1' id='image_upload_input' style='display: none'>
<input type="submit" id="save" name="save" value="Save Changes"/>
</form>
To do this, I'm using Jquery to map #image_upload to #image_upload_input
<script>
$(function(){
$('#save').click(function () {
var image_upload = $('#image_upload').[0].files[0];
$('#image_upload_input').val(image_upload);
});
});
</script>
The problem is the actual file is not getting loaded using val(), only the file path. I need to actual file so I can upload it on the back-end. Any thoughts on how to accomplish this?
