Reading get response with TIFF file in JavaScript

Question

I am developing a web-application where I try to display TIFF file requested from a server. I use this approach to display a TIFF file, but I need to get an image from a server via a GET request instead of opening the file from a local computer.

On the server side I am using a Spark-Java framework to send a response. This is the Java code for that purpose:

get("tiff", (request, response) -> {
        byte[] bytes = Files.readAllBytes(Paths.get("temp/201600004068.tif"));
        HttpServletResponse raw = response.raw();
        raw.setContentType("image/tiff");
        raw.getOutputStream().write(bytes);
        raw.getOutputStream().flush();
        raw.getOutputStream().close();
        return raw;
    });

I can't figure out how to handle the response (input stream in response) in JavaScript to read the file with FileReader().

$.get( "/tiff", function( data ) {
  var parentEl = $(this).parent();
  var fr = new FileReader();
  fr.onload = function(e) {
  //Using tiff.min.js library - https://github.com/seikichi/tiff.js/tree/master
  console.debug("Parsing TIFF image...");
  //initialize with 100MB for large files
  Tiff.initialize({
    TOTAL_MEMORY: 100000000
  });
  var tiff = new Tiff({
    buffer: e.target.result
  });
  var tiffCanvas = tiff.toCanvas();
  $(tiffCanvas).css({
    "max-width": "1000000px",
    "width": "100%",
    "height": "auto",
    "display": "block",
    "padding-top": "10px"
  }).addClass("preview");
  $(parentEl).append(tiffCanvas);
}

fr.onloadend = function(e) {
  console.debug("Load End");
}
  fr.readAsArrayBuffer(data);      });

When I try to put the response directly into fr.readAsArrayBuffer(data); I got an error Failed to execute 'readAsArrayBuffer' on 'FileReader': parameter 1 is not of type 'Blob'.

When I try to create a Blob based on the response

var blob = new Blob([data], {type: 'image/tiff'});
  fr.readAsArrayBuffer(blob);

it's not able to parse TIFF file.

My response looks like this:

and I don't understand the meaning of that response.

So how do I retrieve the file from this response?

Thanks for any help!

Answer 1

Based on the Sandeep's answer I managed to achieve my question's goal. It's possible to use XMLHttpRequest() in order to read server's raw response instead of reading from a source folder.

So, request image from javaScript:

var xhr = new XMLHttpRequest();
xhr.responseType = 'arraybuffer';

xhr.open('get', "/image?imageName=" + imageName);
xhr.onload = function ( e ) {
    Tiff.initialize({
        TOTAL_MEMORY: 100000000
    });
    var tiff = new Tiff({
        buffer: arrayBuffer
    });

    *//...Any manipulation with tiff file*
};
xhr.send();

Handling request on the server side and return raw response:

get("/image", (request, response) -> {
    String imageName = request.queryParams("imageName");
    response.raw().setContentType("image/tiff");
    response.raw().setHeader("Content-Disposition","attachment; filename=image.tiff");
    Path path = Paths.get(IMAGE_DESTINATION + "/" + imageName);
    byte[] data = null;
    try {
        data = Files.readAllBytes(path);
    } catch (Exception e) {
        e.printStackTrace();
    }
    OutputStream out = response.raw().getOutputStream();
    out.write(data);
    out.flush();
    out.close();
    return response.raw();
});