https://github.com/nishantmc/angular-material-fileupload

A fileupload component based on angular-material design
https://github.com/nishantmc/angular-material-fileupload

angular-material angular5 angular6 fileupload javascript

Last synced: 3 months ago
JSON representation

A fileupload component based on angular-material design

• Host: GitHub
• URL: https://github.com/nishantmc/angular-material-fileupload
• Owner: nishantmc
• License: mit
• Created: 2017-12-21T22:30:46.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T02:18:34.000Z (almost 2 years ago)
• Last Synced: 2024-04-15T00:50:27.964Z (7 months ago)
• Topics: angular-material, angular5, angular6, fileupload, javascript
• Language: TypeScript
• Size: 18.2 MB
• Stars: 98
• Watchers: 8
• Forks: 78
• Open Issues: 67
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-material-design - angular-material-fileupload - A file upload and progress indicator for Angular 2 (Angular / Components)

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

Upload file




    

```

**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



    Just drag and drop files here





    


        

    



```

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

```HTML



  Just drag and drop files here





  

    

  



```

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

```HTML



  Just drag and drop files here





  

    

  



```