Ash-material-file-input NPM

ash-material-file-input

This project provides a set of tools to help you add file input into Angular Material forms :

ash-mat-file-input Component, to use inside mat-form-field, it supports the optional dropping of file.
a FileValidator with a set of validators to use with formControl.
an ashDrop Directive, to drop files into container of your choice.
a byteFormat Pipe, to format the file size to the unit of your choice.

DEMO SITE is under construction

Install

    npm i ash-material-file-input

AshFileInputModule

import { AshFileInputModule } from 'ash-material-file-input';

FileInputComponent

selector : ash-mat-file-input
implements : MatFormFieldControl

Supports form field features, error messages, hint, prefix, suffix and appearance. You can also change when error message are shown using a custom ErrorStateMatcher.

Properties

It works with ngModel and formControl directives.

value: The value of the formControl is the same type (FileList) of the <input type="file"> files attribute.

Name	Description
@Input()placeholder: `string`	Placeholder for file names, empty by default
@Input()accept: `string`	Same usage as a classic `<input type="file">`
@Input()multiple: `boolean`	Same usage as a classic `<input type="file">`If not set, add a validator to avoid dropping multiple files with fileDrop
fileDrop	If present, add a container above the filenames where you can drop file (default height 20px).You can customize the inside of the container by adding elements inside `<ash-mat-file-input>`

Methods

`open`
Opens the file explorer for the linked input

`clear`
Clear the input, removing his value
@param event?: Event -- The event triggering the method If set, the moethod will call `preventDefault()` and `stopPropagation()`

FileValidators

A set of validators to help you manage formControl with value of type FileList.

Usage

control = new FormControl(null, FileValidators.acceptedExtensions('.jpg,.png'));

control will be invalid if file extension is neither .jpg or .png.

maxFile

Requires total number of file to be less or equal to maxFile

Parameters :
maxFile: number - The total number of files accepted.

Error structure :

{
    maxFile: {
        maxFiles: number,       // Number of files accepted
        currentFiles: number,   // Current number of files
    }
}

maxFileSize

Requires each file to be lesser or equal to maxSize.

Parameters :
maxSize: number - The size max of each file.

Error structure :

{
    maxSize: {
        max: number,        // Size max defined
        size: string,       // Size of the first file too big
        filename: string,   // Name of the file
    }
}

maxFileSizeTotal

Requires the total files size to be lesser or equal to maxSize.

Parameters :
maxSize: number - The total max size.

Error structure :

{
     maxSizeTotal: {
        max: number,        // Total size max defined
        size: number,       // Total size of the files
    }
}

acceptedExtensions

Requires each file extension to match the one of accepted extensions.

Parameters :
accepted: string - Accepted extensions, separated by a comma (".jpg,.png").

Error structure :

{
    extension: {
        accepted: string,   // List of accepted extensions
        current: string,    // File extension of the first file not matching
        filename: string,   // Name of the file
    }
}

acceptedTypes

Requires each file MIME type to be one of accepted.

Parameters :
accepted: string - Accepted MIME type, separated by a comma ("text/plain,image/*").

Error structure :

{
    type: {
        accepted: string,   // List of accepted types
        current: string,    // File MIME type of the firs file not matching
        filename: string,   // Name od the file
    }
}

DropDirective

selector: [ashDrop]

Transform any element into a drop container where you can drop files from file explorer.

Properties

Name	Description
@Input()dragoverClass?: `string`	Name of the class to apply on the element when a file is over it.(default: `'ash-dragover'`).
@Output()fileDropped: `EventEmitter<FileList>`	Event emitted when file(s) are dropped.

Combining DropDirective with FileInputComponent

Alternatively to use fileDrop attribute on <ash-mat-file-input> you can use any element in your component with the ashDrop directive to be the drop container.

<mat-form-field>
    <mat-label>Drop a file in a container anywhere</mat-label>
    <ash-mat-file-input [formControl]="fc"></ash-mat-file-input>
</mat-form-field>
<!-- You can place the next element anywhere you want -->
<mat-card ashDrop (fileDropped)="updateControl($event)">
    Drop your file here
</mat-card>

updateControl(files: FileList) {
    this.fc.patchValue(files);
    this.fc.markAsTouched();
}

ByteFormatPipe

format: {{ number | byteFormat [ : unitSrc [ : unitDest ] ] }}

Parameters :
unitSrc?: string - The source unit. Default is b.
unitDest?: string - The destination unit. Default is Mb.

It supports unit from Byte (b) to Yottabyte (Yb).

Examples :

<span>{{ 104857600 | byteFormat }}</span>           <!-- Output: "100Mb" -->
<span>{{ 102400 | byteFormat:'Kb' }}</span>         <!-- Output: "100Mb" -->
<span>{{ 104857600 | byteFormat:'b':'Kb' }}</span>  <!-- Output: "102400Kb" -->

Special thanks

https://github.com/merlosy/ngx-material-file-input
This project is inspired from this one.

angular material file input file-input mat-form-field drag drop

@everything-registry/sub-chunk-1170

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago