Implementing file attachments in JHipster - spring

Question

I have a monolithic JHipster (v5.6.1) project, and I need to implement file attachments to an entity.
I don't know where to start with this. DTOs are sent to REST controllers to create or update them, how should I send the file?
I could attach the Base64 to my DTO and send it that way, but I'm not sure how (are there any angular plugins to accomplish this?). This would require extra work for the server and, I think, extra file size.
Another option is to send the entity (DTO) and file separately, again I'm not entirely sure how.

Answer 1

I see no reason to leave this question unanswered since I have implemented attachments successfully in several of my projects now.
If you prefer, you can skip this explanation and check the github repository I created at vicpermir/jhipster-ng-attachments. It's a working project ready to fire up and play.
The general idea is to have an Attachment entity with all the required fields (file size, name, content type, etc...) and set a many-to-many relation to any entity you want to implement file attachments for.
The JDL is something like this:
// Test entity, just to showcase attachments, this should
// be the entity you want to add attachments to
entity Report {
name String required
}
entity Attachment {
filename String required // Generated unique filename on the server
originalFilename String required // Original filename on the users computer
extension String required
sizeInBytes Integer required
sha256 String required // Can be useful for duplication and integrity checks
contentType String required
uploadDate Instant required
}
// ManyToMany instead of OneToMany because it will be easier and cleaner
// to integrate attachments into other entities in case we need to do it
relationship ManyToMany {
Report{attachments} to Attachment{reports}
}
I have both filename and originalFilename because one of my requirements was to keep whatever file name the user uploaded it with. The generated unique name that I use on the server side is transparent to the user.
Once you generate a project with a JDL like that, you will have to add the file payload to your DTO (or entity if you don't use DTOs) so that the server can receive it in base64 and store it.
I have this in my AttachmentDTO:
...
private Instant uploadDate;
// File payload (transient)
private byte[] file;
public Long getId() {
return id;
}
...
Then, you only have to process those byte arrays on the server side, store them and save a reference to the location into the database.
AttachmentService.java
/**
* Process file attachments
*/
public Set<AttachmentDTO> processAttachments(Set<AttachmentDTO> attachments) {
Set<AttachmentDTO> result = new HashSet<>();
if (attachments != null && attachments.size() > 0) {
for (AttachmentDTO a : attachments) {
if (a.getId() == null) {
Optional<AttachmentDTO> existingAttachment = this.findBySha256(a.getSha256());
if(existingAttachment.isPresent()) {
a.setId(existingAttachment.get().getId());
} else {
String fileExtension = FilenameUtils.getExtension(a.getOriginalFilename());
String fileName = UUID.randomUUID() + "." + fileExtension;
if (StringUtils.isBlank(a.getContentType())) {
a.setContentType("application/octet-stream");
}
Boolean saved = this.createBase64File(fileName, a.getFile());
if (saved) {
a.setFilename(fileName);
}
}
}
result.add(a);
}
}
return result;
}
What I do here is check if the attachment already exists (using the SHA256 hash). If it does I use that one, otherwise I store the new file and persist the new attachment data.
What's left now is to manage attachments on the client side. I created two components for this so it is extremely easy to add attachments to new entities.
attachment-download.component.ts
...
#Component({
selector: 'jhi-attachment-download',
template: , // Removed to reduce verbosity
providers: [JhiDataUtils]
})
export class JhiAttachmentDownloadComponent {
#Input()
attachments: IAttachment[] = [];
}
This just calls a mapping that takes the attachment ID, looks for the associated file on the server and returns that file for the browser to download. Use this component in your entity detail view with:
<jhi-attachment-download [attachments]="[your_entity].attachments"></jhi-attachment-download>
attachment-upload.component.ts
...
#Component({
selector: 'jhi-attachment-upload',
template: , // Removed to reduce verbosity
providers: [JhiDataUtils]
})
export class JhiAttachmentUploadComponent {
#Input()
attachments: IAttachment[] = [];
loadingFiles: number;
constructor(private dataUtils: JhiDataUtils) {
this.loadingFiles = 0;
}
addAttachment(e: any): void {
this.loadingFiles = 0;
if (e && e.target.files) {
this.loadingFiles = e.target.files.length;
for (let i = 0; i < this.loadingFiles; i++) {
const file = e.target.files[i];
const fileName = file.name;
const attachment: IAttachment = {
originalFilename: fileName,
contentType: file.type,
sizeInBytes: file.size,
extension: this.getExtension(fileName),
processing: true
};
this.attachments.push(attachment);
this.dataUtils.toBase64(file, (base64Data: any) => {
attachment.file = base64Data;
attachment.sha256 = hash
.sha256()
.update(base64Data)
.digest('hex');
attachment.processing = false;
this.loadingFiles--;
});
}
}
e.target.value = '';
}
getExtension(fileName: string): string {
return fileName.substring(fileName.lastIndexOf('.'));
}
}
Use this component in your entity update view with:
<jhi-attachment-upload [attachments]="editForm.get('attachments')!.value"></jhi-attachment-upload>
Once sent to the server, the files will be stored on the folder you configured in your application-*.yml separated in subdirectories by year and month. This is to avoid storing too many files on the same folder, which can be a big headache.
I'm sure many things could be done better, but this has worked for me.