Upload

Upload provides the UI for selecting files, drag-and-drop upload areas, and file progress displays. It emits selected files through fileSelected, but the application is responsible for validation, uploading to a backend, retrying, deleting, and persisting uploaded file records.

The NgStarter Angular Upload component lets you provide UI for selecting files, drag-and-drop upload areas, and file progress displays. Use Upload components when users need to choose local files, drop files into an upload area, or see selected/uploading files with progress, errors, retry, remove, or cancel actions. It includes examples for Basic Upload, Upload area, File list, and File grid.

Basic Upload

Use ngsUploadTrigger on a button or clickable element when users should open the native file picker.

Selected files: []

Upload area

Use ngs-upload-area for drag-and-drop selection with main, drop, and invalid states.

Drag & drop to upload

Drop files here

Invalid files to drop, image/* accepts only.

All file type are allowed to upload

Max size per file: 2MB

Selected files: []

File list

Use ngs-file-list and ngs-file for a vertical list of selected or uploading files with progress, errors, retry, remove, or cancel actions.

Annual Report.docx

Workflow.pdf

11MB , 60% (remaining time: 00:2:01)

Financials.xlsx

An error occurred

File grid

Use ngs-files-grid and ngs-grid-file when uploaded files should appear as compact cards or tiles.

Annual Report.docx

Workflow.pdf

11MB

60%

Financials.xlsx

An error occurred