Skip to content

Platform: FIle Uploader Component Technical Design

Jump to bottom
kavya-b edited this page May 20, 2020 · 5 revisions

File Uploader

Summary

The File Uploader is an input element for uploading files to the application.

Example

<fdp-file-uploader
    [(ngModel)]="newFiles"
    [multiple]="true"
    [accept]="'.png,.jpg,.gif'"
    [maxFileSize]="1048572">
</fdp-file-uploader>

Design

The Fundamental NGX: Core has an implementation of a file upload component called FileInput. We could utilize the FileInput component in the Platform FileUploader component. As such the bindings for the components will be the same.

As this is an input control it needs to implement the FormFieldControl as described in the FormGroup Layout or extend existing BaseInputComponent.

i18n

Link to general support for i18n: Supporting internationalization in ngx/platform

Special Usecase: Yes

Assuming that input field and button will not be made available to the user and the texts such as 'Browse' on the button, i18n markers would have to be placed in the library and exposed through schematics as described in the general guideline document.

Redesign Required: Not with respect to i18n(based on above assumptions), but redesign to match Fiori specs where we have input field and Browse button separately is needed. This i18n section is written with Fiori design in mind.

Please note that the current design is not following the declarative approach(based on above assumptions).

Notes

@@ From Kavya:

  • If button and input field both are part of the library itself and not exposed to application user, then how will user modify these texts to their convenience? Is it not an option for them to have 'Open Files' instead of 'Browse' or to have 'Browse(only .jpg/.png files)' instead of 'Browse'?
  • This does not seem to be following a declarative approach suggested for i18n support.
Clone this wiki locally