9

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

5
  • Are you doing anything in FileUpload_UploadedComplete Sep 29, 2015 at 11:44
  • Yes . I am making database call to save the attachment and taking attachment id and storing it on page which will be used at the time of submitting the from .
    – Liquid
    Sep 29, 2015 at 13:22
  • does it have to be in an update panel?? i know the normal upload control wouldn't work but you said this one does. wondering. i've never used the AsyncFileUpload.
    – wazz
    Oct 2, 2015 at 18:28
  • no need of update panel this async file upload control is already having update panel so there is no point of adding one more update panel as per my knowledge.
    – Liquid
    Oct 4, 2015 at 7:19
  • @Liquid answered your question :)
    – Buzinas
    Oct 5, 2015 at 1:40

1 Answer 1

2
+50

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.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.