Uploading an image to a website is a task that is required in nearly every website. The requirement could exist due to a CMS background or due to user generated content like profiles, posts, and various other usages. A common problem is the lack of image editing options. The article describes the construction of an image uploader in ASP.NET MVC 3 with C#. The image uploader is able to handle more than just plain file uploads. Additionally the image uploader can perform an easy crop job.
The image uploader will have (about) the same options as the one that is used by Google for uploading images in the contacts web application. It includes the following options:
- From the local file system (standard file upload)
- From another URL (resource from the internet)
- From Flickr (per image search, selecting an image from the list of results)
Everything is built with ASP.NET MVC 3 on the server-side. The client side is heavily using jQuery and a plugin called ImageAreaSelect. The plug-in enables the uploader to do (instant) cropping from the client's web browser. In order to preview images from the local file system the FileAPI is used, which is available in all current browsers (excluding IE9).