How can I preview the uploaded image?

The candidate makes an upload an image, and send the form. When he returns to edit it, I'd like to see the uploaded image on the second page. 

How can I do this? 

Thank you!

Hi kxt222,

If you want to preview the uploaded image on the form you can use the widget called Image Upload Preview. Here is the guide on How to Add a Widget to your Form.

When you say you wanted the candidate to see the image on the second page after hitting submit, are you talking about the Thank You Page? If yes, then you can use this guide about Setting Up the Thank You Page.

1. Click the "Setup & Embed" tab

2. Click the "Thank You" button with a huge smile

3. Select "Thank You Message" option

4. Click "Upload Image" then you will see "{uploadImage}" on the thank you page.

Hope this helps. Thank you!

I am not talking of the "Thank you" page. My form has three screens:

Screen 1 - the candidate to upload the image. 

Screen 2 - other data.

Screen 3 - Thank you 

The candidate should edit his submission (days later). During editing, I want the picture he sent, viewed in Screen2.

I put an image field on the form (Screen2). How do I view, in this field, the uploaded image? 

http://form.jotformpro.com/form/42753427702959

Hi,

Unfortunately I do not think that is possible with jotform - directly.

What you would need is to setup the email notifications to include the link for form editing. Now the next step would be to show the image and the only way that I know to be possible to do is to update the image preview size on the form (step 1) to show this uploaded image during the editing.

It would look something along these lines:

Well, if we do take it a step further we can accomplish something more with it like seen on this jotfom here:

http://form.jotformpro.com/form/42754135709963

Once you fill it out you should get the autoresponder with the link to the form.

Now how did I do that? I cloned your jotform and added autoresponder and email field.

Then I added this CSS code:

ul.form-section[style]:first-child, ul.form-section[style]:first-child div#cid_4 img
{
 display: block !important;
 height: 100% !important;
 left: 0;
 top: 0;
 width: 100%;
}
ul.form-section[style]:first-child li#id_3, ul.form-section[style]:first-child label, ul.form-section[style]:first-child input, ul.form-section[style]:first-child #link_4, ul.form-section[style]:first-child #cid_5
{
 display: none !important;
}
ul.form-section[style]:first-child, ul.form-section[style]:first-child div#cid_4 > div#clip_4 {
    height: 100% !important;
    width: 100% !important;
}

Do let me know what you think and if this is what you wanted to achieve.

Best Regards,
Ben

Thank you. Your suggestion gave me the a idea new to solve my problem.

Hi,

You are welcome. It is great that it was useful to you directly or indirectly :)

If you do not mind do let us know what you have accomplished once it is finished up you got me interested ;)

Best Regards,
Ben

Hello Ben, 

Sorry, because I do not speak English very well, but I'll try to explain.

1 - I created the field of choice with options to users. 

1.1 - I created the code field that is sent through notification. 

1.1.1 - I created conditions for next pages, conform user choice. 

2 - To enlarge the image, I used the CSS below. 

#clip_31 {width:177px  !important;}

#clip_31 {height:236px  !important;}

#clip_31 {border:none  !important;}

#clip_31 > img {width:100%  !important;}

3 - On the last page I created a field of choice. Through the conditions, it clears the data from the "code" field.  

Unfortunately, I can not hide the "upload photo" button while editing the user.

http://form.jotformpro.com/form/42785626360965 

Feel free to test it and if necessary suggest an improvement in the CSS code.

Hi,

Thank you for sharing that with me. I tried cloning your jotform to see what was done exactly (it is better for testing), but I am not able to. Would you please allow me to clone it (you would need to allow cloning of your jotforms).

If not, you can give us any edit link that we can see your jotform with and we will be able to see what can be done.

One idea that comes to mind is setting overflow setting so that when image is there the button is pushed out, I would need to check it out though to be sure that it is OK.

Best Regards,
Ben

Please share the name or the link to your form, I see the first link you posted above does not work anymore.

link: http://www.jotformpro.com/form/42785626360965

Hi,

May I know if Ben's solution worked for you? 

From what I understand your scenario is like this.

1. Screen 1: Uploads image

2. Screen 2: Other data

3. Thank you page.

The user submits form, but also receives the "Edit Submission" link, this will let the user to edit their answers in a later date. What you wanted is that when they edit it, the uploaded image will show in screen 2? If letting the users edit their submission is the main goal, Ben's solution would work appropriately.

It will also help us if you can provide a screenshot of what you wanted to accomplish.

Thank you.