AsyncFileUpload is not working inside Listview Insert, Edit Itemtemplate and EmptyData Template.
Above is my Client Side Functions
function AttachmentUploadSuccessful() {
debugger;
var textError = $(".AttachmentError").text();
if (textError.length > 0) {
var text = $(".AttachmentError");
text.innerText = text.textContent = textError;
sender._onError(textError); // it will raise the OnClientUploadError event
return;
} else {
//alert(" File attachment is uploaded successfully.");
//CODE TO REMOVE FILE AND BACKGROUND COLOR OF FILE UPLOADER
$('.ModelBackgroundforCreateItem').hide();
$('.PopupPanel').hide();
var UploadControls = $('#<%= FileUpload.ClientID %> :input');
UploadControls.each(function () {
//$(this).val("");
$(this).css('background-color', '#fff');
});
//Updating Update panel by clicking button
$(".RefreshList").click();
}
}
function AttachmentUploadFailed() {
alert("An error occured while uploading File Attachment. ");
}
Markup in .aspx file
<asp:ListView ID="ListView2" runat="server">
<EmptyDataTemplate>
<table class="fileUpload" runat="server" id="FileUploadID">
<tr>
<td>
<div style="width: 350px; overflow-x: hidden;">
<asp:AsyncFileUpload runat="server" ID="FileUpload" ThrobberID="Throbber" OnClientUploadError="AttachmentUploadFailed"
OnClientUploadComplete="AttachmentUploadSuccessful" UploaderStyle="Traditional" UploadingBackColor="" Style="display: inline-block; margin-top: 5px;"
OnUploadedComplete="FileUpload_UploadedComplete">
</asp:AsyncFileUpload>
</div>
</td>
<td style="width: 30px">
<asp:Image ID="Throbber" ImageUrl="~/Image/AttachmentLoading.gif" Style="display: None; width: 20px;" runat="server" />
<br />
</td>
</tr>
</table>
</EmptyDataTemplate>
</asp:ListView>
Trying to upload file Client side event OnClientUploadError
is getting called
Not able to understand why it is giving error.
same file upload on simple page and inside Update panel working but inside list-view it is giving client error.
Gone through above link issue not getting exact answer please help me out.
How to find Ajaxfileupload control inside Listview When in Editmode
AsyncFileUpload within EditItemTemplate of ListView
I can see two problems in the code you shared:
var UploadControls = $('#<%= FileUpload.ClientID %> :input')
ClientIDMode
property in your markup, so it's Inherit
These two problems have the same origin: you're using the AsyncFileUploader
inside a ListView
, so there will be more than one element in your page with the FileUpload
id.
So, firstly you must change the function declaration to:
function AttachmentUploadSuccessful(sender, e) { // then you can get the sender
And then, to get the the input
, you'll be using:
var UploadControls = $(sender._inputFile);
Finally, to fix the 2nd problem, you'll need to change the ClientIDMode
property to AutoID
, so the AsyncFileUploader
will be able to properly find its referenced client members.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With