Skip to content

A simple angular material file input component which lets the user drag and drop files, or select files with the native file picker.

License

Notifications You must be signed in to change notification settings

telebroad/ngx-file-drag-drop

Repository files navigation

ngx-file-drag-drop

Check out the Demo

Install

npm i ngx-file-drag-drop

NgxFileDragDropComponent

selector: <ngx-file-drag-drop>

implements: ControlValueAccessor to work with angular forms

Additionnal properties

Name Description
@Input() multiple: boolean Allows multiple file inputs, false by default
@Input() accept: string Any value the native accept attribute can get. Doesn't validate input.
@Input() disabled: boolean Disable the input.
@Input() emptyPlaceholder : string Placeholder for empty input, default Drop file or click to select
@Input() displayFileSize : boolean Show file size in chip rather than in tooltip, default false
@Input() activeBorderColor: string A css color for when file is dragged into drop area, default purple
@Output() valueChanged:EventEmitter<File[]> Event emitted when input value changes
addFiles():(files: File[] | FileList | File) => void Update input
removeFile():(file:File) => void Removes the file from the input
clear(): () => void Removes all files from the input
files: File[] Getter for form value
isEmpty: boolean Whether the input is empty (no files) or not

BytePipe

Usage:

<span>{{ 104857600 | byteFormat }}</span>

Output: 100 MB

Validators

import { FileValidators } from "ngx-file-drag-drop";
Validator Description
uniqueFileNames Disallow two files with same file name
fileExtension(ext: string[]) Required file extensions
fileType(types: string[] | RegExp) Required Mime Types
maxFileCount(count: number) Max number of files
maxFileSize(bytes: number) Max bytes allowed per file
maxTotalSize(bytes: number) Max total input size
required At least one file required

About

A simple angular material file input component which lets the user drag and drop files, or select files with the native file picker.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •