Nhipster blob entity generator issue front angular

[Toysurusse]

Overview of the issue

How to fix Blob front Angular view issue ?

Motivation for or Use Case

When you use nhipster entity generator with an angular front. Angular can't render the image of the blob after beeing storage in database.

Reproduce the error

use nhipster entity generator and you will have issue to view blob from backend.

Suggest a Fix

when the service nest get the blob image from the server, the image is convert in an buffer of hexadecimal. So I had to fix the service to add a converter hexaToString like the following function :
const blob = roadMap.image.toString('hex');
var result = '';
for (var i = 0; i < blob.length; i = i + 2) {
var decval = parseInt(blob.substr(i, 2), 16);
result = result + String.fromCharCode(decval);
}

JHipster Version(s)

last version

JHipster configuration

nhipster

[mraible]

@Toysurusse Can you please create a PR to fix this? I'll add a bug bounty for extra motivation. :)

[Toysurusse]

Ok perfect, I can prepare it for you. I've never worked on generator part of nhipster ; but I will make a PR and assign it to you when it should be done :)

[ghost]

Hi @Toysurusse, thanks for the interest!! But if the issue is related to NHipster server generator, could you open this in the related repo?
Otherwise if the issue is for angular client, the fix shuld be done in this repo (in case the code fix also the same issue for the official jhipster generator without nhipster generation).

@mraible could you remove the bug bounty tag here and add it in the new issue created in case of mirror issue?

Thanks a lot.

[mraible]

@amanganiello90 I removed. Please let me know if there's a new issue to add it to.

[ghost]

@Toysurusse your suggested PR is related only how the nodejs backend retrieve the blob? So the normal jhipster app does not have this issue? In this case you have to open an issue in the nhipster repository and fix the related template (if it is an angular template you have to overwrite the default jhipster adding the custom file in the https://github.com/jhipster/generator-jhipster-nodejs/tree/master/generators/client/templates/angular folder)

[ghost]

@Toysurusse any news? Could I help you? Is it a issue only for NHipster? if it is that, could you open a ticket in the related repo in order to support the process and the development? Thanks.

[github-actions]

This issue is stale because it has been open 30 days with no activity.
Our core developers tend to be more verbose on denying. If there is no negative comment, possibly this feature will be accepted.
We are accepting PRs 😃.
Comment or this will be closed in 7 days

[ghost]

@Toysurusse your suggested PR is related only how the nodejs backend retrieve the blob? So the normal jhipster app does not have this issue? In this case you have to open an issue in the nhipster repository and fix the related template (if it is an angular template you have to overwrite the default jhipster adding the custom file in the https://github.com/jhipster/generator-jhipster-nodejs/tree/master/generators/client/templates/angular folder)

@Toysurusse ??

[avdev4j]

@amanganiello90 I have moved this ticket to the proper repository ;)

[ghost]

Thanks.

[jlopezjuy]

Overview of the issue

How to fix Blob front Angular view issue ?

Motivation for or Use Case

When you use nhipster entity generator with an angular front. Angular can't render the image of the blob after beeing storage in database.

Reproduce the error

use nhipster entity generator and you will have issue to view blob from backend.

Suggest a Fix

when the service nest get the blob image from the server, the image is convert in an buffer of hexadecimal. So I had to fix the service to add a converter hexaToString like the following function :
const blob = roadMap.image.toString('hex');
var result = '';
for (var i = 0; i < blob.length; i = i + 2) {
var decval = parseInt(blob.substr(i, 2), 16);
result = result + String.fromCharCode(decval);
}

JHipster Version(s)

last version

JHipster configuration

nhipster

I have same error, because nest with typeor get the blob file from database on BUFFER type. and this sugested fix only work on determinates files. im using files.

@column({ type: 'blob', name: 'documento', nullable: true })
documento: any;

@column({ name: 'documento_content_type', nullable: true })
documentoContentType: string;

on mi service:

const blob = gestion.documento.toString('hex');
var result = '';
for (var i = 0; i < blob.length; i = i + 2) {
var decval = parseInt(blob.substr(i, 2), 16);
result = result + String.fromCharCode(decval);
}
console.log(result);
gestion.documento = result;
docuFiltered.push(gestion);

[ghost]

@jlopezjuy thanks for the response, but I don't understand very well your message. You are saying, that the fix suggested do not resolve the angular blob issue?

[jlopezjuy]

@jlopezjuy thanks for the response, but I don't understand very well your message. You are saying, that the fix suggested do not resolve the angular blob issue?

yes, if i use blop to sabe pdf or other file type, the solution not work.

[ghost]

@jlopezjuy thanks for the response, but I don't understand very well your message. You are saying, that the fix suggested do not resolve the angular blob issue?

yes, if i use blop to sabe pdf or other file type, the solution not work.

But @Toysurusse suggests that fix resolved the blob issue. So I don't understand :(

[jlopezjuy]

maybe the solution work only with images... not with files...

[ghost]

Ahh ok, you say that if the blob is an image the fix works, instead if the blob is a generic file (for example a .txt) it does not work. Right?

[jlopezjuy]

yes

[jlopezjuy]

i was tested with diferent pdf and other files.

[ghost]

@jlopezjuy thanks. Have you some suggestions to fix in order to work with every blob type?

[jlopezjuy]

On java jhipster app this work ok because spring return blob into base64, typorm return Buffer... maybe thats is the problem...

@jlopezjuy thanks. Have you some suggestions to fix in order to work with every blob type?

mmm not yet, I keep trying to solve the bug, because I need a project that works with pdf

[jlopezjuy]

Hi folks... i have worked on proyect last mont and one coworker solve this problem with this code:

  getDocumentoById(idNumber: number) {
    this._documentosServices.getDocumentosById(idNumber).subscribe(docData => {
      const typedata = docData.data.VirtualPath;
      const filebuffer = docData.data.File['data'];
      this.previewFile(filebuffer, typedata);
    });
  }

  previewFile(data: any, dataType: string) {
    const u8 = new Uint8Array(data);
    const decoder = new TextDecoder('utf8');
    const b64encoded = btoa(decoder.decode(u8));

    const bin = atob(b64encoded);
    const tab = window.open();
    const obj = tab.document.createElement('object');

    obj.style.width = '100%';
    obj.style.height = '842pt';
    obj.type = dataType;
    obj.data = 'data:' + dataType + ';base64,' + bin;
    tab.document.body.appendChild(obj);
  }

getDocumentoById call this endpoint on nestjs

  @Get('documentoById/:id')
  @ApiBearerAuth()
  @ApiOperation({ summary: 'Servicio que devuelve un Documento por Id' })
  async getDocumentoById(@Param('id') id: number) {
    const data = await this.fileManagerService.getDocumento(id);
    return { data };
  }

and entity use this attributes.

 @Column({
    name: 'File',
    type: 'bytea',
    nullable: false,
  })
  File: Buffer;

  @Column({
    name: 'FileLargeObject',
    type: 'bytea',
    nullable: false,
  })
  FileLargeObject: Buffer;

  @Column()
  VirtualPath: string;

For now just calling getDocumentoById method open pdf or download other file types.

I'll try this option today or tomorrow...