Render thumbnail in Angular4

Question

I am trying to render an image which I got from a Java service as InputStream, re-send it through NodeJS Express server and finally render it in Angular4

Here's what I do:

Java Jersey service:

@GET
@Path("thumbnail")
@ApiOperation(
        value = "Gets document preview",
        notes = "Gets document preview"
)
@ApiResponses(value = {
        @ApiResponse(code = 200, message = "Preview of the document")
})
@Consumes(MediaType.MULTIPART_FORM_DATA)
@Produces("image/png")
public Response getDocThumbnail(
        @ApiParam(value = "Entity UUID", required = true) @FormDataParam("uuid") String uuid
) throws RepositoryException, UnknowException, WebserviceException, PathNotFoundException, DatabaseException, AutomationException, AccessDeniedException, ConversionException, IOException {
    RawDocument rawDocument = docCtrl.getDocThumbnail(uuid);
    return Response
            .ok(rawDocument.getInputStream(), "image/png")
            .header("Content-Disposition", "attachment; filename=\" " + rawDocument.getName() + "\"")
            .build();
}

the controller looks like:

public RawDocument getDocThumbnail(String uuid) throws IOException, AccessDeniedException, PathNotFoundException, WebserviceException, RepositoryException, DatabaseException, ConversionException, AutomationException, UnknowException {
    return new RawDocument(
            okmWebSrv.getOkmService().getThumbnail(uuid, ThumbnailType.THUMBNAIL_LIGHTBOX),
            "whatever"
    );
}

Basically it's call to OpenKM SDK to retreive document's thumbnail

This Java endpoint is called from NodeJS Express 4.15 that is pre-processing some requests for this Java backend. Here's what I do:

...compose request options...    
const vedica_res = await rp(options);

let buffered = new Buffer(vedica_res, 'binary');
res.writeHead(200, {
    'Content-Type': 'image/png',
    'Content-disposition': 'attachment;filename=' + 'thumb.png',
    'Content-Length': buffered.length
});

return res.end(buffered, 'binary');

Finally with Angular4 being the initiator of this roundtrip I am trying to render the image like so:

this.rest.send('http://localhost:4200/vedica/api/document/thumbnail', RequestMethod.Get,
        {uuid: '19516ea1-657e-4b21-8564-0cb87f29b064'}, true).subscribe(img => {
        // this.preview = img
        var urlCreator = window.URL;
        var url = urlCreator.createObjectURL(img);
        this.thumb.nativeElement.src = url;
    })

The 'img' received is a Blob {size: 81515, type: "image/png"}. Console shows no errors but renders no image in the <img #thumb/> tag. But I can see that it sets the src=blob:http%3A//localhost%3A3000/4cf847d5-5af3-4c5a-acbc-0201e60efdb7 for it. Image just has a broken image icon. When I try to read a cached response in a new tab, its accessible but renders nothing again.

Can you point out what I'm doing wrong? Have tried a lot, but no luck.

score 0 · Answer 1 · answered Jun 17 '17 at 09:05

0

I think the problem is not the stream is closed early, the problem I think will be in the way is downloaded, take a look here: https://docs.openkm.com/kcenter/view/sdk4j-1.1/document-samples.html#getContent

From the server side ( inde middle between OpenKM and your user interface ) the problem usualy is:

//response.setContentLength(is.available()); // Cause a bug, because at this point InputStream still has not its real size.

And you should use

response.setContentLength(new Long(doc.getActualVersion().getSize()).intValue());

answered Jun 17 '17 at 09:05

darkman97i

170
7

I'm really not sure how to fit this into my context, sorry – greengold Jun 28 '17 at 12:25
I do not know exactly how doing with Angular, but with standard servlet the issue we had, was solved as I explained. Seems the stream stops reading, I do not know if the variable buffered.length have some influence on it. I suggest before flush the output stream, try a step in the middle, for example save image into the file system and check if it goes right ... later try to flush in a single step. – darkman97i Jun 29 '17 at 14:27

score 0 · Accepted Answer · answered Jul 03 '17 at 10:10

0

resolved this by replacing request-promise with bare request package for making this request to the java BE and piping reply right into the wrapping response of the angular FE:

let reply = request(options);
reply.pipe(res);

answered Jul 03 '17 at 10:10

greengold

1,184
3
18
43

Render thumbnail in Angular4

2 Answers2