INOH INOH - 2 months ago 7
HTML Question

Prevent HTML Form Input File from Clearing

Ok revised question a little, is there a way to prevent my file input from clearing. What happens is everytime I update form with value it clears the file input

FORM

<iframe name="my_iframe" src="" id="my_iframe"></iframe>
<form action="http://******/Update.php" method="post" enctype="multipart/form-data" target="my_iframe">
<p>
<input type="file" input id="input" name="image"onchange="handleFiles()"/>
</p>
<p>
text input1:
<input type="text" name="text1" value="%%%myvalue1%%%"/>
</p>
<p>
textinput2:
<input type="text" name="text2" value="%%%myvalue2%%%"/>
</p>
</form>


JAVASCRIPT - THIS LOADS IMAGE INTO IFRAME TO PREVIEW

<script>
var img = document.getElementById("image");
var width = 450;
function handleFiles() {
var filesToUpload = document.getElementById('input').files;
var file = filesToUpload[0];

var reader = new FileReader();
reader.onload = function(e) {
img.onload = function() {
if (this.naturalWidth > width) {
this.width = width;
}
}
img.src = e.target.result;
}
reader.readAsDataURL(file);
}
</script>


UPDATING -
%%%myvalue1%%%
whenever this changes, it clears the file input from form

myvalue1 = ""
var text = "pears"
myvalue1 = text


I have attached a sample app here

Answer

Why don't you make it 2 separate forms and have the image form fill the iframe and have a second form to capture the 2 textbox field values.

Or you could have the values in the three fields in the current form all put there values into variables. And have the form look to see if the variables are empty before running, if they are not empty use values for you current fields in the form.