Image autosubmitted form inside global form

Question

I have a form with several fields and one image. The thing is that I want the image to be displayed when uploading the photo. I manage to do it by putting the image inside another form that is autosubmitted when the image is uploaded. It works well.

My problem is that now, I have two separate form (because you can't nest them). One with all data. And one with the image. My html looks like (basically) :

<form>
 <input type="text"/>
 <input type="text"/>
 <input type="text"/>
</form>
<form> <!--Auto submitted-->
 <input type="file"/>
</form>

Problem is the second form is below the first form and ideally, I want the image to be between the first and the second input of the first form. My problem is more from a CSS point of view.

I did some workaround by adding a div in the first form and using javascript to reposition the second form in front of the div, using absolute position. It works but it is "crappy"

<form>
 <input type="text"/>
 <div id="dummyDiv" style="dimension of the second form found with javascript"></div> <!-- After page load, I use javascript to position the second form here -->
 <input type="text"/>
 <input type="text"/>
</form>
<form>
 <input type="file"/>
</form>

But now I am using responsive design and it is becoming a mess. Is there a way to say "this form must always be positioned on this div" ?"

Demo here : Demo

How are you handling the autosubmit and the upload of the image? — putvande, Aug 28 '13 at 08:31
The wanted output is here : www.spothers.com/post. The picture block is in fact out of the form but I position it back inside with JS. For autosubmit , I do a .submit() on event onchange. — Mansur Khan, Aug 28 '13 at 08:39
Might be a duplicate: http://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded — Jonas Grumann, Aug 28 '13 at 09:12
No. I already manage to have my image previewed before being submitted. My problem is a positionning problem. I need the three images form (that are outside my main form, id uploadForm1,...2,...3) to look like they are inside the main form. — Mansur Khan, Aug 28 '13 at 09:15
The solution I provided allows you to preview the image without having the whole "more forms and auto submit" thing, thus removing the problem at the base (if I got your question correctly) — Jonas Grumann, Aug 28 '13 at 09:17
Ok I get the thing, so I will have only the main form and I won't need any other forms or iframe or autosubmit thing ? That sound good. Only thing is that I dont use jQuery. Is there a pure JS solution? — Mansur Khan, Aug 28 '13 at 09:20

score 1 · Accepted Answer · answered Aug 28 '13 at 09:29

1

Continuing from the comments above:

function readURL(input) {

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            document.getElementById('blah').src = e.target.result;
        }

        reader.readAsDataURL(input.files[0]);
    }
}

document.getElementById("imgInp").onchange = function(){
    readURL(this);
};

and the html:

<form id="form1" runat="server">
    <input type='file' id="imgInp" />
    <img id="blah" src="#" alt="your image" />
</form>

http://jsfiddle.net/jonigiuro/jygT7/

This means you need to go a couple of steps back but should solve the problem at its root (pay attention to ie that might cause some problem, solution provided in the link in the comments)

answered Aug 28 '13 at 09:29

Jonas Grumann

9,697
2
17
35

Like your answer because it takes the problem at its root. I will have to change several thing (like a temporary directory files on server where I stored not yet main submitted image among other stuff). Thanks for the no jQuery solution. Does FileReader require an extension or is standard in javascript? And will this solution work on modern mobile browser ? – Mansur Khan Aug 28 '13 at 09:34
1

FileReader() is a standard javascript method. On mobile browser it'll ask you if you want to upload an image from the gallery or take a new photo using the device's camera – Jonas Grumann Aug 28 '13 at 09:37
Perfect, I'll work and go with your solution. It's cleaner. Giving you the bouty. edit : have to wait. – Mansur Khan Aug 28 '13 at 09:39
That does not work on IE9 :( And too many people are still using IE9 or IE8... Is there a work around to keep using this solution? – Mansur Khan Aug 28 '13 at 10:07

score 0 · Answer 2 · answered Aug 28 '13 at 09:08

You can use old time trick of hidden frame to handle the image upload, then you don't have to reload the whole page every time user selects an image.

Just inject such HTML anywhere in your page:

<iframe name="ImageUploadFrame" id="ImageUploadFrame" style="display: none;" onload="HandleImagePreview(this);"></iframe>

To have the auto submitted form use the frame just add such thing to it, nothing more:

<form target="ImageUploadFrame" ...>

Next step, don't use <div> but rather just an <image> which is initially hidden:

<input type="text" />
<img id="imgPreview" style="display: none; " />
<input type="text" />

Next step is the JavaScript, that will get triggered automatically when the frame is loading the submitted form:

function HandleImagePreview(oFrame) {
    var arrImages = oFrame.contentWindow.document.images;
    if (arrImages.length === 1) {
        var oUploadedImage = arrImages[0];
        var oPreviewImage = document.getElementById("imgPreview");
        oPreviewImage.src = oUploadedImage.src;
        oPreviewImage.style.display = "";
    }
}

Final step is tweaking your server side code handling the submitted image. To have the above work as-is, have the server side code generate such HTML in case of valid image upload:

<html>
<body>
    <img src="name_of_image" />
</body>
</html>

And the JS will know to extract the image from the frame and show it in the proper place.

You can also handle errors this way e.g. outputting some text instead of image and reading the text, leaving this to you though.

It's good but it is already what is done. On submit, my page is not realoaded because I use iframe. You can try it. My problem is more to position the block with id "picWrapper" — Mansur Khan, Aug 28 '13 at 09:10
@MansurKhan you don't need to position the form, just assign the uploaded image `src` to your preview image element. — Shadow The Vaccinated Wizard, Aug 28 '13 at 09:12

Image autosubmitted form inside global form

2 Answers2