Help us to translate this website and improve this translation!
English | Castellano

How to Use the FileUpload AJAX Control

Custom Javascript 2

We are only limited by our imagination in thinking of the applications of CustomJavascript. One of the most common usages is to show custom information to the user when our file has been uploaded (PostUpload).

In the PostUpLoad event and in the PreDelete event, we can access the file information (HttpPostedFileAJAX), whose variable name is the same in the properties of the HttpPostedFileAJAX (the example will help clarify this).

In our example, when we upload an image we show all of the file information as well as the image itself in a the usual tag <img />... an example is worth a thousand words:


Add



Code.aspx
<cc1:FileUploaderAJAX ID="FileUploaderAJAX1" runat="server" MaxFiles="1" />
<div id="info" style="overflow:auto"></div>
Code.aspx.cs
protected void Page_Load(object sender, EventArgs e)
{
   if (!Page.IsPostBack)
   {
       FileUploaderAJAX1.addCustomJS(FileUploaderAJAX.customJSevent.postUpload, postUploadJS());
       FileUploaderAJAX1.addCustomJS(FileUploaderAJAX.customJSevent.postDelete, clearDiv());
       FileUploaderAJAX1.addCustomJS(FileUploaderAJAX.customJSevent.postHide, clearDiv());
   }

   if (FileUploaderAJAX1.IsPosting)
       this.managePost();
}

private void managePost()
{
   HttpPostedFileAJAX pf = FileUploaderAJAX1.PostedFile;

   if (pf.Type == HttpPostedFileAJAX.fileType.image && pf.ContentLength <= 5 * 1024)
   FileUploaderAJAX1.SaveAs("~/temp", pf.FileName);
}

private string postUploadJS()
{
   StringBuilder sb = new StringBuilder();

   sb.Append("var info = parent.document.getElementById('info');");
   sb.Append("var message = '<b>FileName</b> = ' + FileName;");
   sb.Append("message += '<br /><b>FileName_SavedAs</b> = ' + FileName_SavedAs;");
   sb.Append("message += '<br /><b>FileName_Path</b> = ' + FileName_Path;");
   sb.Append("message += '<br /><b>ContentType</b> = ' + ContentType;");
   sb.Append("message += '<br /><b>Type</b> = ' + Type;");
   sb.Append("message += '<br /><b>ContentLength</b> = ' + ContentLength;");
   sb.Append("message += '<br /><b>responseMessage_Uploaded</b> = ' + responseMessage_Uploaded;");
   sb.Append("message += '<br /><b>responseMessage_Uploaded_Saved</b> = ' + responseMessage_Uploaded_Saved;");
   sb.Append("message += '<br /><b>responseMessage_Uploaded_NotSaved</b> = ' + responseMessage_Uploaded_NotSaved;");
   sb.Append("message += '<br /><b>Saved</b> = ' + Saved;");
   sb.Append("message += '<br /><b>Deleted</b> = ' + Deleted;");

   sb.Append(@"
       if (Type == 'image')
       {
          message += '<br/>';
          message += '<img src=""'+FileName_Path+'""/>';
       }
    ");

   sb.Append("info.innerHTML = message;");

   return sb.ToString();
}

private string clearDiv()
{
   StringBuilder sb = new StringBuilder();

   sb.Append("var info = parent.document.getElementById('info');");
   sb.Append("info.innerHTML = '';");

    return sb.ToString();
}