GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → merlosy → Ngx Material File Input

merlosy / Ngx Material File Input

Licence: mit
File input for Angular Material form-field

Programming Languages

typescript
32286 projects

Labels

angularmaterialfileinputupload

Projects that are alternatives of or similar to Ngx Material File Input

react-file-input-previews-base64
This package provides an easy to use, ready to go and customizable wrapper around file input, with option for image previews and returning file as base64 string.
Stars: ✭ 15 (-92.23%)
Mutual labels:  input, upload, file
react-simple-file-input
Simple wrapper for the HTML input tag and HTML5 FileReader API
Stars: ✭ 29 (-84.97%)
Mutual labels:  input, upload, file
file-upload-with-preview
🖼 Simple file-upload utility that shows a preview of the uploaded image. Written in TypeScript. No dependencies. Works well with or without a framework.
Stars: ✭ 406 (+110.36%)
Mutual labels:  input, upload, file
PHP-FileUpload
Simple and convenient file uploads — secure by default
Stars: ✭ 53 (-72.54%)
Mutual labels:  input, upload, file
File Upload With Preview
🖼 A simple file-upload utility that shows a preview of the uploaded image. Written in pure JavaScript. No dependencies. Works well with Bootstrap 4 or without a framework.
Stars: ✭ 352 (+82.38%)
Mutual labels:  upload, file, input
React Filepond
🔌 A handy FilePond adapter component for React
Stars: ✭ 1,024 (+430.57%)
Mutual labels:  upload, file
Uploader
A lightweight and very configurable jQuery plugin for file uploading using ajax(a sync); includes support for queues, progress tracking and drag and drop.
Stars: ✭ 1,042 (+439.9%)
Mutual labels:  upload, file
File Dialog
Trigger the upload file dialog directly from your code easily.
Stars: ✭ 51 (-73.58%)
Mutual labels:  upload, file
Laravel Simple Uploader
Simple file uploader for Laravel 5.
Stars: ✭ 59 (-69.43%)
Mutual labels:  upload, file
Chibisafe
Blazing fast file uploader and awesome bunker written in node! 🚀
Stars: ✭ 657 (+240.41%)
Mutual labels:  upload, file
Angular Filepond
🔌 A handy FilePond adapter component for Angular
Stars: ✭ 59 (-69.43%)
Mutual labels:  upload, file
Nodestream
Storage-agnostic streaming library for binary data transfers
Stars: ✭ 70 (-63.73%)
Mutual labels:  upload, file
Resumable.php
PHP backend for resumable.js
Stars: ✭ 32 (-83.42%)
Mutual labels:  upload, file
Fileup
FileUp - JQuery File Upload
Stars: ✭ 10 (-94.82%)
Mutual labels:  upload, file
Droply Js
Droply JS, a new responsive and cross browser chunk uploader with DragDrop and File Preview capabilities (HTML5/CSS3)
Stars: ✭ 50 (-74.09%)
Mutual labels:  upload, file
Aetherupload Laravel
A Laravel package to upload large files 上传大文件的Laravel扩展包
Stars: ✭ 835 (+332.64%)
Mutual labels:  upload, file
Fileuploaderplugin
Simple cross platform plugin to upload files.
Stars: ✭ 59 (-69.43%)
Mutual labels:  upload, file
Laravel Filemanager Example 5.3
Demo integration for laravel-filemanager (https://github.com/UniSharp/laravel-filemanager).
Stars: ✭ 100 (-48.19%)
Mutual labels:  upload, file
Angular File Uploader
Angular file uploader is an Angular 2/4/5/6/7/8/9/10 + file uploader module with Real-Time Progress Bar, Responsive design, Angular Universal Compatibility, localization and multiple themes which includes Drag and Drop and much more.
Stars: ✭ 92 (-52.33%)
Mutual labels:  upload, file
Laravel Filemanager
Media gallery with CKEditor, TinyMCE and Summernote support. Built on Laravel file system.
Stars: ✭ 1,688 (+774.61%)
Mutual labels:  upload, file
View All Similar Projects ➔

Build Status npm Coverage Status Known Vulnerabilities

material-file-input

This project provides :

  • ngx-mat-file-input component, to use inside Angular Material mat-form-field
  • a FileValidator with maxContentSize, to limit the file size
  • a ByteFormatPipe to format the file size in a human-readable format

For more code samples, have a look at the DEMO SITE

Install

npm i ngx-material-file-input

API reference

MaterialFileInputModule

import { MaterialFileInputModule } from 'ngx-material-file-input';

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

NGX_MAT_FILE_INPUT_CONFIG token (optional):

Change the unit of the ByteFormat pipe

export const config: FileInputConfig = {
  sizeUnit: 'Octet'
};

// add with module injection
providers: [{ provide: NGX_MAT_FILE_INPUT_CONFIG, useValue: config }];

FileInputComponent

selector: <ngx-mat-file-input>

implements: MatFormFieldControl from Angular Material

Additionnal properties

Name Description
@Input() valuePlaceholder: string Placeholder for file names, empty by default
@Input() multiple: boolean Allows multiple file inputs, false by default
@Input() autofilled: boolean Whether the input is currently in an autofilled state. If property is not present on the control it is assumed to be false.
@Input() accept: string Any value that accept attribute can get. more about "accept"
value: FileInput Form control value
empty: boolean Whether the input is empty (no files) or not
clear(): (event?) => void Removes all files from the input

ByteFormatPipe

Example

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

Output: 100 MB

FileValidator

Name Description Error structure
maxContentSize(value: number): ValidatorFn Limit the total file(s) size to the given value { actualSize: number, maxSize: number }

About me

@jereyleg

☆ to show support :)

Roadmap

  • drop event to add files
  • ideas?

Kudos to

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].