telebroad / ngx-file-drag-drop

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

ngx-file-drag-drop

Check out the Demo

Install

npm i ngx-file-drag-drop

API reference

NgxFileDragDropModule

import { NgxFileDragDropModule } from 'ngx-file-drag-drop';

@NgModule({
  imports: [
    // the module for this lib
    NgxFileDragDropModule
  ]
})

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