Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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" 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

like image 941
INOH Avatar asked Sep 11 '26 17:09

INOH


2 Answers

I think when you where preventing or blocking the right click and other keys to prevent your code u just put the block on showing text in the input so just check your all the scripts that you are using to block key and mouse click. I Just check your all code by deleting other scripts I can see your apple and other text in the input.

like image 177
Nitrick Avatar answered Sep 15 '26 08:09

Nitrick


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.

like image 43
Mike Avatar answered Sep 15 '26 10:09

Mike