Request Entity Too Large when sending data using AJAX to WCF service (wsHttpBinding)

Question

I'm using the FileReader object in JavaScript to convert a PDF file (no more than 2 pages with only text) to a base64 string and then transferring the string to my server (WCF) via simply an AJAX request. But I'm getting the following error:

413 Request Entity Too Large

So my Javascript+JQuery is as follows:

function upload() {

    var file = document.getElementById("inputFile").files[0];

    var fr = new FileReader();
    fr.onload = function () {
        var binaryString = this.result;

        var objUploader = {
            element: {
                Name: "example",
                Document: binaryString.split("base64,")[1]
            }
        };

        $.ajax({
            url: "http://localhost/Uploader/ServiceUploader.svc/saveDocument",
            data: JSON.stringify(objUploader),
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=uft-8",
            success: function (data) {...},
            error: function (xhr, status, error) {...}
        });

    };

    fr.readAsDataURL(file);
}

In my WCF web.config I have this:

<wsHttpBinding>
        <binding closeTimeout="00:50:00" openTimeout="00:50:00" receiveTimeout="00:50:00"
        sendTimeout="00:50:00"
        maxBufferPoolSize="2147483647" maxReceivedMessageSize="2147483647">
          <readerQuotas maxDepth="64" maxStringContentLength="2147483647" maxArrayLength="2147483647"
              maxBytesPerRead="2147483647" maxNameTableCharCount="2147483647"  />
          <security mode="None"/>
        </binding>
 </wsHttpBinding>

Does any one know how can I resolve this?. Thank you so much!!