Image Upload Preview

[ekidhardt]

I am writing an application where a user can upload images to a server file - I would like to have a preview of the image displayed along side the file upload widget. I found the this.fileUpload.getFileNames method, but am unsure how to implement it.

Ideally, when the user has selected a file and it's been added to the list, the preview image would populate based on the upload path and the file name. But I can't seem to find an event to which I can attach this behavior.

[Scott Klement]

I'm not sure if that's possible?

Browers are VERY picky about stuff like that. Your application can never directly access the user's hard drive, since that would allow any web page on the Internet access to people's private documents. (I'm sure you can see why that's a problem) So how would you read an image in order to preview it?

You could upload it to the IBM i, and then preview it that way. In that case, you're using the browser's built-in file dialog to select the file (which we can't change) and then preview it by uploading it to a temporary directory in the IFS, and viewing it... but that does involve uploading. If you uploaded it to a temp directory, the user could preview it and choose not to continue, in which case the back-end RPG program could delete it. Or if they did choose to continue, it could move it to the permanent directory. Would that work?

The other thing that might be worth looking into is the file open dialog itself. This is something we can't change, it's fully under control of the browser... but a lot of times it does show what images look like inside the open dialog. On mobile, the only thing it typically lets you upload are pictures, so that definitely lets you browse what they look like -- but, I think Windows also shows a thumbnail of the picture in the open dialog. Again, we can't control that, but if that works for you, all you have to do is point it out to the users... very easy.

Otherwise, the temp directory thing is all I can think of.

[ekidhardt]

I'm uploading the image to a temp directory on the IFS - I need the event to which to tie the img src update. The select file link is auto generated by the widget and I can't tie an onclick to it.

Any ideas where I could place that event so it updates the preview src after the file list is populated?

[TaskForce_Kerim]

Hey ekidhardt,

is http://www.dropzonejs.com/ like the thing you want? If you scroll down, there's a demo. Once you put an image into the upload rectangle, it shows a preview within it. We created a custom widget that uses Dropzone.js but what's problematic or tricky is sending the data to the ProfoundUI endpoint. Perhaps Scott has an idea here. Currently, we're uploading to our own Node server.

[ekidhardt]

So I was able to get this to work - I used a getElementByClassName to get the file input box and applied an "input" event listener. I was able to read the file the user uploaded from the input.files array and make a blob of it on the DOM using createObjectURL. Then I just linked my preview image to that URL.

Works like a charm!