Fileupload without refresh on the page?

Question

I realized it takes one refresh on the full page to get the file from the server side. I would have some way without refresh to perform this operation? I know it’s possible with Ajax, as it would be?

Answer 1

I managed using Ajax, I can’t remember where I got the tutorial more my code looked like this:

HTML:

 <form role="form" id="commentForm">
 <input type="file" id="uploadEditorImage" accept="image/*" />
 <button type="button" id="btnEnviar" data-loading-text="Enviando..." class="btn btn-primary">
   Enviar
 </button>
 </form>

Ajax:

$("#btnEnviar").click(function () { 
     var dataForm = new FormData($("#commentForm")[0]);
     var files = $("#uploadEditorImage").get(0).files;
     if (files.length > 0) {
            dataForm.append("HelpSectionImages", files[0]);
     }
     $.ajax({
         url: '@Url.RouteUrl(new { action = "EnviaArquivo", controller = "Home" })',
         type: "POST",
         processData: false,
         contentType: false,
         data: dataForm,
         success: function (response) {
                  console.log('sucesso');
                  console.log(response);    
                   },
         error: function (er) {
                  console.log('erro');
                  console.log(er);
         }
   });
});

Controller:

 [WebMethod]
 public string EnviaArquivo(FormCollection form)
 {           
     HttpPostedFile arquivo = System.Web.HttpContext.Current.Request.Files["HelpSectionImages"];
     string path = "~/img/fotosDepoimentos/";
     arquivo.SaveAs(Server.MapPath(path + arquivo.FileName));         
     return "Arquivo enviado com sucesso...";
 } 

Answer 2

The way I always recommend is using ajaxuploader, it is free and very easy to use.

note: not microsoft ajax

link to the project

http://ajaxuploader.com/default.htm

how to implement http://ajaxuploader.com/Deployment.htm

Answer 3

The problem is because an Asyncpostback is occurring, and to send the file must be a common Postback. So, just add a Postbacktrigger force the Updatepanel update.

Assuming there is a "Send" button inside the Updatepanel, try:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
      <ContentTemplate>
           <asp:FileUpload ID="FileUpload1" runat="server" />
      </ContentTemplate>
      <Triggers>
         <asp:PostBackTrigger ControlID="EnviarBtn" />
      </Triggers>
 </asp:UpdatePanel>

<asp:Button ID="EnviarBtn" runat="server" />

More information:

Fileupload Doesn’t Work When Nested In Updatepanel? C#

Difference between Postbacktrigger and Asyncpostbacktrigger