how to send file along with some input strings to a webmethod in Codebehind using json Ajax?

Question

So I have this form that requires the user to fill-up some texts in inputbox, file(eg.docx,pdf etc) and Image (eg.jpg,png etc.), then all data will be send to [Webmethod] in codebehind -and do some process.. Ived successfully implemented the Strings from input box (eg.Title,Discription etc.) using json/ajax request.. and the only thing that got me stuck was the file to be passed through json and be recieved by codebehind.. Any help or suggestions will indeed be appreciated

$.ajax({
    type: "POST",
    url: "insert.aspx/eventCreate",
    data: {
        'eventImage': eventImage,//here's the image
        'eventFile': eventFile, //here's the file
        'eventTitle': eventTitle,
        'eventDesc': eventDesc,
        'eventPlace': eventPlace,
        'eventType': eventType,
        'eventAttendee': eventAttendee,
        'userID': userID
    },
    async: true,
    contentType: "application/json; charset=utf-8",
    success: function (data, status) {
        console.log("Call successfull test");
        alert(data.d);
    },
    failure: function (data) {
        alert(data.d);
    },
    error: function (data) {
        alert(data.d);
    }
});

[WebMethod(EnableSession = true)]
public static string eventCreate(string eventTitle, string eventDesc, string eventPlace, string eventType, string eventAttendee, string UserID)
{
    //how do I get the Image and file from the request??


    return "0";
}

Answer 1

Sorry just noticed that you are using 'WebMethod'.

You could post your file as base64 string and receive the same in your WebMethod, and convert the base64 back to file in your WebMethod.

please follow the link how-to-convert-file-to-base64-in-javascript to convert file to base64.

and the link base64-encoded-string-to-file to convert base64 back to file in your webmethod.

function getBase64(file) {
   var reader = new FileReader();
   reader.readAsDataURL(file);
   reader.onload = function () {
     console.log(reader.result);
   };
   reader.onerror = function (error) {
     console.log('Error: ', error);
   };
}

$.ajax({
    type: "POST",
    url: "insert.aspx/eventCreate",
    data: {
        'eventImage': eventImage,//here's the image
        'eventFile': eventFile, //here's the file
        'eventTitle': eventTitle,
        'eventDesc': eventDesc,
        'eventPlace': eventPlace,
        'eventType': eventType,
        'eventAttendee': eventAttendee,
        'userID': userID,
        'fileBase64': getBase64(document.getElementById('fileUploadId').files[0])
    },
    async: true,
    contentType: "application/json; charset=utf-8",
    success: function (data, status) {
        console.log("Call successfull test");
        alert(data.d);
    },
    failure: function (data) {
        alert(data.d);
    },
    error: function (data) {
        alert(data.d);
    }
});

[WebMethod(EnableSession = true)]
public static string eventCreate(string eventTitle, string eventDesc, string eventPlace, string eventType, string eventAttendee, string UserID, string fileBase64)
{
    //how do I get the Image and file from the request??
    File.WriteAllBytes(@"c:\yourfile", Convert.FromBase64String(fileBase64));


    return "0";
}