Note: ASP.NET Control is a part of Upload Suite SDK now.Please read the documentation for more info.
Project information
Project name: Image Uploader ASP.NET Control.
Authors: Fedor Skvortsov, Alex Makhov.
Project goal is to simplify Aurigma Image Uploader usage while developing ASP.NET applications.
Platform: ASP.NET.
Language: C#.
Introduction
Hello,
Let me show you the new helper control from Aurigma. We have created it to make the life of ASP.NET developers easier.
This control is an ASP.NET server control which allows a developer to configure ImageUploaderWriter object in more usual way. You just drop this control onto the page and specify particular property values you need in Properties window. Then this control creates an appropriate html-code. That's all!
So let's do it step by step from blank solution.
Step1. Create an ASP.NET web application
1. In your Visual Studio 2005 select File->New->Project.
2. In New Project dialog select Visual C#->Web->ASP.NET Web Application.
3. Specify the web applicftion name or leave default WebApplication1.
Step2. Add control reference to the toolbar
1. Download the compiled version of Image Uploader ASP.NET control (control) from the link in attachments section.
2. Right-click the Toolbox pane and select Choose Items menu item.
3. In the Choose Toolbox Items click Browse button and specify the location of file Aurigma.ImageUploader.dll.
As a result you will have the following item in the list:
Step 3. Add control to the page
That's my favorite step :) Just drag-n-drop ImageUploader item from Toolbox pane to your page.
Code:<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
<%@ Register Assembly="Aurigma.ImageUploader" Namespace="Aurigma.ImageUploader" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<cc1:ImageUploader ID="ImageUploader1" runat="server" Height="350px" Width="630px" OnFileUploaded="ImageUploader1_FileUploaded" ShowDebugWindow="True" />
</div>
</form>
</body>
</html>
Step 4. Configure control properties
Select the control in Designer. In Properties pane you will see the list of control properties most of which will be applied to Image Uploader itself. The meaning of almost all of these properties can be found in the Image Uploader online documentation. See API Reference or Helper Script Reference for additional information.
Step 5. Copy Image Uploader redistributables
By default the control is configured to point the location of the iuembed.js, ImageUploader5.cab, ImageUploader5.jar to the current page folder. You have two options:
1. Copy these files to the starting page folder.
2. Specify alternative paths for ScriptsDir property of the control.
Step 6. Add server-side event handlers
By this time, the control has one server-side event . Select Events tab from the Properties pane and double-click the FileUploaded list item. This event is called for each uploaded file (both source file and thumbnails).
Previously you had to write screens of code to process uploaded files. Now you have to write an event handler where you save your files and that's all. To have this ability Action property value should be set to "." to make Image Uploader upload files to the same page.
Code:
private string galleryPath = "./Gallery/";
protected void ImageUploader1_FileUploaded(object sender, Aurigma.ImageUploader.FileUploadEventArgs e)
{
string fileName = GetSafeFileName(Path.GetFileName(e.File.FileName));
e.File.SaveAs(Server.MapPath(galleryPath + fileName));
}
private string GetSafeFileName(string fileName)
{
string newFileName = fileName;
int j = 1;
while (File.Exists(Server.MapPath(galleryPath + newFileName)))
{
newFileName = j + "_" + fileName;
j++;
}
return newFileName;
}
Step 7. Run it
OK. Now it's time to see the results! Press Ctrl+F5 and your default web browser with Image uploader will appear. Upload files and look for them in your gallery folder.
Conclusion
The things became simpler. We have spent about five minutes to make a successful result: Image Uploader is configured, files are uploaded.
As you can see if you create ASP.NET applications this control is quite helpful:
1. Native development process. Now you can make Image Uploader pages in more natural way. Just drop a control to the page and configure its properties.
2. Simple property setting. Most non-string properties (enumerations, color values) could be now set from the drop-down list or dialog. In future versions editors for XXXImageFormat, FileMask and other complex properties will be added.
3. Fast server-side script creation. With the help of FileUploaded event you are able to concentrate on what to do with files and not on how to get them from the upload request.
4. No more file hell. The page with Image Uploader and upload processing script are in the same file now, so you don't have to care about not losing your upload processing script.
You can post here all your thoughts about this control, its functionality and usage results and ideas about similar projects you would like to see next.
Edited by moderator Wednesday, February 12, 2014 12:20:14 AM(UTC)
| Reason: Not specified