View Code? Open in Web Editor NEW

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

License: MIT License

JavaScript 4.78% TypeScript 83.95% CSS 5.59% HTML 5.68%

ngx-file-drag-drop's Introduction

ngx-file-drag-drop

Install

npm i ngx-file-drag-drop

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

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

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

Usage:

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

Output: 100 MB

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

Recommend Projects