Correct content-type for sending this AJAX Post da

Question

I am having problem sending base64 image data using ajax post I think I have the wrong value for Content-Type but have tried application/json, text/json and image/jpeg without any success

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

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 outputs

Received artwork
ReadParms

Updated to Send as Form 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's 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 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 its outputs

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

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

ReadParms

So I'm now getting the data but I don't understand really understand how to parse the Content-Disposition part in Java.

This code wasn't originally written by me, as you can see the FormData is constructed it doesnt come from an actual form. My first attempt was to try and extract from FormData and send in different way, an alternative would be to not store in FormData in the first place but dont know how to do this.

Update 2 Tried just sending first url rather than formdata or an arrya of urls, because actually there is only ever one url.But it just doesnt work, nothing received by server ?

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

You are trying to view data in the body using queryParams(), which will give you the query params that are located in the url.

Load data from the request body using body().