angular-material-fileupload - GitLite

KO | EN

gitlite — search

#javascript #react #ai #llm #golang #go #machine-learning #rust #macos #awesome #kubernetes #security #mcp #ios

angular-material-fileupload

(★ 96)

A fileupload component based on angular-material design

File Explorer

Download Latest Version (.zip)

- - MatFileUploadComponent.html
  - MatFileUploadQueueComponent.html
- - FileUploadInputForDirective.html
- - ionicons.eot
  - ionicons.svg
  - ionicons.ttf
  - ionicons.woff
  - ionicons.woff2
  - roboto-v15-latin-300.eot
  - roboto-v15-latin-300.svg
  - roboto-v15-latin-300.ttf
  - roboto-v15-latin-300.woff
  - roboto-v15-latin-300.woff2
  - roboto-v15-latin-700.eot
  - roboto-v15-latin-700.svg
  - roboto-v15-latin-700.ttf
  - roboto-v15-latin-700.woff
  - roboto-v15-latin-700.woff2
  - roboto-v15-latin-italic.eot
  - roboto-v15-latin-italic.svg
  - roboto-v15-latin-italic.ttf
  - roboto-v15-latin-italic.woff
  - roboto-v15-latin-italic.woff2
  - roboto-v15-latin-regular.eot
  - roboto-v15-latin-regular.svg
  - roboto-v15-latin-regular.ttf
  - roboto-v15-latin-regular.woff
  - roboto-v15-latin-regular.woff2
- - dependencies.svg
- - compodoc-vectorise-inverted.png
  - compodoc-vectorise-inverted.svg
  - compodoc-vectorise.png
  - compodoc-vectorise.svg
  - coverage-badge-documentation.svg
  - favicon.ico
- - MatFileUploadQueueService.html
- - IInput.html
  - IUploadProgress.html
- - compodoc.js
  - lazy-load-graphs.js
  - menu-wc.js
  - menu.js
  - routes.js
  - sourceCode.js
  - svg-pan-zoom.controls.js
  - tabs.js
  - tree.js
- - MatFileUploadModule.html
- - BytesPipe.html
- - bootstrap-card.css
  - bootstrap.min.css
  - compodoc.css
  - ionicons.min.css
  - laravel.css
  - material.css
  - original.css
  - postmark.css
  - prism.css
  - readthedocs.css
  - reset.css
  - stripe.css
  - style.css
  - tablesort.css
  - vagrant.css
- coverage.html
- dependencies.html
- index.html
- license.html
- modules.html
- overview.html
- - karma.conf.js
  - ng-package.json
  - package-lock.json
  - package.json
  - README.md
  - tsconfig.lib.json
  - tsconfig.spec.json
  - tslint.json
- - browserslist
  - karma.conf.js
  - tsconfig.app.json
  - tsconfig.spec.json
  - tslint.json
.editorconfig
.gitignore
angular.json
DragAndDropDemo.gif
LICENSE
package-lock.json
package.json
README.md
SingleFileDemo.gif
tsconfig.json
tslint.json

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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](https://raw.githubusercontent.com/nishantmc/angular-material-fileupload/master/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](https://raw.githubusercontent.com/nishantmc/angular-material-fileupload/master/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>

```