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

  • Profile Image
    jaagster
    Asked 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?

  • Profile Image
    pinoytech
    Answered 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
    jaagster
    Answered 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
    Mike_T
    Answered 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
    jaagster
    Answered 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
    datasphere
    Answered 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
    Mike_T
    Answered 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.