How to send webform with a file to webmethod using jquery / ajax?

Question

Is it possible? I have a web form with specific text fields, etc. And the file upload element. I am trying to send data to webmethod using .ajax() method. It seems to me that in this way it is not possible to send the contents of a file to a web method. I can’t even hit the web method.

 script type="text/javascript"> var btn; var span; $(document).ready(function (e) { $('#btnsave').on('click', function (event) { Submit(); event.preventDefault(); }); }) function Submit() { $.ajax({ type: "POST", url: "SupplierMst.aspx/RegisterSupplier", data: "{'file' : " + btoa(document.getElementById("myFile").value) + ",'biddername':" + document.getElementById("txtsuppliername").value + "}", async: true, contentType: "application/json; charset=utf-8", success: function (data, status) { console.log("CallWM"); alert(data.d); }, failure: function (data) { alert(data.d); }, error: function (data) { alert(data.d); } }); } </script> 

HTML:

 <input id="txtsuppliername" type="text" /><br /> <input type="file" id="myFile"> 

Code behind:

 [WebMethod] public static string RegisterSupplier(string file, string biddername) { // break point not hit return "a"; } 

I have been trying to find a solution for this in a few hours. Nobody seems to be able to help me. Is this possible with this approach. If not, how to do it? Someone suggested that I should try to imagine a whole form instead of passing individual values.

Answer 1

This can be done without any library using the JavaScript FileReader API . With its help, modern browsers can read the contents of the file using JavaScript as soon as it was selected by the user, and then you can act like you were (encoding it as a string and sending it to the server).

The code will be like this (using the above as a reference):

 // NEW CODE // set up the FileReader and the variable that will hold the file content var reader = new FileReader(); var fileContent = ""; // when the file is passed to the FileReader, store its content in a variable reader.onload = function(e) { fileContent = reader.result; // for testing purposes, show content of the file on console console.log("The file content is: " + fileContent); } // Read the content of the file each time that the user selects one document.getElementById("myFile").addEventListener("change", function(e) { var selectedFile = document.getElementById('myFile').files[0]; reader.readAsText(selectedFile); }) // END NEW CODE var btn; var span; $(document).ready(function (e) { $('#btnsave').on('click', function (event) { Submit(); event.preventDefault(); }); }) function Submit() { $.ajax({ type: "POST", url: "SupplierMst.aspx/RegisterSupplier", // changed this line too! data: { 'file': btoa(fileContent), 'biddername': document.getElementById("txtsuppliername").value }, async: true, contentType: "application/json; charset=utf-8", success: function (data, status) { console.log("CallWM"); alert(data.d); }, failure: function (data) { alert(data.d); }, error: function (data) { alert(data.d); } }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input id="txtsuppliername" type="text" /><br /> <input type="file" id="myFile"> 

You can run the code above, select a file (use a regular text file for testing, so that it is readable) and check the console to view its contents. Then the rest of the code will be the same (I made a small change to fix the parameters in the AJAX call).

Please note that sending such a file has limitations: if you use the GET method, you will have a shorter parameter size, and with POST it will depend on the server settings ... but I think that you had these restrictions even for the file.

Answer 2

First of all, go to App_Start → RouteConfig.cs → settings.AutoRedirectMode = RedirectMode.Off; and then just replace your function with my code, this will definitely work for you, Good luck ..

 function Submit() { $.ajax({ type: "POST", url: "UploadImage.aspx/RegisterSupplier", data: "{'file' : " + JSON.stringify(document.getElementById("myFile").value) + ",'biddername':" + JSON.stringify(document.getElementById("txtsuppliername").value) + "}", async: true, contentType: "application/json; charset=utf-8", success: function (data, status) { console.log("CallWM"); alert(data.d); }, failure: function (data) { alert(data.d); }, error: function (data) { alert(data.d); } });