FileUpload controls don't do ajax!

A guy I work with mentioned this tip to me today so I thought I'd share it (not the ground-breaking first article I was hoping for but don't worry that's coming!): 

FileUpload controls don't work with ajax, so its probably best not using them with ajax!
If you feel you must then the way to do it is to make your file upload submit button a postback trigger, and set the UpdateMode of your update panel to conditional. This allows you to do your ajax stuff as usual, but when you come to do the file upload you will have a full page refresh: -
 
<asp:UpdatePanel ID="AjaxUploader" runat="server" UpdateMode="Conditional">
<Triggers>
    <asp:PostBackTrigger ControlID="UploadButton"/>
</Triggers>
<ContentTemplate>
    <asp:FileUpload ID="FileUpload1" runat="server" EnableViewState="true" />&nbsp;
    <asp:Button ID="UploadButton" runat="server" Text="Upload File" OnClick="SomeFunction" />
</ContentTemplate>
</asp:UpdatePanel>
 
One thing that really caught me out was a lovely little gotcha with asp:placeholders and their 'Visibility' property, I was toggling a form in and out of view and this caused the image upload to fail first time it was used, although it would then be fine after that. One quick solution is to use a div and play with it's style property instead: -
 
<div id="layerToToggle" runat="server" style="display:none">
    <p>Content to toggle</p>
</div>
 
Then in code behind:

layerToToggle.Style.Add("display", ""); // show
layerToToggle.Style.Add("display", "none"); // hide

 
 

 

3 Comments

  • Embed your update panel containing the file upload within another upload panel.

    The outer update panel will catch the file upload postbacks, not refreshing the whole page.

  • dragos; The problem with using FileUpload inside an update panel is not that it causes a postback but rather that it just doesn't find the file that has been entered into the FileUpload control. Unfortunately, wrapping the lot in another UpdatePanel will not fix this problem.

  • A quick note to readers of this post. If you're looking to create a file upload page that maintains the ajax interface and uploads files without a page refresh, take a look at this 'How Do I' video by Joe Stagner.
    www.asp.net/.../video-254.aspx

Comments have been disabled for this content.