{"_id":"@aakashsuryawanshi/angular-material-fileupload","_rev":"2-6d34c42537f41d601f8e88ccef798a9a","name":"@aakashsuryawanshi/angular-material-fileupload","dist-tags":{"latest":"3.0.3"},"versions":{"3.0.2":{"name":"@aakashsuryawanshi/angular-material-fileupload","version":"3.0.2","scripts":{"ng":"ng","start":"ng serve","build":"ng build","test":"ng test","lint":"ng lint","e2e":"ng e2e","compodoc":"npx compodoc -p projects/angular-material-fileupload/tsconfig.lib.json"},"private":false,"dependencies":{"@angular/animations":"~11.0.2","@angular/cdk":"~11.0.2","@angular/common":"~11.0.2","@angular/compiler":"~11.0.2","@angular/core":"~11.0.2","@angular/forms":"~11.0.2","@angular/material":"~11.2.13","@angular/platform-browser":"~11.0.2","@angular/platform-browser-dynamic":"~11.0.2","@angular/router":"~11.0.2","rxjs":"~6.4.0","tslib":"^1.10.0","zone.js":"~0.9.1"},"devDependencies":{"@angular-devkit/build-angular":"~0.803.25","@angular-devkit/build-ng-packagr":"~0.803.25","@angular/cli":"~11.0.2","@angular/compiler-cli":"~11.0.2","@angular/language-service":"~11.0.2","@compodoc/compodoc":"1.1.11","@types/node":"~8.9.4","@types/jasmine":"~3.3.8","@types/jasminewd2":"~2.0.3","codelyzer":"^5.0.0","jasmine-core":"~3.4.0","jasmine-spec-reporter":"~4.2.1","jasmine-marbles":"0.6.0","karma":"~4.1.0","karma-jasmine-matchers":"4.0.2","karma-chrome-launcher":"~2.2.0","karma-coverage-istanbul-reporter":"~2.0.1","karma-jasmine":"~2.0.1","karma-jasmine-html-reporter":"^1.4.0","ng-packagr":"^5.4.0","protractor":"~5.4.0","ts-node":"~7.0.0","tsickle":"^0.37.0","tslint":"~5.15.0","typescript":"~4.0.7"},"description":"A fileupload component based on angular-material design","_id":"@aakashsuryawanshi/angular-material-fileupload@3.0.2","_nodeVersion":"14.17.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-S4WoLdjirFUCQrCp5eBm5U9XE6SE6wUKXgjfw9zBgg2PkL6qwROvnSd7rDuGCv761IAD59yAm6VccNzqT0vPSA==","shasum":"96259b0870ec708700c2f8ae5c6f8fc98482e815","tarball":"https://registry.npmjs.org/@aakashsuryawanshi/angular-material-fileupload/-/angular-material-fileupload-3.0.2.tgz","fileCount":164,"unpackedSize":13067270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw0hPCRA9TVsSAnZWagAA5wIQAJZ1V9Je38/htNK7qDYx\nsMos9nfVUEH2QOVMgl5kGwlHuL/ucNmtY//gHMwyMWc0gjju0yVbXwXoELA2\nmpinHkPHAx5hY02L0+4GKHTcToCmYS6Kdniqy938cRH04O/LGaA9JbVFuzK5\nhZThUncPmw1hHm0nPnXGfXA/oNWyjIns72wNNpqHlYBUpmzMhcKA11qU/SEM\n4Gpg29AlWVjT5WAU4t1dyDpMjsOrQkOwUs5sQhVBjZYc664SIvb0mKQdvwB+\nFyKiu9/kPOOvuwfTJPj+XsOhZpVml62lnGol+GUayrks/UUAnWDvCLLLQStV\n99KlpmZgaytuVuz9obq4cM5qQaa9edBea2/OOoRGSHheWBwsTAXkapXEuQbu\nc/eHKmZ/KcC/eQkKBKQYN9TutCjLVT5WTRb6FVOKMPFGzOHdMySOUd77/RPT\nxwJEIMwIAJjcXDeqrk4NT81ER+k87pDcsr1H28zhVhmXsRQeDOjweiXa26C2\n8twoOmZ2bu/NTOIti+7hGJEOyx5iyFdfnFc5BBIlnpclC/cUFGNNNuAf1Loy\nsEmWRFyQI8bQ0h5JyjEIjUvhm6W7ezM1SIfwUWpB+9QyrJ3ukCqYNK72nESv\n/Xw5UK1dKtNBD0HrLcZs6lWjFiqY7jYOijPhiNUK4II0u0cjzRG/TU5d+2P2\nyLN4\r\n=T8KM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC9yhcGZzSj/7FH+Ev5kHHRyDZev4ZISItg5L9mINQDBgIgW4OwU9TOCW1X2qvOLRSjghDH0/vfEuOxmvAVZ1onY1g="}]},"_npmUser":{"name":"akashsuryawanshi","email":"s.akashb@gmail.com"},"directories":{},"maintainers":[{"name":"akashsuryawanshi","email":"s.akashb@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/angular-material-fileupload_3.0.2_1623410767504_0.9455942975517437"},"_hasShrinkwrap":false},"3.0.3":{"name":"@aakashsuryawanshi/angular-material-fileupload","version":"3.0.3","scripts":{"ng":"ng","start":"ng serve","build":"ng build","test":"ng test","lint":"ng lint","e2e":"ng e2e","compodoc":"npx compodoc -p projects/angular-material-fileupload/tsconfig.lib.json"},"private":false,"dependencies":{"@angular/animations":"~11.0.2","@angular/cdk":"~11.0.2","@angular/common":"~11.0.2","@angular/compiler":"~11.0.2","@angular/core":"~11.0.2","@angular/forms":"~11.0.2","@angular/material":"~11.0.0","@angular/platform-browser":"~11.0.2","@angular/platform-browser-dynamic":"~11.0.2","@angular/router":"~11.0.2","rxjs":"~6.4.0","tslib":"^1.10.0","zone.js":"~0.9.1"},"devDependencies":{"@angular-devkit/build-angular":"~0.803.25","@angular-devkit/build-ng-packagr":"~0.803.25","@angular/cli":"~11.0.2","@angular/compiler-cli":"~11.0.2","@angular/language-service":"~11.0.2","@compodoc/compodoc":"1.1.11","@types/node":"~8.9.4","@types/jasmine":"~3.3.8","@types/jasminewd2":"~2.0.3","codelyzer":"^5.0.0","jasmine-core":"~3.4.0","jasmine-spec-reporter":"~4.2.1","jasmine-marbles":"0.6.0","karma":"~4.1.0","karma-jasmine-matchers":"4.0.2","karma-chrome-launcher":"~2.2.0","karma-coverage-istanbul-reporter":"~2.0.1","karma-jasmine":"~2.0.1","karma-jasmine-html-reporter":"^1.4.0","ng-packagr":"^5.4.0","protractor":"~5.4.0","ts-node":"~7.0.0","tsickle":"^0.37.0","tslint":"~5.15.0","typescript":"~4.0.7"},"description":"A fileupload component based on angular-material design","_id":"@aakashsuryawanshi/angular-material-fileupload@3.0.3","_nodeVersion":"14.17.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-08p1ibgU4PU5Glkpg7cz9PAG9BDiJa+BZbH0rfls5q2kDVe25B5Je0qmWjfWZs8/s+R5X2Pz/F9d6Xh7SHHi7A==","shasum":"c6a0dc89d3cc2a40f0ea30eb1901e7db44912bd0","tarball":"https://registry.npmjs.org/@aakashsuryawanshi/angular-material-fileupload/-/angular-material-fileupload-3.0.3.tgz","fileCount":164,"unpackedSize":13067269,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw6EjCRA9TVsSAnZWagAA50QP/i8g2bFsmxVTzaPGuxAg\nrk4YKnRXSF2/ruDoSmidykSvu9cJ9EugIOFzbUd5bE2dSAH8wi1G0kc2NIOy\n447AzT6O2rEfVmvRmkuY+zRvkHTueXQ+0jRlxMNAOeAIYKtZGvpwESUrhwph\n6k4PEQAElWgF/MhJ8iB3Mwx6VdsrFECa8O7Ggz9hUGlOJ8tODQ3IaTA2jkld\ne8gH5rN/pZaaGFDCRk4Msk4OMYyc4wcCiygpMmZDQ5ppb//pLmhtM1nL5uS3\nZ5z9z4ft/ixQpW4Ap+auovfmj9WhoiQr7KcoqlQDpqufZv+fAj0vZQKxrs0v\nCdaDGeEOf4wxx9NZkwNB1zQbpn+ffUgqFClfXmGMoHqhUCYJ07vqgtBzvr8x\nJB7XiezMvaRqD2u/8LElq71WMpqBpAAF22h1KtQs3Qe9tt6/LlEgxr5qMLbL\nN4Mi/F2HEwGyfwk9k+NrrSmJ2sWT2xFG4wj/ETb/03huwKL9QkEJNvLFysqA\nzg25gSYpSzYoUyB1L5NmhyHxVWcN7sKuRHIVRyEfwjqX6jD6BiiAcQwws68E\neBfdqN3PGGAkJmmk6KRokrM7zQzaHp86dWpBxoMYRu8nlJwoUcIzaf7vYT3n\nVscOAxw1ZEE2GnAbVl2f7Wm52QsBJUaOrxTmH3weNIasLybmi0XQhc/eh0o2\n9OTe\r\n=LnnC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGszI9XJfYNII0Kl2jpkdqgfY4q4KYcOI1/t8ruPO3YbAiBr/sbUeW00dX3SpoG440d+jO4qoNUDQ4je2ok/BJGP4A=="}]},"_npmUser":{"name":"akashsuryawanshi","email":"s.akashb@gmail.com"},"directories":{},"maintainers":[{"name":"akashsuryawanshi","email":"s.akashb@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/angular-material-fileupload_3.0.3_1623433507398_0.5210564900036729"},"_hasShrinkwrap":false}},"time":{"created":"2021-06-11T11:26:07.170Z","3.0.2":"2021-06-11T11:26:07.890Z","modified":"2022-04-04T10:55:03.400Z","3.0.3":"2021-06-11T17:45:07.789Z"},"maintainers":[{"name":"akashsuryawanshi","email":"s.akashb@gmail.com"}],"description":"A fileupload component based on angular-material design","readme":"# angular-material-fileupload [![npm version](https://badge.fury.io/js/angular-material-fileupload.svg)](https://badge.fury.io/js/angular-material-fileupload)\n\nA fileupload component based on angular-material design\n\n# Documentation\n\n[angular-material-fileupload API doc](https://nishantmc.github.io/angular-material-fileupload.github.io/)\n\n# Demo\n\n# Setup\n\nThe module to be imported is \"MatFileUploadModule\"\n\n```Typescript\n\nimport { NgModule } from '@angular/core';\nimport { BrowserModule }  from '@angular/platform-browser';\nimport { MatButtonModule } from '@angular/material';\n\nimport { AppComponent } from './app.component';\nimport { MatFileUploadModule } from 'angular-material-fileupload';\n\n@NgModule({\n  imports: [\n    MatButtonModule,\n    BrowserModule,\n    MatFileUploadModule\n  ],\n  declarations: [\n    AppComponent\n  ],\n  bootstrap: [ AppComponent ]\n})\nexport class AppModule { }\n\n```\n\n# File upload Example\n\n![Screenshot](SingleFileDemo.gif)\n\n```HTML\n<label for=\"singleFile\">Upload file</label>\n<input id=\"singleFile\" type=\"file\" [fileUploadInputFor]= \"fileUploadQueue\"/>\n<br>\n\n<mat-file-upload-queue #fileUploadQueue\n    [fileAlias]=\"'file'\"\n    [httpUrl]=\"'http://localhost:8180/jax-rs-jersey-application-sample'\">\n\n    <mat-file-upload [file]=\"file\" [id]=\"i\" *ngFor=\"let file of fileUploadQueue.files; let i = index\"></mat-file-upload>\n</mat-file-upload-queue>\n```\n\n**Notes**\n\n- '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\n- 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.\n\n# Drag and drop example\n\n![Screenshot](DragAndDropDemo.gif)\n\n```HTML\n\n<div [fileUploadInputFor]=\"fileUploadQueue\" class=\"upload-drop-zone\">\n    Just drag and drop files here\n</div>\n\n\n<div style=\"width: 500px\">\n    <mat-file-upload-queue #fileUploadQueue\n        [fileAlias]=\"'file'\"\n        [httpUrl]=\"'http://localhost:8180/jax-rs-jersey-application-sample'\" multiple>\n\n        <mat-file-upload [file]=\"file\" [id]=\"i\" *ngFor=\"let file of fileUploadQueue.files; let i = index\"></mat-file-upload>\n    </mat-file-upload-queue>\n</div>\n\n```\n\n# Example setting the inputs on mat-file-upload-queue\n\n```HTML\n\n<div [fileUploadInputFor]=\"fileUploadQueue3\" class=\"upload-drop-zone\">\n  Just drag and drop files here\n</div>\n\n<div style=\"width: 500px\">\n  <mat-file-upload-queue\n    #fileUploadQueue3\n    [httpUrl]=\"'http://localhost:8080/jax-rs-jersey-application-sample'\"\n    fileAlias=\"{{ fileAlias }}\"\n    [httpRequestHeaders]=\"httpRequestHeaders\"\n    [httpRequestParams]=\"httpRequestParams\"\n  >\n    <mat-file-upload\n      [file]=\"file\"\n      [id]=\"i\"\n      *ngFor=\"let file of fileUploadQueue3.files; let i = index\"\n    ></mat-file-upload>\n  </mat-file-upload-queue>\n</div>\n\n```\n\n# Example setting the inputs overridden on mat-file-upload\n\n```HTML\n\n<div [fileUploadInputFor]=\"fileUploadQueue4\" class=\"upload-drop-zone\">\n  Just drag and drop files here\n</div>\n\n<div style=\"width: 500px\">\n  <mat-file-upload-queue\n    #fileUploadQueue4\n    [httpUrl]=\"'http://localhost:8080/jax-rs-jersey-application-sample1'\"\n    fileAlias=\"{{ fileAlias }}\"\n    [httpRequestHeaders]=\"httpRequestHeaders\"\n    [httpRequestParams]=\"httpRequestParams\"\n  >\n    <mat-file-upload\n      [file]=\"file\"\n      [id]=\"i\"\n      *ngFor=\"let file of fileUploadQueue4.files; let i = index\"\n      [httpUrl]=\"'http://localhost:8080/jax-rs-jersey-application-sample'\"\n      fileAlias=\"{{ fileAlias1 }}\"\n      [httpRequestHeaders]=\"httpRequestHeaders1\"\n      [httpRequestParams]=\"httpRequestParams1\"\n    ></mat-file-upload>\n  </mat-file-upload-queue>\n</div>\n\n\n```\n","readmeFilename":"README.md"}