How to change the file name during the download process in Jhipster (java + angular)

Question

This is the code that seems to open it from the controller:

 openFile(contentType, field) { return this.dataUtils.openFile(contentType, field); }

and in the HTML this is used while passing in data from an object returned from the service like so:

 <button type="submit" (click)="openFile(dataCleansing.fileContentType, dataCleansing.uploadedFileContent)" class=" btn btn-info viewTheme"> <fa-icon [icon]="'download'"></fa-icon> </fa-icon>&nbsp;<span> Open/View File</span> </button>

My goal is that I download the file and when it is downloaded it carries the filename and not as download(1) or download(2) and in windows it uses some random ids (not related to the fileID). I would like it so that the downloaded file can be easily located by the user. I tried add header content-filename. But I could not parse it and set it. Looks like Jhipsters built in service called data-utils.service.ts is in control of download file functionality. which looks like this inside the node modules:

 import { ElementRef } from '@angular/core'; /** * An utility service for data. */ export declare class JhiDataUtils { constructor(); /** * Method to abbreviate the text given */ abbreviate(text: string, append?: string): string; /** * Method to find the byte size of the string provides */ byteSize(base64String: string): string; /** * Method to open file */ openFile(contentType: string, data: string): void; /** * Method to convert the file to base64 */ toBase64(file: File, cb: Function): void; /** * Method to clear the input */ clearInputImage(entity: any, elementRef: ElementRef, field: string, fieldContentType: string, idInput: string): void; /** * Sets the base 64 data & file type of the 1st file on the event (event.target.files[0]) in the passed entity object * and returns a promise. * * @param event the object containing the file (at event.target.files[0]) * @param entity the object to set the file's 'base 64 data' and 'file type' on * @param field the field name to set the file's 'base 64 data' on * @param isImage boolean representing if the file represented by the event is an image * @returns a promise that resolves to the modified entity if operation is successful, otherwise rejects with an error message */ setFileData(event: any, entity: any, field: string, isImage: boolean): Promise<any>; /** * Method to download file */ downloadFile(contentType: string, data: string, fileName: string): void; private endsWith; private paddingSize; private size; private formatAsBytes; }

Any directions and tips would be greatly appreciated!

Answer 1

I guess what you really want is to download files not open them. JhiDataUtils has a method specifically for this:

downloadFile(contentType: string, data: string, fileName: string): void;

Try using that method instead of openFile() , something like this in the HTML:

<button type="submit" class="btn btn-info viewTheme" 
    (click)="downloadFile(dataCleansing.fileContentType, dataCleansing.uploadedFileContent)">
    <fa-icon [icon]="'download'"></fa-icon> Download File
</button>

You can then put whatever filename you want in the controller:

  downloadFile(contentType: string, field: string) {
    const filename = 'report_' + moment().format('YYYY-MM-DD-HH-mm');
    this.dataUtils.downloadFile(contentType, field, filename);
  }

In any case, the correct header to set the name of a file attachment would be:

Content-Disposition: attachment; filename=custom_name.pdf;

I did not test this code.