Estoy tratando de crear un formulario web para cargar archivos en un servidor que los procesa y luego me los devuelve para descargarlos.

Uso la biblioteca Dropzone para una interfaz de usuario de arrastrar y soltar, que usa ajax para eso, por lo tanto, mi objetivo aquí es descargar los archivos desde dentro de la función de éxito de ajax.

El servidor envía la respuesta como blob? Se parece a esto:

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

Y los encabezados de respuesta HTTP son:

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

¿Cómo puedo descargar esos archivos correctamente?

Después de que los archivos se descargan, no se abren, por ejemplo, un archivo jpg me da este error cuando lo abro:

Error al interpretar el archivo de imagen JPEG (No es un archivo JPEG: comienza con 0xef 0xbf)

Traté de descargarlos como file y también traté de convertirlos en blob siguiendo las respuestas a la pregunta , pero no puedo entender qué estoy haciendo mal.

 //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');

¿Qué estoy haciendo mal?