Combine image and data into 1 html form

Question

Ok this is what i am trying to do. I am creating a web app, that captures an image and displays in iframe of page. i also in another form capture data (we will use (firstname and lastname) as example but there is more fields that are filled in while completing application. at the end of the app i know have a form that has captured all the data and a form that has captured the image. my question is how do i extract the form image and place within the data form. as a javascript variable (ex.myvalue3) this is what i have been able to come up with, just been confused on how to attach both forms together

Form#1ImageCapture

<form action="../uploadimage.php" method="post" enctype="multipart/form-data" target="my_iframe">
<img src="" id="image">
<input type="file" input id="input" name="image" onchange="handleFiles()" style="display: none;"/>
</form>
<iframe name="my_iframe" src="" id="my_iframe"></iframe>

Javascript To Capture

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

// Create a file reader
var reader = new FileReader();
// Set the image once loaded into file reader
reader.onload = function(e) {
  img.onload = function() {
    if (this.naturalWidth > width) {
      this.width = width;
    }
  }
  img.src = e.target.result;
}
reader.readAsDataURL(file);

}

</script>

Form#2DataCapture

<form name="myForm" id="myForm" action="../uploaddata.php" method="POST" target="hidden-form">
<input type="text" name="Firstname" value="%%%myvalue1%%%"/>
<input type="text" name="Lastname" value="%%%myvalue2%%%"/>
</form>

Are the two forms in different frames? Can you not use only one form? — Endless, Sep 11 '16 at 19:00

score 1 · Answer 1 · answered Sep 11 '16 at 19:03

Not the answer you are looking for but here is a little tip to reduce the code... base64 is just impractical

var img = document.getElementById("image");
img.style.maxWidth = 400

function handleFiles() {
    var fileInput = document.getElementById('input');
    var file = fileInput.files[0];
    // use createObjectURL instead of reading the file
    img.src = URL.createObjectURL(file);
}

score 1 · Accepted Answer · edited May 23 '17 at 11:51

1

Transferring files & blobs through iframe is possible and sometimes complicated task depending on iframes origin. If parent have access to the childs window with javascript then you are get get the file inputs reference from parent. Otherwise you need to use postMessage and firefox can are more restricted on transferring a blob cross origin but there are ways around it.

Now the other problem is while you can modify a form and insert inputs and change the value - the file input remains read only so you can not take the file from 1ImageCapture and insert it to 2DataCapture or any other form for that mather.
You can upvote my comment in w3c github to say that you want this feature.

You can do it the other way around and take all inputs and insert them to form with imageCapture.
The other option is to use FormData and create a own form and upload them with ajax

edited May 23 '17 at 11:51

Community

1
1

answered Sep 11 '16 at 19:33

Endless

34,080
13
108
131

what i have done that seems to work is that the original iframe that captures the image. i have now added to the captureData form. What i have done is hide the form and when i CaptureImage the image captured i display in the unhidden iframe. if you need more explain i will post the code on how i did this, since i understand from your post you cannot easily transfer files and place into another form – INOH Sep 11 '16 at 19:41
Transferring files can always be done. It's appending them into another form that is complicated. For that you need to use FormData – Endless Sep 11 '16 at 19:43

Combine image and data into 1 html form

2 Answers2