How to get Base64 from ajax Post?

Question

I was trying to get the base64 post in my codebehind webmethod, but it seems like everytime I include the base64 I get an error : the server responded with a status of 500 (Internal Server Error) - it keeps on hitting the error function. The Post works with the other strings when the base64 is not inlcuded int the data that im passing.

function event_create() {
        alert("alert test : function works => onclick");

        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);
            };
        }


        var eventTitle = $("#eventTitle").val();
        var eventDesc = $("#eventDesc").val();
        var eventTimeStart = $("#eventTimeStart").val();
        var eventTimeEnd = $("#eventTimeEnd").val();
        var eventDateStart = $("#eventDateStart").val();
        var eventDateEnd = $("#eventDateEnd").val();
        var eventType = $("#eventType").val();
        var eventPlace = $("#eventPlace").val();
        var eventAttendee = document.getElementById("lblSelected").innerText;
        var userID = sessionStorage.getItem("userID");
        var imageBase64 = getBase64(document.getElementById('test').files[0]);

        var data = { 'eventTitle': eventTitle, 'eventDesc': eventDesc, 'eventPlace': eventPlace, 'eventType': eventType, 'eventAttendee': eventAttendee, 'userID': userID, 'imageBase64': imageBase64};
        $.ajax({
            type: "POST",
            async: true,
            contentType: "application/json; charset=utf-8",
            url: ".../../../../Operation/insert.aspx/createEvent",
            data: JSON.stringify(data),
            datatype: "json",
            success: function (result) {

                if (result.d <= 0) {
                    //false alert something 
                    alert("FALSE");
                }
                else if (result.d > 0) {
                    //true
                    alert(result.d);
                }
                else {
                    alert("sent but no call-back");
                }
                console.log(result);
            },
            error: function (xmlhttprequest, textstatus, errorthrown) {
                alert(" connection to the server failed ");
                console.log("error: " + errorthrown);
            }
        });

    }

Here's the Webmethod that will get the post

 [WebMethod(EnableSession = true)]
public static string createEvent(string eventTitle, string eventDesc, string eventPlace, string eventType, string eventAttendee, string userID, string imageBase64)
{
    String orgID = (String)HttpContext.Current.Session["orgID"];
    string response = orgID;


    string path = HttpContext.Current.Server.MapPath("~/Users/Organizer/organizerData/"); // de path


    //Check if directory exist
    if (!Directory.Exists(path))
    {
        Directory.CreateDirectory(path); //Create directory if it doesn't exist
    }


    string imageName = "event1" + ".jpg";// for instance

    //set the image path
    string imgPath = Path.Combine(path, imageName);

    byte[] imageBytes = Convert.FromBase64String(imageBase64);

    File.WriteAllBytes(imgPath, imageBytes); //write the file in the directory 


    return imageBase64;
}