File Upload control without any upload button inside an Update panel not working RRS feed

  • Question

  • User945338570 posted


    I have asp file upload control without any upload button( i am doing upload at onchange event of file upload control) which is inside an update panel. At onchange event of file upload control a java script function is called where upload is done through a handler. When file upload control is outside update panel it is working but not when placed inside update panel.

    I have already googled for this but every where solution given when file upload control is accompanied with upload button but in my case the requirement is to upload file at onchange event of file upload control.


     <asp:FileUpload runat="server" ID="file_upload" AllowMultiple="true" onchange="onupload();" TabIndex="7" CssClass="btn-default" />

    Javascript function to upload file:

     function onupload() {
                $(function () {
                    var fileUpload = $('#<%=file_upload.ClientID%>').get(0);
                    var fileType = document.getElementById('<%=hfTemplateType.ClientID%>').value;
                    var templateId = document.getElementById('hftemplateid').value;
                    var files = fileUpload.files;
                    var test = new FormData();
                    for (var i = 0; i < files.length; i++) {
                        test.append(files[i].name, files[i]);
                        url: "../UploadFile.ashx?type=" + fileType + "&templateId=" + templateId,
                        type: "POST",
                        contentType: false,
                        processData: false,
                        data: test,
                        success: function (result) {
                            var masterTable = $find("<%= rgdAttachments.ClientID %>").get_masterTableView();
                            if (result.trim().length > 0) {
                                document.getElementById('<%=hfUploadedFilesPath.ClientID%>').value = result;
                                //  OnbuttonClient();
                            } else {
                                document.getElementById('<%=hfUploadedFilesPath.ClientID%>').value = result;
                                alert("No path returned!");
                        error: function (err) {
                            alert("ERROR:" + err.statusText);

    Friday, August 18, 2017 10:18 AM

All replies

  • User475983607 posted

    Why do you have an update panel when you are using JQuery AJAX?   What purpose does the update panel provide ion this design?  If file uploads works outside the update panel then what is wrong with that solution?  It is still using AJAX and partial page updates, correct?

    Friday, August 18, 2017 11:15 AM
  • User945338570 posted

    There is a radio button list with autopostback to true and OnSelectedIndexChanged the some fields on page hides and some are shown, this file upload control is part of the form so to prevent full page postback I am using update panel. No, when file upload control is placed inside the update panel the javascript function is not getting executed at onchange event.

    Friday, August 18, 2017 11:47 AM
  • User475983607 posted

    No, when file upload control is placed inside the update panel the javascript function is not getting executed at onchange event.

    I suspect the update panel is overwriting the DOM with new content.  The new content is not wired to the event handler.  There is not enough source code to make a determination. Have you tried debugging using dev tools?

    Again, why are you using an update panel and AJAX at the same time?  Perhaps you need to look into a different design approach.

    Friday, August 18, 2017 11:53 AM