Question

Looking at an example on image upload with JQuery here:
http://www.zurb.com/playground/ajax_upload

Using this example it is easy to create a simple image preview as you can see below.

The image preview works perfect. However, “input type=”file” id=”imageUpload”” does not keep the original file so when actually submitting/saving the whole form “form.imageUpload” is empty and not submitted with it.

I know I have already uploaded the image with AjaxUpload, but if you are just using this for preview reasons as in my example below, you still want to retain “the old fashioned way”. this script seems to remove the value from the input on form field “imageUpload” how can I get the script to maintain it so I can still upload the old way too.

Thanks

var thumb = $('img#thumb'); 

new AjaxUpload('imageUpload', {
    action: 'plugins/thumbnailupload.cfm',
    name: 'image',
    onSubmit: function(file, extension) {
        $('span.status').text("Loading preview");
    },
    onComplete: function(file, response) {
        thumb.load(function(){
            $('span.status').text("Loading");
            thumb.unbind();


            $.ajax({
                    type: "get",
                    url: "plugins/common/helpers/thumbCleanRam.cfm",
                    data: {
                    fileID: escape(response)
                },
            dataType: "json",
            });


        });
        response = $.trim(response)
        thumb.attr('src', 'plugins/common/helpers/thumbnailpreview.cfm?f='+escape(response));
    }
});

});

 <div class="clearfix">
      <label for="icon">Upload Image</label>
      <div id="preview"><span id="status"></span><img id="thumb"></div>
      <div class="input">
        <input type="file" id="imageUpload" name="imageUpload">
        <br/>
      </div>
    </div>

Answer 1

It appears that it is not possible as the script takes of the upload so reloading on submit is not possible unless I copy the field again.