Note: ASP.NET Control is a part of Upload Suite SDK now.
Please read the documentation for more info.Project informationProject 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#.
IntroductionHello,
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 application1. 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 toolbar1. 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 pageThat'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 propertiesSelect 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 redistributablesBy 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 handlersBy 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 itOK. 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.
ConclusionThe 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