# angular-material-fileupload

> A fileupload component based on angular-material design

Latest version **3.0.2** (published 2021-03-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install angular-material-fileupload
pnpm add angular-material-fileupload
yarn add angular-material-fileupload
bun add angular-material-fileupload
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.2 |
| Published | 2021-03-03 |
| First published | 2018-01-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 343.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 96 |
| Maintainers | nishantmc |
| Keywords | angular, fileUpload, angular-material, component, Typescript |

## Links

- npm: https://www.npmjs.com/package/angular-material-fileupload
- Repository: https://github.com/nishantmc/angular-material-fileupload
- Homepage: https://github.com/nishantmc/angular-material-fileupload#readme
- Issues: https://github.com/nishantmc/angular-material-fileupload/issues
- npm.io page: https://npm.io/package/angular-material-fileupload

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 3.0.2 (latest) — 2021-03-03
- 3.0.1 — 2020-09-08
- 3.0.0 — 2020-09-08
- 2.0.0 — 2019-02-12
- 1.0.3 — 2019-01-25
- 1.0.2 — 2019-01-23
- 1.0.1 — 2018-09-07
- 1.0.0 — 2018-09-04
- 0.0.11 — 2018-04-02
- 0.0.10 — 2018-04-02
- 0.0.9 — 2018-03-16
- 0.0.8 — 2018-01-24
- 0.0.7 — 2018-01-24
- 0.0.6 — 2018-01-12
- 0.0.5 — 2018-01-12
- … 4 more at https://npm.io/package/angular-material-fileupload/versions

## README

# angular-material-fileupload [![npm version](https://badge.fury.io/js/angular-material-fileupload.svg)](https://badge.fury.io/js/angular-material-fileupload)

A fileupload component based on angular-material design

# Documentation

[angular-material-fileupload API doc](https://nishantmc.github.io/angular-material-fileupload.github.io/)

# Demo

# Setup

The module to be imported is "MatFileUploadModule"

```Typescript

import { NgModule } from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { MatButtonModule } from '@angular/material';

import { AppComponent } from './app.component';
import { MatFileUploadModule } from 'angular-material-fileupload';

@NgModule({
  imports: [
    MatButtonModule,
    BrowserModule,
    MatFileUploadModule
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

```

# File upload Example

![Screenshot](SingleFileDemo.gif)

```HTML
<label for="singleFile">Upload file</label>
<input id="singleFile" type="file" [fileUploadInputFor]= "fileUploadQueue"/>
<br>

<mat-file-upload-queue #fileUploadQueue
    [fileAlias]="'file'"
    [httpUrl]="'http://localhost:8180/jax-rs-jersey-application-sample'">

    <mat-file-upload [file]="file" [id]="i" *ngFor="let file of fileUploadQueue.files; let i = index"></mat-file-upload>
</mat-file-upload-queue>
```

**Notes**

- 'fileUploadQueue' is the template input variable which point to the queue. You can see its created in the queue tag (#fileUploadQueue). Basically pointing the input to the queue
- fileAlias and httpUrl are input variables which you can bind. 'fileAlias' - as you might guess just the alias of the file. and 'httpUrl' is the url you want to do POST with multipart data.

# Drag and drop example

![Screenshot](DragAndDropDemo.gif)

```HTML

<div [fileUploadInputFor]="fileUploadQueue" class="upload-drop-zone">
    Just drag and drop files here
</div>


<div style="width: 500px">
    <mat-file-upload-queue #fileUploadQueue
        [fileAlias]="'file'"
        [httpUrl]="'http://localhost:8180/jax-rs-jersey-application-sample'" multiple>

        <mat-file-upload [file]="file" [id]="i" *ngFor="let file of fileUploadQueue.files; let i = index"></mat-file-upload>
    </mat-file-upload-queue>
</div>

```

# Example setting the inputs on mat-file-upload-queue

```HTML

<div [fileUploadInputFor]="fileUploadQueue3" class="upload-drop-zone">
  Just drag and drop files here
</div>

<div style="width: 500px">
  <mat-file-upload-queue
    #fileUploadQueue3
    [httpUrl]="'http://localhost:8080/jax-rs-jersey-application-sample'"
    fileAlias="{{ fileAlias }}"
    [httpRequestHeaders]="httpRequestHeaders"
    [httpRequestParams]="httpRequestParams"
  >
    <mat-file-upload
      [file]="file"
      [id]="i"
      *ngFor="let file of fileUploadQueue3.files; let i = index"
    ></mat-file-upload>
  </mat-file-upload-queue>
</div>

```

# Example setting the inputs overridden on mat-file-upload

```HTML

<div [fileUploadInputFor]="fileUploadQueue4" class="upload-drop-zone">
  Just drag and drop files here
</div>

<div style="width: 500px">
  <mat-file-upload-queue
    #fileUploadQueue4
    [httpUrl]="'http://localhost:8080/jax-rs-jersey-application-sample1'"
    fileAlias="{{ fileAlias }}"
    [httpRequestHeaders]="httpRequestHeaders"
    [httpRequestParams]="httpRequestParams"
  >
    <mat-file-upload
      [file]="file"
      [id]="i"
      *ngFor="let file of fileUploadQueue4.files; let i = index"
      [httpUrl]="'http://localhost:8080/jax-rs-jersey-application-sample'"
      fileAlias="{{ fileAlias1 }}"
      [httpRequestHeaders]="httpRequestHeaders1"
      [httpRequestParams]="httpRequestParams1"
    ></mat-file-upload>
  </mat-file-upload-queue>
</div>


```

---
_Source: https://npm.io/package/angular-material-fileupload · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._