HOWTO: Using Upload Suite with ASP.NET MVC

Aurigma's uploader was always easy to use for ASP.NET WebForms developers, however those ASP.NET folks who prefers MVC, it may seem a bit challenging to use it. It is a time to change that and that's why we created this small sample application to demonstrate how you can integrate Upload Suite into an MVC application.

Download ASP.NET MVC Upload Suite Sample

Description

This is a quite simple application - it allows uploading images with a small thumbnail to a folder on the server, display all images in this folder, open a selected image in a browser and remove them. Something like a simple file manager.

Tech details

This sample was built with:

• Visual Studio 2010

• ASP.NET MVC 4

• Razor view engine.

It demonstrates the usage of both ActiveX/Java and HTML5/Flash uploaders.

Structure

We did not want just to make it working in MVC app. We wanted to build a sample application which follows the MVC idea. That's why we created the following objects:

Models

• File - represents a single file in the folder.

• Storage - represents a directory where you store images.

Controller

There is a single controller which supports the following actions:

• UploaderAJ - displays the ActiveX/Java uploader

• UploaderFH - displays the Flash/HTML5 uploader

• List - displays all files in the Storage.

• Add - processes the uploaded files and sends them to the Storage.

• Details - displays the specified File.

• Delete - removes the specified File from a Storage.

Views

• UploaderAJ - the View which loads up the ActiveX/Java uploader. You can set the ActiveX/Java uploader settings there.

• UploaderFH - the View which loads up the HTML5/Flash uploader. You can set the HTML5/Flash uploader settings there.

• List - the View which displays all images in the specified Storage. It is also the main View of the application.

• Details - the View which displays the specific File in a browser.

What you should know when you copy-paste it to your project

Microsoft.AspNet.Web.Optimization required

It requires to use System.Web.Optimization namespace. To do it, you should install the Microsoft.AspNet.Web.Optimization through NuGet. If you build Views from a scratch, and don't use HTML helpers, it may be not necessary though.

Be sure to add the System.Web.Optimization namespace to web.config (namespaces section):

<add namespace="System.Web.Optimization"/>

JavaScript and binaries

Don't forget to copy JavaScript files, HTML5 uploader CSS and binaries (.cab, .jar, .swf). In this sample application they are added to ~/Scripts/aurigma-aj for ActiveX/Java and ~/Scripts/aurigma-fh for Flash/HTML5.

UploaderModule for Flash

If you are going to use Flash uploader, be sure that you add a reference to Aurigma.ImageUploaderFlash.dll and include the following to the web.config:

<httpModules>
  <add name="UploaderModule" type="Aurigma.ImageUploaderFlash.UploaderModule"/>
</httpModules>

and

<modules runAllManagedModulesForAllRequests="true" >
  <add name="UploaderModule" type="Aurigma.ImageUploaderFlash.UploaderModule"/>
</modules>

Edited by moderator Wednesday, April 9, 2014 9:10:47 PM(UTC)  | Reason: Not specified

File Attachment(s):

AurigmaMvcSample.zip (20,238kb) downloaded 2,790 time(s).