Image Preview onChange with dropzone

[mouse0270]

I am using this plugin to allow users to drag and drop or just click a button to upload. The file isn't uploaded until later after they feel out the form. So I wanted to have a preview of this image as they were working on the form. I raised a similar issue #60 a while back, when I was just using the button and not drag and drop.

So I know how to preview the image when I user selects a photo with the button but it doesn't seem to apply the same way when they drag and drop. The code I am using is listed below.

How would I be able to display and image using the dropzone.

PS: I do not need to support older browsers with this feature. I have marked it as a requirement that my users us a modern browser such as the latest version of google chrome.

    $('.cruises .rocket-thumbnail:not(.binded)').each(function() {
        var app_id = $(this).closest('.cruises').data('id'),        
            button_id = 'cruises-button-'+app_id,
            dropzone_id = 'cruises-dropzone-'+app_id;

        $(this).attr('id', dropzone_id);
        $(this).find('button.uploader').attr('id', button_id);

        var uploader = new ss.SimpleUpload({
                autoSubmit: false,
                name: 'cruises-uploader-'+app_id,
                button: button_id,
                dropzone: dropzone_id,
                url: 'libraries/classes/file_upload.php',
                allowedExtensions: ['jpg', 'jpeg', 'png', 'gif'],
                accept: 'image/*',
                responseType: 'json',
                data: { folder: '', altText: '', datetimestamp: false },
                onChange: function(filename, extension, uploadBtn) {
                    if (uploader._input.files && uploader._input.files[0]) {
                        var oFReader = new FileReader();
                        oFReader.readAsDataURL(uploader._input.files[0]);
                        oFReader.onload = function (oFREvent) {
                            $('#'+dropzone_id).find('img').attr('src', oFREvent.target.result);
                        };
                    }else{
                        $('#'+dropzone_id).find('img').attr('src', 'holder.js/400x300/auto/font:Open Sans/size:24/text:Image Loaded \n');
                        Holder.run();
                    }
                }
            });
    });

[chris-noreikis]

I'm using the plugin in a similar way, and ran into the same issue. One solution I found was to access files in this way:

oFReader.readAsDataURL(uploader._queue[0].file);

Another way to modify the SimpleAjaxUploader.js so that _addFiles calls onChange using 'file' instead of 'filename'. I did this, and just used the file directly instead of accessing it from the queue or _input.

Hope this helps.