The correct content type for sending AJAX Post data

Question

I had a problem sending base64 image data using ajax message I think I have the wrong value for Content-Type, but I have not tried the application / json, text / json and image / jpeg.

Javascript

  function sendFormData(fD)
    {
        var urls = fD.get('urls');
        console.log('urls', urls);

        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/editsongs.update_artwork');
        alert(urls);
        xhr.setRequestHeader("Content-type", "image/jpeg");
        xhr.send(urls);
    }

The browser console shows

["data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxMTEhUTExMWFhUXGRgbGBgXGR0aGRgXHRgYFx4YGxkYHiogGh4lGxgdIjEhJSkrLi4uGh8zODMtNygtLisBCgoKDg0OGhAQGy0lHSUtLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLf/AABEIANEA8QMBIgACEQEDEQH/xAAcAAACAgMBAQAAAAAAAAAAAAAEBQMGAAECBwj/xABGEAACAQIEBAQDBAUJCAIDAAABAhEDIQAEEjEFIkFREzJhcQaBkRRCobEjUsHh8AcVM2JygsLR8RZDRFNzg5KyJDSzw8T/xAAZAQADAQEBAAAAAAAAAAAAAAABAgMABAX/xAAqEQACAgEDBQACAQQDAAAAAAAAAQIRAxIhMQQTFEFRImGRYnGh8AUjMv/aAAwDAQACEQMRAD8AsoosJt9cSpSdeYKYEXxKlQs4E2kEx6dMWJFBEDr0OPey5nCrR58MalwJUpB1nENbJWthpTyQDG5H5Y0gGqNQOJLLXA7h9K9VypGITSPbD+tSGIFy4mSJx0xz7EXjE7UscacNamW30jAlbLsNxiscqZNwoCK4wDEzJjkLiuoQjGNEYnCY5ZcawkMY5bEkY5GGsUijG1XtjcYPyFAQWMbbdsac9Ks0Y2wQphlwTKLUZg2wAwFmq8m5HYY5HFTRph0VnBI1QDZZgsZGwEnHPmn/ANb+lMcVqLFWRafKMTU+L6bRb88V/LcY+0otQKVmbdcbq1wsSYkgDfc7C3fHIoRlDVIs5tSpFzyXEtcdCdvlhopwp4RSpwvcAf64bj0x5mbSpUjrhdbmicSU1xi08djEWylGRjRGOsC5uodl379sBK2F8HbMAJxUON5lqrQFMA4f1CVU62ke2FaZlWqXgAbepx29MtD1VZzZXaol4RwYKsuAWP4…

Java Server Code

public String updateArtwork(Request request, Response response)
    {
        System.out.println("Received artwork");

        for(String s:request.queryParams())
        {
            System.out.println("---"+s);
        }
        System.out.println("ReadParms");
        return "";
    }

just prints

Received artwork
ReadParms

Updated to submit as forms instead

// Once we got everything, time to retrieve our objects
function sendData()
{
    var fD = new FormData();

    // send Files data directly
    var files = imgList.filter(
        function isFile(obj)
        {
            return obj.type === 'file';
        }
    );

    files.forEach(
        function appendToFD(obj)
        {
            fD.append('files[]', obj.file);
        }
    );

    // for elems, we will need to grab the data from the server
    var elems = imgList.filter(
        function isElem(obj)
        {
            return obj.type === "element";
        }
    );

    var urls = elems.map(
        function grabURL(obj)
        {
            return obj.element.src;
        }
    );

    if (urls.length)
        fD.append('urls', JSON.stringify(urls));

    sendFormData(fD);
};

    function sendFormData(fD)
    {
        // but here we will just log the formData content
        var files = fD.getAll('files[]');
        console.log('files: ', files);
        var urls = fD.get('urls');
        console.log('urls', urls);

        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/editsongs.update_artwork');
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.send(fD);
    }

then on the server I have

 public String updateArtwork(Request request, Response response)
    {
        System.out.println("Received artwork");

        for(String s:request.queryParams())
        {
            System.out.println("***"+s);
            System.out.println(request.queryParams(s));
        }
        System.out.println("ReadParms");
        return "";
    }

and his exits

    Received artwork
    ***-----------------------------330219842643
    Content-Disposition: form-data; name
    "urls"

    ["data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxMSEhUSExIWFhUXFxgXGBcYFRgXFxkdGBcWGBgYFx0YHSggHR0lHRkYITEhJSkrLi4uFyA1ODMtNygtLisBCgoKDg0OFQ8PFSsZFRkrLSstLSstKysrLS03KystLSstKy03LSstLSstNzc3KysrLS0tKysrKysrKysrKysrK//AABEIAKoBKQMBIgACEQEDEQH...."]
    -----------------------------330219842643--

ReadParms

So now I get the data, but I don’t understand if I really understand how to parse the Content-Disposition part in Java.

, , FormData , . , FormData -, FormData , , .

2 url, formdata arrya URL-, url.But , ?

function sendFormData(urls)
{
    console.log('urls', urls[0]);
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/editsongs.update_artwork');
    xhr.setRequestHeader("Content-type", "text/json");
    alert(JSON.stringify(urls[0]));
    xhr.send(JSON.stringify(urls[0]));
}

Answer 1

queryParams(), , URL-.

body().