AsynFileUpload – from AJAX Control Toolkit

 image

AsynFileUpload Control

The second new control included in the newest release of the AJAX Control Toolkit is the AsyncFileUpload control. You can use this control to display a fancier interface for uploading files. The AsyncFileUpload control:

  • Enables you to perform file uploads without doing a postback
  • Displays a throbber images while an image is being uploaded
  • Raises both server and client events when a file upload completes or when there is an error.
  • Works inside and outside of an UpdatePanel

Admit it! The standard file upload widget that you get with HTML is boring. You can’t display a picture while a file is uploading. And, it forces you to do a postback which is bad in this new Ajax world.

<asp:UpdatePanel ID="up1" runat="server">  
  <ContentTemplate>  
    <h1>Add File</h1>  
    File: <br />  
    <cc1:AsyncFileUpload ID="AsyncFileUpload1" onuploadedcomplete="AsyncFileUpload1_UploadedComplete" runat="server" />  
    <br /><br />  
    Description:<br />  
    <asp:TextBox ID="txtDescription" runat="server" />  
    <br /><br />  
    <asp:Button ID="btnSubmit" Text="Add File" runat="server" />  
    </ContentTemplate>  
</asp:UpdatePanel>  
public partial class TestAsnycFileUpload : System.Web.UI.Page  
{  
    protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)  
    {  
        System.Threading.Thread.Sleep(5000);  
        string savePath = MapPath("~/Uploads/") + Path.GetFileName(e.filename);  
        AsyncFileUpload1.SaveAs(savePath);  
    }  
}
  

Via New AJAX Control Toolkit Release

AJAX Control Toolkit – Seadragon Control with Deep Zoom

image

Seadragon Control

The Seadragon control enables you to pan, zoom, and make an image full screen. The control performs all of these fancy image effects using pure JavaScript and it works with any modern web browser.

You can try out Seadragon by visiting the following web page. Click on the image of the bicycle that appears half-way down the page.

http://livelabs.com/seadragon-ajax/

The Seadragon control displays a menu of buttons:

clip_image002

You can also use your mouse to drag the image from side to side – you can stitch lots of images together to create a truly humongous image that you can drag through using Deep Zoom Composer.

In order to use the Seadragon control, you need to (1) Create the image (2) Add the Seadragon control to a page. James Senior has created a great video quick start that demonstrates how you can use the Seadragon control for the Channel9 website:

http://channel9.msdn.com/posts/jsenior/Seadragon-Ajax-Control-Quick-Start-Guide/

Creating an Image with Deep Zoom Composer

Before you can display an image with the Seadragon control, you must first process the image with a tool named the Deep Zoom Composer.

After you install Deep Zoom Composer, you can convert an image into a format that is compatible with the Seadragon control. When you launch Composer, the following dialog appears:

clip_image004

Read More @ New AJAX Control Toolkit Release

Also there is a screencast on using the control by James Senior

image

http://channel9.msdn.com/posts/jsenior/Seadragon-Ajax-Control-Quick-Start-Guide/