Sunday, August 23, 2015

DevExpress file upload controls

Alright, here is the simplest example I can think of. It is a one page web form app with an ASPxUploadControl which will allow you to upload a .txt file. The contents of the text file will then get put to an ASPxLabel. If you type "Hello World" into a .txt file and then upload it, "Hello World" will end up on the web page as copy. Get it? The code behind for the web form just looks like this:

using System;
namespace Uploady
{
   public partial class Default : System.Web.UI.Page
   {
      protected void Page_Load(object sender, EventArgs e)
      {
         Label.Text = Session["message"] as string;
      }
      
      protected void Uploader_FileUploadComplete(object sender,
            DevExpress.Web.FileUploadCompleteEventArgs e)
      {
         Session["message"] =
               System.Text.Encoding.Default.GetString(e.UploadedFile.FileBytes);
      }
   }
}

 
 

Well, what if the user doesn't pick a .txt file? That would sabotage the app, correct? We'd better put in place a safeguard to tell our hackers to chill when they overstep. We do that in the web from itself. The ASPxUploadControl does its own magic to bring up some red copy by way of its own AJAX with "That's not a text file junior." as the contents when things go wrong. The markup just looks like this:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"
      Inherits="Uploady.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
   <head runat="server">
      <title>Whatever</title>
   </head>
   <body>
      <form id="form1" runat="server">
         <dx:ASPxUploadControl ID="Uploader"
                OnFileUploadComplete="Uploader_FileUploadComplete" runat="server"
                FileUploadMode="OnPageLoad" ClientVisible="true"
                ValidationSettings-AllowedFileExtensions=".csr">
            <ClientSideEvents TextChanged="function(s,e){s.Upload();}">
            </ClientSideEvents>
            <ClientSideEvents FilesUploadComplete="function(s,e){refresh(s,e);}">
            </ClientSideEvents>
            <ValidationSettings AllowedFileExtensions=".txt"
                    NotAllowedFileExtensionErrorText="That's not a text file junior." />
         </dx:ASPxUploadControl>
         <div>
            <dx:ASPxLabel runat="server" ID="Label"/>
         </div>
      </form>
      <script type="text/javascript">
         function refresh(s,e) {
            var state = document.getElementsByClassName("dxucErrorCell_DevEx")[1];
            if (state.innerHTML.indexOf("junior") === -1) {
               document.location.href = "Default.aspx";
            }
         }
      </script>
   </body>
</html>

 
 

What do the two ClientSideEvents do? Well without the TextChanged event the act of attempting an upload does nothing. On the other side of picking a file our sanity checking and the success and failure scenarios downstream of that never happen without the TextChanged wire up. I stole this out of an existing app at work. The FilesUploadComplete logic is my own. I needed a way to tell if sanity check failed and to redirect the page to itself if it did not. I know this is hacky as hell. I'm sniffing the DOM based upon a class name which is exactly the sort of brittle thing which would break when one upgrades DevExpress (maybe) and the sort of thing my boss would call me out for, but, again, I'm just trying to keep things simple for this example.

No comments:

Post a Comment