Upload PDF as base64 file to the server using AJAX

Question

Say I want to upload the following information to a server:

var info = {
    name: "John",
    age: 30,
    resume: resume.pdf  // base64 String
};

My AJAX call might look something like this:

$.ajax({
    url: "http://example.com",
    type: "POST",
    dataType: "JSON",
    data: info,
    success: function (response){
        // do something
    }
});

My question is how to modify an AJAX call to upload the resume.pdf file (resume property) as base64 String to the server?

Solution

I still really don't understand why you'd want to do it this way, but if you must... FileReader Browser Support.

HTML

<form>
  <input type="file" name="file" id="resume">
  <input type="submit">
</form>

Javascript

$('form').on('submit', function (e) {
    e.preventDefault();

    var reader = new FileReader(),
        file = $('#resume')[0];

    if (!file.files.length) {
        alert('no file uploaded');
        return false;
    }

    reader.onload = function () {
        var data = reader.result,
            base64 = data.replace(/^[^,]*,/, ''),
            info = {
                name: "John",
                age: 30,
                resume: base64 //either leave this `basae64` or make it `data` if you want to leave the `data:application/pdf;base64,` at the start
            };

        $.ajax({
            url: "http://example.com",
            type: "POST",
            dataType: "JSON",
            data: info,
            success: function (response) {}
        });
    };

    reader.readAsDataURL(file.files[0]);
});

Comments

[Lior Elrom]

An API requirement is to upload a local PDF file as base64. Can you change your code so it will read an existing pdf file from the server instead from a user form?

[Adam Merrifield]

@Lior so you want to pull a PDF file off a user's local system, turn it into base64, and sent it to a server? Without user interaction (like having an input file for the user to select which file they want to upload) this is not possible. I hope you can see and understand the security vulnerability in this idea.

[user2173353]

Thanks for this. Modern frameworks like Angular work best with JSON as far as I see. Handling other types of requests seems to create a code-mess. Certainly this is not the best way in terms of performance, but this should have been thought by the people designing the web standards. Devs should not go back to the stone age just because people refuse to slay sacred standard-cows of theirs (or extend them in a reasonable manner). I know.. I want too much..