I'm trying to make a web form to upload files to a server that processes them then returns them back to me to download.

I use the library Dropzone for a drag and drop UI, which uses ajax for that, so, my goal here is to download the files from inside the ajax success function.

The server sends the response as blob ? It looks like this:

{
  //...
  xhr: {
    //...
    status: 200,
    response: "����\u0000\u0010JFIF\u0000\u0001\u0001\u0000\u0000\u0001....",
    responseText: "����\u0000\u0010JFIF\u0000\u0001\u0001\u0000\u0000\u0001....",
    //...
  }
}

And the HTTP response headers are:

Content-Disposition: attachment; filename="photo.jpg"
Content-Type: image/jpeg

How can I download those files correctly?

After the files downloads they don't open, for instance, a jpg file gives me this error when I open it:

Error interpreting JPEG image file (Not a JPEG file: starts with 0xef 0xbf)

I tried to download them as file and also tried to convert them to blob following the answers on the question, but, I can't figure out what I'm doing wrong.

//this fails:
let file = new File([xhr.response], 'photo-processed.jpg', {type: 'image/jpeg'});
saveAs(file);

//this fails too:
let blob = new Blob([xhr.response], {type: 'image/jpeg'});
saveAs(blob, 'photo-processed.jpg');

//adding this didn't work either:
let downloadUrl = window.URL.createObjectURL(blob);
saveAs(downloadUrl, 'photo-processed.jpg');

What am I doing wrong?