How do you show a preview image when allowing file uploads in ASP.NET?

Question

Here is the functionality I want:

User selects an image from their machine, hits an Upload button (or better yet the following fires on the onchange event of the file input), and is able to see a preview of the image they are about to upload.

Here is the current workflow I am using, but it seems suboptimal:

I have an image control, a file input control and a submit button control. When the submit button is clicked, the codebehind handles the OnClick event and loads the image from the file input element. It then stores it into a temporary folder on the web server and sets the image control's ImageUrl to point to it.

This works, but results in me having to do a lot of janitorial duty in cleaning up these temporary images. Is there a cleaner workflow for doing this?

Answer 1

You should upload and rename the image to match some sort of ID for your current record. Then, when you upload a new file, delete any old ones first, all in the codebehind.

If you are only showing a thumbnail, you should try to use an image library to resize the image before saving. This will save on bandwidth and storage space.

Answer 2

I am assuming that the problem you are trying to solve is for your application to have the ability to preview the image before the user commits to that image. Your current approach has many advantages but one disadvantage is orphaned image files in a temporary directory if the user previews several images before committing or abandons the operation all together.

I've noticed several popular social networking sites using a different approach. Basically, a Java applet is used to do the preview operation on the user's local machine. The only file uploaded to the server is what the user commits to. That approach solves the problem that you are running into; however, it introduces the new problem of requiring Java to be installed on the local machine and integrated with the web browser.

Answer 3

you can create a small executable to delete files on* that temporary folder, and attach it to a schedule task so it will clean your temp. folder once in a while. But I don't know if you're hosting on a dedicated server or shared hosting because with shared hosting, this doesn't work

Answer 4

If you have memory to burn:

• cache the image bytes in memory
• set your ImageUrl to an image handler (.ashx) with some sort of cache identifier
• serve the image bytes from cache
• if the user cancels or leaves, discard the cached bytes
• if the user accepts, write the cached bytes to their final destination

Answer 5

and is able to see a preview of the image they are about to upload

...

When the submit button is clicked, the codebehind handles the OnClick event and loads the image from the file input element. It then stores it into a temporary folder on the web server and sets the image control's ImageUrl to point to it.

Imagine this conversation:

• Jim: I don't know if I can afford to drive my car to work today.
• Bob: Why don't you just drive to work? When you pay for it, you'll know if you can afford it or not!
• Jim: Awesome!

You've just uploaded the file to show them the preview of the file they're about to upload...

While this will undoubtedly work fine if your users are uploading small images over fast connections, when someone tries to upload a 3 meg JPEG over a slow connection, and then wonders why their webpage locked up from selecting a file (they didn't even press submit remember, so you've effectively locked them up 'randomly'), you may wish to re-evaluate this as a solution.

To actually display the image before it gets uploaded, you will need to use some kind of flash or silverlight object (or perhaps a java applet) which can produce a thumbnail of the local file on the user's local disk, before it gets sent to the server. As ugly as this may sound, there literally is no way to do it without some client side plugin.