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

    Issues with Image Upload Preview widget. Show uploaded image after it is uploaded.

    Asked by jaagster on February 20, 2014 at 11:22 AM

    I have an image upload form. How do I get the uploaded image to show on the form once the upload is complete but before the Submit is hit?

    Page URL:
    http://www.pixeljax.com/form-test.html

  • Profile Image

    Answered by pinoytech on February 20, 2014 at 12:48 PM

    Hi,

    Thank you for contacting us.

    I just want to let you know that there's a widget called Image Upload Preview to achieve that in your form.

    Here's how to find the image uploader widget.

    If you need further assistance, please let us know.

  • Profile Image

    Answered by jaagster on February 20, 2014 at 03:30 PM

    I used the Demo and -

    http://www.jotform.co/form/33357650880863?

    This widget does not show the image at all in IE8, and only shows a top section in Firefox27. It is OK in Chrome.

    I tried setting width and height also in the css but that did not seem to do anything.

  • Profile Image
    JotForm Support

    Answered by Mike_T on February 20, 2014 at 04:20 PM

    Unfortunately, we do not have any other tool for this task.

    I have submitted a bug report ticket about mentioned Image Upload Preview widget, but I can not provide any ETA for when it will be fixed.

    We will update this thread, as soon as we have any news.

  • Profile Image

    Answered by jaagster on February 20, 2014 at 04:38 PM

    Then what is the easiest way to have an uploaded image display on the upload form A thumb image would be good. I want customers to see what they uploaded before hitting Submit.

  • Profile Image

    Answered by datasphere on February 20, 2014 at 04:59 PM

    Hello jaagster

    maybe this would help you, if you have some basic HTML  and CSS mending skills :

     

    http://blog.revathskumar.com/2012/04/html5-show-thumbnail-preview-of-image.html

     

    http://css-tricks.com/ajax-image-uploading/

     

    you can even inject thic CSS from above page and see what happens:

    <div id="upload-area"> <div id="preview"> <img width="100px" height="100px" src="http://cdn.css-tricks.com/images/icons/128px/zurb.png" id="thumb"> </div> <form action="/playground/ajax_upload" id="newHotnessForm"> <label>Upload a Picture of Yourself</label> <input type="file" size="20" id="imageUpload" class=" "> <button class="button" type="submit">Save</button> </form> </div>

    but you probably must add a java script also so infact you would need to host your form on

    premade HTML5 + CSS3 page on your webhosting server

  • Profile Image
    JotForm Support

    Answered by Mike_T on February 20, 2014 at 05:46 PM

    @Jaagster,

    I do not think that there is any other option than embedded form source code with some custom script for image preview.

    Here are some related threads on a stackoverflow.com:

    How to show upload image preview using jquery before form submit in a div

    Preview an image before it is uploaded

    How to upload preview image before upload through JavaScript

    If you are interested in this option, we might be able to create a script example, but this will take some time.