Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Nhipster blob entity generator issue front angular #201

Open
Toysurusse opened this issue Oct 7, 2020 · 21 comments
Open

Nhipster blob entity generator issue front angular #201

Toysurusse opened this issue Oct 7, 2020 · 21 comments
Labels
bug Something isn't working enhancement New feature or request

Comments

@Toysurusse
Copy link

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

@Toysurusse Toysurusse changed the title Nhipster blob entity generator Nhipster blob entity generator issue front angular Oct 7, 2020
@mraible
Copy link
Contributor

mraible commented Oct 8, 2020

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

@Toysurusse
Copy link
Author

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
Copy link

ghost commented Oct 8, 2020

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
Copy link
Contributor

mraible commented Oct 8, 2020

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

@ghost
Copy link

ghost commented Oct 8, 2020

@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
Copy link

ghost commented Oct 22, 2020

@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
Copy link

github-actions bot commented Dec 3, 2020

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
Copy link

ghost commented Dec 3, 2020

@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 avdev4j transferred this issue from jhipster/generator-jhipster Jan 18, 2021
@avdev4j
Copy link

avdev4j commented Jan 18, 2021

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

@ghost
Copy link

ghost commented Jan 19, 2021

Thanks.

@ghost ghost added the enhancement New feature or request label Jan 19, 2021
@jlopezjuy
Copy link

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
Copy link

ghost commented Jan 28, 2021

@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?

@ghost ghost added the bug Something isn't working label Jan 28, 2021
@jlopezjuy
Copy link

@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
Copy link

ghost commented Jan 28, 2021

@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
Copy link

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

@ghost
Copy link

ghost commented Jan 28, 2021

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
Copy link

yes

@jlopezjuy
Copy link

i was tested with diferent pdf and other files.

@ghost
Copy link

ghost commented Jan 28, 2021

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

@jlopezjuy
Copy link

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
Copy link

jlopezjuy commented Oct 27, 2021

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...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

4 participants