This product was discontinued

Getting Started with ASP.NET MVC

Upload Suite contains a JavaScript library which allows inserting ready-to-use uploaders to a page. It covers various client-side technologies, which allows you to work with all major platforms (Windows, Mac, Linux) in all the most popular browsers (IE, Mozilla, Safari, Google Chrome).

There are two JavaScript uploader classes - a lightweight HTML5/Flash Uploader and more advanced ActiveX/Java Uploader (particular technology is automatically selected by Upload Suite based on the browser). Let's see how to integrate one of them into your ASP.NET MVC project. We will use HTML5/Flash-based uploader as an example, but you can also add Java/ActiveX Uploader in the same manner.

Preparing

First, we need to make some preparations:

Download and install the Upload Suite from Aurigma’s website.
Copy JavaScript files and HTML5 uploader CSS to your application folder. The files can be found in the HTML5/Flash Uploader installation folder (typically it’s C:\Program Files\Aurigma\Upload Suite [version number]\HTML5-Flash\Scripts). We added these files to the Scripts folder in our sample application.
Add a reference to the Aurigma.ImageUploaderFlash.dll assembly. You can find this DLL in HTML5/Flash Uploader installation folder.

Include UploaderModule for the Flash uploader to the web.config file (skip this step if you use Java/ActiveX Uploader). Add the following code to the <system.web> section:

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

and this code to the <system.webServer> section:

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

Creating Model, View and Controller

Let’s follow the MVC idea and create the following objects to add HTML5/Flash Uploader to the application:

Model: The Storage model represents a directory where uploaded files are stored.
Controller: Upload controller has the Add action, which processes the uploaded files and sends them to Storage.
View: The Uploader view loads up the HTML5/Flash uploader.

View

Let's begin with the View. Create a new View called Uploader and insert the following code:

@{ 
    ViewBag.Title = "HTML5/Flash Uploader"; 
} 
@{ 
    @Styles.Render("~/Scripts/css/aurigma.htmluploader.control.css") 
    @Scripts.Render("~/Scripts/aurigma.imageuploaderflash.min.js") 
    @Scripts.Render("~/Scripts/aurigma.htmluploader.control.js") 
} 
<h2>HTML5/Flash Uploader</h2> 
 
<script type="text/javascript"> 
    var uploader = $au.imageUploaderFlash({ 
        id: 'Uploader1',            
            
        licenseKey: 'XXXXX-XXXXX-XXXXX-XXXXX-XXXXX-XXXXXX',            
        width: '100%',            
        height: '500px',            
        converters: [            
       { mode: '*.*=SourceFile' }            
   ],            
        uploadSettings: {            
            actionUrl: '@Url.Action("Add", "Upload")'            
        }            
    });            
    uploader.writeHtml(); </script>

Here are some comments.

JavaScript and styles we’ve added to the Scripts folder should be linked at the beginning of the view.
The configuration includes mandatory parameters: the HTML5/Flash Uploader identifier and its dimensions.
The licenseKey property specifies a trial or full license key. You can go without it on the localhost only, otherwise this property is required.
The converters property configures how and whether to process files before the upload. Each converter specifies what will be uploaded for each user-selected file: original file, thumbnail, icon, or zipped original file.
The actionUrl property defines where the POST request should be sent. In our case, it is the Add action in our Upload controller.

Controller

Our controller contains only one action:

[HttpPost]          
public ActionResult Add()          
{          
    for (int i = 0;  
             i < Convert.ToInt32(Request.Form["PackageFileCount"]);  
             i++) 
    { 
        if (Request.Form["File0Mode_" + i] != "sourceFile") 
            throw 
              new Exception("Uploader expects to send original files."); 
        _storage.SaveUploadedFile (Server.MapPath("/Files"),  
                                   Request.Files["File0_" + i]); 
    } 
            Response.Write("Upload Complete"); 
            return null;          
        }

Don't forget about the HttpPost attribute, otherwise the action won't trigger when the server receives POST request.

You may wonder why it is necessary to return Upload Complete string in the end. It is required for the Flash-based uploader - Flash should receive some non-empty response from server to detect successful upload completion (it may be any text). If you use ActiveX/Java uploader, you can remove it.

Model

We will use the Storage class as a model. It will just receives uploaded files and saves it to a location with a specified path (Files folder in our case).

public class Storage 
    { 
        public void SaveUploadedFile (string path,  
                                      HttpPostedFileBase sourceFile) 
        { 
            string name = Path.GetFileName(sourceFile.FileName); 
            sourceFile.SaveAs(path + @"\" + name); 
        } 
    }

For simplicity in this example, we don’t check whether a file with a specified name already exists and confirm whether or not to overwrite it. However, in real life you should take care of this.

Result

Now run the MVC application and see a simple and attractive interface (if your browser supports HTML5, it will use the HTML5 control, and Flash otherwise):

Aurigma uploader in ASP.NET MVC application

What's Next?

Aurigma Uploader Suite allows you to configure the uploader very flexibly, customize the user interface, pre-process images before the upload (resize, crop, watermark), filter files, split large files before the upload, etc. You can find a lot of examples in the Upload Suite SDK package.

Download Upload Suite

If you would like to get more knowledge about Aurigma’s Uploader Suite you can read the documentation or contact our support team.