AsyncFileUpload Inside Listview Insert, Edit Itemt

Question

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

Answer 1

I can see two problems in the code you shared:

1. That line of code: var UploadControls = $('#<%= FileUpload.ClientID %> :input')
2. And you doesn't have a 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.