asp.nettwitter-bootstrapbootstrap-4asp.net-ajaxasyncfileupload

Bootstrap file upload not working with ASP Ajax AsyncFileUpload

So I am having an issue on my ASP web form, where I am using Bootstrap and trying to make use of the Ajax AsyncFileUpload control. The file upload control looks like this:

<div id="LoafFileUploadTemplate" class="custom-file">
    <asp:AsyncFileUpload ID="LoafFileUpload" runat="server" ClientIDMode="Static" CssClass="custom-file-input file-upload" enctype="multipart/form-data" method="post" OnClientUploadStarted="Loaf_UploadStarted" OnClientUploadComplete="Loaf_UploadComplete" OnUploadedComplete="LoafFileUpload_UploadedComplete" />
    <label class="custom-file-label">Choose File</label>
</div>
<asp:Button ID="LoafFileUploadComplete" runat="server" ClientIDMode="Static" CssClass="d-none" OnClick="LoafFileUploadComplete_Click" />

For some reason the LoafFileUpload_UploadedComplete method didn't fire when the uploader was finished. I've read that I need to add enctype="multipart/form-data" method="post" to the file input. I have done that, but still doesn't work. Turns out the way bootstrap renders the AsyncFileUpload control, these two attributes get applied to a div instead of the file upload control, as seen below:

<div id="LoafFileUploadTemplate" class="custom-file">
<div id="LoafFileUpload" class="custom-file-input file-upload" enctype="multipart/form-data" method="post">
    <input type="hidden" name="ctl00$CPH_main$CsatoltFajlok$LoafFileUpload$ctl00"><div><input name="ctl00$CPH_main$CsatoltFajlok$LoafFileUpload$ctl02" type="file" id="ctl00_CPH_main_CsatoltFajlok_LoafFileUpload_ctl02" style="" size="20"></div>
</div>
<label class="custom-file-label">Fájl feltöltése</label>
</div>
</div>
<input type="submit" name="ctl00$CPH_main$CsatoltFajlok$LoafFileUploadComplete" value="" id="LoafFileUploadComplete" class="d-none">

So as seen here, the enctype="multipart/form-data" method="post" attributes are applied onto the div containing the file input, not the input itself. Because of this, the file doesn't get posted to the server. Anyones know a fix for this?

Solution

  • Turns out I didn't need to add enctype="multipart/form-data" method="post" to the file input, but to the form itself (in my case, in the master page). It works now.