Extend <Field.Upload /> with onFileDownload handler

[torryt]

🚀 Feature Proposal

Extend the <Field.Upload /> with a onFileDownload handler so that the full file can be downloaded on demand instead of pre-loaded in the form data.

Motivation

The <Field.Upload /> component expects input as an array containing the full File object. This means that when we preload a large form with several steps, and possibly several <Field.Upload /> components, we also have to load all the files already uploaded in the form and preload them into the form state, which can significantly delay the first page load.

Example

async function onFileDownload(fileId: string): Promise<Blob> {
  const response = await getFileFromServer(fileId);

  return await response.blob();
}

....

<Field.Upload
  onFileDownload={onFileDownload}
/>

onFileDownload expects an async function that returns a file blob. When the function is provided, it overrides the default behavior of the file link and downloads from server instead of downloading the File object in the form state.

Pitch

Reduces initial load time of forms with large files or many files and reduce unnecessary loading of documents that will probably not be downloaded.

[langz]

Thanks for the detailed feature request, @torryt 🚀

I like the idea of a onFileDownload event or so, to download a given file from the server with a api request, and can definitely see the need for this.

I'll have to look more into how this works as of today.

I just took a quick search in the codebase, and as of today the code in Eufemia use multiple "file" properties, like name, size, lastModified, id, type, etc. Not sure what would happen if we don't provide these before the user clicks the link.

[langz]

I think this feature request is solved with the following PRs which is included in v10.60.0 of Eufemia:

• feat(Upload): add support for async onFileClick event #4370
• feat(Field.Upload): add onFileClick event #4369
• feat(Value.Upload): add onFileClick event #4367

Please report back, and reopen the feature request if you find anything missing @torryt 🙇

[torryt]

This works just as expected @langz . Thank you very much! 💯 🙏

[langz]

This works just as expected @langz . Thank you very much! 💯 🙏

Great, thanks🤗
I have a small improvement/fix for when chaining multiple of these asynchronous upload events.

#4378