What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How can I preview the uploaded image?

    Asked by KXT222 on October 03, 2014 at 07:44 AM

    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!

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

    image upload preview upload preview thank you page upload widget
  • Profile Image
    JotForm Support

    Answered by Jan on October 03, 2014 at 08:39 AM

    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!

  • Profile Image

    Answered by KXT222 on October 03, 2014 at 10:06 AM

    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

  • Profile Image

    Answered by Ben on October 03, 2014 at 11:15 AM

    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

  • Profile Image

    Answered by KXT222 on October 06, 2014 at 02:11 PM

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

  • Profile Image

    Answered by Ben on October 06, 2014 at 02:27 PM

    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

  • Profile Image

    Answered by KXT222 on October 06, 2014 at 04:21 PM

    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.

  • Profile Image

    Answered by Ben on October 06, 2014 at 04:47 PM

    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

  • Profile Image

    Answered by KXT222 on October 06, 2014 at 05:58 PM
    Ok Ben , authorized .

  • Profile Image
    JotForm Support Manager

    Answered by Jeanette on October 06, 2014 at 06:25 PM

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

  • Profile Image

    Answered by KXT222 on October 06, 2014 at 06:43 PM
  • Profile Image
    JotForm Support

    Answered by Charlie on October 06, 2014 at 08:39 PM

    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.