[
  {
    "path": "LICENSE",
    "content": "MIT License\n\nCopyright (c) 2019 Lukas Marx\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "![image](https://raw.githubusercontent.com/LukasMarx/angular-file-upload/master/angular-file-upload-component.png)\n# Creating a File Upload Component in Angular\n## Angular version: 8.0.0\n\nCreating file-upload components can be quite hard. \n\nNot only because you need to deal with files in JavaScript. Also, because you need an API to test against before you can actually start coding.\n\nIn this tutorial, we will learn how to do both. \n\nFirst, we will create a simple express server with just one route to accept file uploads.\n\nAfterward, we will create an angular application from scratch and build a beautiful file-upload component using the angular material ui-component-library.\n\nHere is what the final result will look like:\n\n![image](https://raw.githubusercontent.com/LukasMarx/angular-file-upload/master/angular-file-upload-result.png)\n\nReady?\n\nLet's start coding! \n\n[Read the full article at malcoded.com!](https://malcoded.com/posts/angular-file-upload-component-with-express)\n"
  },
  {
    "path": "client/.editorconfig",
    "content": "# Editor configuration, see https://editorconfig.org\nroot = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size = 2\ninsert_final_newline = true\ntrim_trailing_whitespace = true\n\n[*.md]\nmax_line_length = off\ntrim_trailing_whitespace = false\n"
  },
  {
    "path": "client/.gitignore",
    "content": "# See http://help.github.com/ignore-files/ for more about ignoring files.\n\n# compiled output\n/dist\n/dist-server\n/tmp\n/out-tsc\n# Only exists if Bazel was run\n/bazel-out\n\n# dependencies\n/node_modules\n\n# profiling files\nchrome-profiler-events.json\nspeed-measure-plugin.json\n\n# IDEs and editors\n/.idea\n.project\n.classpath\n.c9/\n*.launch\n.settings/\n*.sublime-workspace\n\n# IDE - VSCode\n.vscode/*\n!.vscode/settings.json\n!.vscode/tasks.json\n!.vscode/launch.json\n!.vscode/extensions.json\n.history/*\n\n# misc\n/.sass-cache\n/connect.lock\n/coverage\n/libpeerconnection.log\nnpm-debug.log\nyarn-error.log\ntestem.log\n/typings\npackage-look.json\n\n# e2e\n/e2e/*.js\n/e2e/*.map\n\n# System Files\n.DS_Store\nThumbs.db\n"
  },
  {
    "path": "client/README.md",
    "content": "# FileUploader\n\nThis project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.0.1.\n\n## Development server\n\nRun `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.\n\n## Code scaffolding\n\nRun `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.\n\n## Build\n\nRun `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.\n"
  },
  {
    "path": "client/angular.json",
    "content": "{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"file-uploader\": {\n      \"projectType\": \"application\",\n      \"schematics\": {\n        \"@schematics/angular:component\": {\n          \"style\": \"scss\"\n        }\n      },\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:browser\",\n          \"options\": {\n            \"outputPath\": \"dist/file-uploader\",\n            \"index\": \"src/index.html\",\n            \"main\": \"src/main.ts\",\n            \"polyfills\": \"src/polyfills.ts\",\n            \"tsConfig\": \"tsconfig.app.json\",\n            \"assets\": [\n              \"src/favicon.ico\",\n              \"src/assets\"\n            ],\n            \"styles\": [\n              \"src/styles.scss\"\n            ],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"production\": {\n              \"fileReplacements\": [\n                {\n                  \"replace\": \"src/environments/environment.ts\",\n                  \"with\": \"src/environments/environment.prod.ts\"\n                }\n              ],\n              \"optimization\": true,\n              \"outputHashing\": \"all\",\n              \"sourceMap\": false,\n              \"extractCss\": true,\n              \"namedChunks\": false,\n              \"aot\": true,\n              \"extractLicenses\": true,\n              \"vendorChunk\": false,\n              \"buildOptimizer\": true,\n              \"budgets\": [\n                {\n                  \"type\": \"initial\",\n                  \"maximumWarning\": \"2mb\",\n                  \"maximumError\": \"5mb\"\n                }\n              ]\n            }\n          }\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"options\": {\n            \"browserTarget\": \"file-uploader:build\"\n          },\n          \"configurations\": {\n            \"production\": {\n              \"browserTarget\": \"file-uploader:build:production\"\n            }\n          }\n        },\n        \"extract-i18n\": {\n          \"builder\": \"@angular-devkit/build-angular:extract-i18n\",\n          \"options\": {\n            \"browserTarget\": \"file-uploader:build\"\n          }\n        },\n        \"test\": {\n          \"builder\": \"@angular-devkit/build-angular:karma\",\n          \"options\": {\n            \"main\": \"src/test.ts\",\n            \"polyfills\": \"src/polyfills.ts\",\n            \"tsConfig\": \"tsconfig.spec.json\",\n            \"karmaConfig\": \"karma.conf.js\",\n            \"assets\": [\n              \"src/favicon.ico\",\n              \"src/assets\"\n            ],\n            \"styles\": [\n              \"src/styles.scss\"\n            ],\n            \"scripts\": []\n          }\n        },\n        \"lint\": {\n          \"builder\": \"@angular-devkit/build-angular:tslint\",\n          \"options\": {\n            \"tsConfig\": [\n              \"tsconfig.app.json\",\n              \"tsconfig.spec.json\",\n              \"e2e/tsconfig.json\"\n            ],\n            \"exclude\": [\n              \"**/node_modules/**\"\n            ]\n          }\n        },\n        \"e2e\": {\n          \"builder\": \"@angular-devkit/build-angular:protractor\",\n          \"options\": {\n            \"protractorConfig\": \"e2e/protractor.conf.js\",\n            \"devServerTarget\": \"file-uploader:serve\"\n          },\n          \"configurations\": {\n            \"production\": {\n              \"devServerTarget\": \"file-uploader:serve:production\"\n            }\n          }\n        }\n      }\n    }},\n  \"defaultProject\": \"file-uploader\"\n}\n"
  },
  {
    "path": "client/browserslist",
    "content": "# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.\n# For additional information regarding the format and rule options, please see:\n# https://github.com/browserslist/browserslist#queries\n\n# You can see what browsers were selected by your queries by running:\n#   npx browserslist\n\n> 0.5%\nlast 2 versions\nFirefox ESR\nnot dead\nnot IE 9-11 # For IE 9-11 support, remove 'not'."
  },
  {
    "path": "client/e2e/src/app.e2e-spec.ts",
    "content": "import { AppPage } from './app.po';\nimport { browser, logging } from 'protractor';\n\ndescribe('workspace-project App', () => {\n  let page: AppPage;\n\n  beforeEach(() => {\n    page = new AppPage();\n  });\n\n  it('should display welcome message', () => {\n    page.navigateTo();\n    expect(page.getTitleText()).toEqual('Welcome to file-uploader!');\n  });\n\n  afterEach(async () => {\n    // Assert that there are no errors emitted from the browser\n    const logs = await browser.manage().logs().get(logging.Type.BROWSER);\n    expect(logs).not.toContain(jasmine.objectContaining({\n      level: logging.Level.SEVERE,\n    } as logging.Entry));\n  });\n});\n"
  },
  {
    "path": "client/e2e/src/app.po.ts",
    "content": "import { browser, by, element } from 'protractor';\n\nexport class AppPage {\n  navigateTo() {\n    return browser.get(browser.baseUrl) as Promise<any>;\n  }\n\n  getTitleText() {\n    return element(by.css('app-root h1')).getText() as Promise<string>;\n  }\n}\n"
  },
  {
    "path": "client/e2e/tsconfig.json",
    "content": "{\n  \"extends\": \"../tsconfig.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"../out-tsc/e2e\",\n    \"module\": \"commonjs\",\n    \"target\": \"es5\",\n    \"types\": [\n      \"jasmine\",\n      \"jasminewd2\",\n      \"node\"\n    ]\n  }\n}\n"
  },
  {
    "path": "client/karma.conf.js",
    "content": "// Karma configuration file, see link for more information\n// https://karma-runner.github.io/1.0/config/configuration-file.html\n\nmodule.exports = function (config) {\n  config.set({\n    basePath: '',\n    frameworks: ['jasmine', '@angular-devkit/build-angular'],\n    plugins: [\n      require('karma-jasmine'),\n      require('karma-chrome-launcher'),\n      require('karma-jasmine-html-reporter'),\n      require('karma-coverage-istanbul-reporter'),\n      require('@angular-devkit/build-angular/plugins/karma')\n    ],\n    client: {\n      clearContext: false // leave Jasmine Spec Runner output visible in browser\n    },\n    coverageIstanbulReporter: {\n      dir: require('path').join(__dirname, './coverage/file-uploader'),\n      reports: ['html', 'lcovonly', 'text-summary'],\n      fixWebpackSourcePaths: true\n    },\n    reporters: ['progress', 'kjhtml'],\n    port: 9876,\n    colors: true,\n    logLevel: config.LOG_INFO,\n    autoWatch: true,\n    browsers: ['Chrome'],\n    singleRun: false,\n    restartOnFileChange: true\n  });\n};\n"
  },
  {
    "path": "client/package.json",
    "content": "{\n  \"name\": \"file-uploader\",\n  \"version\": \"0.0.0\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build --prod\",\n    \"test\": \"ng test\",\n    \"lint\": \"ng lint\",\n    \"e2e\": \"ng e2e\"\n  },\n  \"private\": true,\n  \"dependencies\": {\n    \"@angular/animations\": \"8.0.0\",\n    \"@angular/cdk\": \"8.0.0\",\n    \"@angular/common\": \"8.0.0\",\n    \"@angular/compiler\": \"8.0.0\",\n    \"@angular/core\": \"8.0.0\",\n    \"@angular/flex-layout\": \"8.0.0-beta.26\",\n    \"@angular/forms\": \"8.0.0\",\n    \"@angular/http\": \"7.2.15\",\n    \"@angular/material\": \"8.0.0\",\n    \"@angular/platform-browser\": \"8.0.0\",\n    \"@angular/platform-browser-dynamic\": \"8.0.0\",\n    \"@angular/router\": \"8.0.0\",\n    \"core-js\": \"3.1.3\",\n    \"rxjs\": \"6.5.2\",\n    \"tslib\": \"1.9.3\",\n    \"zone.js\": \"0.9.1\"\n  },\n  \"devDependencies\": {\n    \"@angular-devkit/build-angular\": \"0.800.1\",\n    \"@angular/cli\": \"8.0.1\",\n    \"@angular/compiler-cli\": \"8.0.0\",\n    \"@angular/language-service\": \"8.0.0\",\n    \"@types/jasmine\": \"3.3.13\",\n    \"@types/jasminewd2\": \"2.0.6\",\n    \"@types/node\": \"12.0.4\",\n    \"codelyzer\": \"5.0.1\",\n    \"jasmine-core\": \"3.4.0\",\n    \"jasmine-spec-reporter\": \"4.2.1\",\n    \"karma\": \"4.1.0\",\n    \"karma-chrome-launcher\": \"2.2.0\",\n    \"karma-coverage-istanbul-reporter\": \"2.0.5\",\n    \"karma-jasmine\": \"2.0.1\",\n    \"karma-jasmine-html-reporter\": \"1.4.2\",\n    \"protractor\": \"5.4.2\",\n    \"ts-node\": \"8.2.0\",\n    \"tslint\": \"5.17.0\",\n    \"typescript\": \"3.4.5\"\n  }\n}\n"
  },
  {
    "path": "client/src/app/app.component.html",
    "content": "<!--The content below is only a placeholder and can be replaced.-->\n<app-upload></app-upload>"
  },
  {
    "path": "client/src/app/app.component.scss",
    "content": ""
  },
  {
    "path": "client/src/app/app.component.spec.ts",
    "content": "import { TestBed, async } from '@angular/core/testing';\nimport { AppComponent } from './app.component';\n\ndescribe('AppComponent', () => {\n  beforeEach(async(() => {\n    TestBed.configureTestingModule({\n      declarations: [\n        AppComponent\n      ],\n    }).compileComponents();\n  }));\n\n  it('should create the app', () => {\n    const fixture = TestBed.createComponent(AppComponent);\n    const app = fixture.debugElement.componentInstance;\n    expect(app).toBeTruthy();\n  });\n\n  it(`should have as title 'ng8'`, () => {\n    const fixture = TestBed.createComponent(AppComponent);\n    const app = fixture.debugElement.componentInstance;\n    expect(app.title).toEqual('ng8');\n  });\n\n  it('should render title in a h1 tag', () => {\n    const fixture = TestBed.createComponent(AppComponent);\n    fixture.detectChanges();\n    const compiled = fixture.debugElement.nativeElement;\n    expect(compiled.querySelector('h1').textContent).toContain('Welcome to ng8!');\n  });\n});\n"
  },
  {
    "path": "client/src/app/app.component.ts",
    "content": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.scss']\n})\nexport class AppComponent { }\n"
  },
  {
    "path": "client/src/app/app.module.ts",
    "content": "import { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\nimport { AppComponent } from './app.component';\nimport { UploadModule } from './upload/upload.module';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    UploadModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n"
  },
  {
    "path": "client/src/app/upload/dialog/dialog.component.html",
    "content": "<input type=\"file\" #file style=\"display: none\" (change)=\"onFilesAdded()\" multiple />\n<div class=\"container\" fxLayout=\"column\" fxLayoutAlign=\"space-evenly stretch\">\n  <h1 mat-dialog-title>Upload Files</h1>\n  <div>\n    <button [disabled]=\"uploading || uploadSuccessful\" mat-raised-button color=\"primary\" class=\"add-files-btn\" (click)=\"addFiles()\">\n      Add Files\n    </button>\n  </div>\n\n  <!-- This is the content of the dialog, containing a list of the files to upload -->\n  <mat-dialog-content fxFlex>\n    <mat-list>\n      <mat-list-item *ngFor=\"let file of files\">\n\n        <h4 mat-line>{{file.name}}</h4>\n\n        <mat-progress-bar *ngIf=\"progress\" mode=\"determinate\" [value]=\"progress[file.name].progress | async\"></mat-progress-bar>\n\n      </mat-list-item>\n    </mat-list>\n  </mat-dialog-content>\n\n  <!-- This are the actions of the dialog, containing the primary and the cancel button-->\n  <mat-dialog-actions class=\"actions\">\n    <button *ngIf=\"showCancelButton\" mat-button mat-dialog-close>Cancel</button>\n    <button mat-raised-button color=\"primary\" [disabled]=\"!canBeClosed\" (click)=\"closeDialog()\">{{primaryButtonText}}</button>\n  </mat-dialog-actions>\n</div>"
  },
  {
    "path": "client/src/app/upload/dialog/dialog.component.scss",
    "content": ".add-files-btn {\r\n  float: right;\r\n}\r\n\r\n:host {\r\n  height: 100%;\r\n  display: flex;\r\n  flex: 1;\r\n  flex-direction: column;\r\n}\r\n\r\n.actions {\r\n  justify-content: flex-end;\r\n}\r\n\r\n.container {\r\n  height: 100%;\r\n}\r\n"
  },
  {
    "path": "client/src/app/upload/dialog/dialog.component.ts",
    "content": "import { Component, OnInit, ViewChild } from '@angular/core';\nimport { MatDialogRef } from '@angular/material';\nimport { UploadService } from '../upload.service';\nimport { forkJoin } from 'rxjs';\n\n@Component({\n  selector: 'app-dialog',\n  templateUrl: './dialog.component.html',\n  styleUrls: ['./dialog.component.scss']\n})\nexport class DialogComponent implements OnInit {\n  @ViewChild('file', { static: false }) file;\n\n  public files: Set<File> = new Set();\n\n  constructor(public dialogRef: MatDialogRef<DialogComponent>, public uploadService: UploadService) { }\n\n  ngOnInit() { }\n\n  progress;\n  canBeClosed = true;\n  primaryButtonText = 'Upload';\n  showCancelButton = true;\n  uploading = false;\n  uploadSuccessful = false;\n\n  onFilesAdded() {\n    const files: { [key: string]: File } = this.file.nativeElement.files;\n    for (let key in files) {\n      if (!isNaN(parseInt(key))) {\n        this.files.add(files[key]);\n      }\n    }\n  }\n\n  addFiles() {\n    this.file.nativeElement.click();\n  }\n\n  closeDialog() {\n    // if everything was uploaded already, just close the dialog\n    if (this.uploadSuccessful) {\n      return this.dialogRef.close();\n    }\n\n    // set the component state to \"uploading\"\n    this.uploading = true;\n\n    // start the upload and save the progress map\n    this.progress = this.uploadService.upload(this.files);\n    console.log(this.progress);\n    for (const key in this.progress) {\n      this.progress[key].progress.subscribe(val => console.log(val));\n    }\n\n    // convert the progress map into an array\n    let allProgressObservables = [];\n    for (let key in this.progress) {\n      allProgressObservables.push(this.progress[key].progress);\n    }\n\n    // Adjust the state variables\n\n    // The OK-button should have the text \"Finish\" now\n    this.primaryButtonText = 'Finish';\n\n    // The dialog should not be closed while uploading\n    this.canBeClosed = false;\n    this.dialogRef.disableClose = true;\n\n    // Hide the cancel-button\n    this.showCancelButton = false;\n\n    // When all progress-observables are completed...\n    forkJoin(allProgressObservables).subscribe(end => {\n      // ... the dialog can be closed again...\n      this.canBeClosed = true;\n      this.dialogRef.disableClose = false;\n\n      // ... the upload was successful...\n      this.uploadSuccessful = true;\n\n      // ... and the component is no longer uploading\n      this.uploading = false;\n    });\n  }\n}\n"
  },
  {
    "path": "client/src/app/upload/upload.component.html",
    "content": "<button mat-raised-button (click)=\"openUploadDialog()\">Upload</button>"
  },
  {
    "path": "client/src/app/upload/upload.component.scss",
    "content": ""
  },
  {
    "path": "client/src/app/upload/upload.component.ts",
    "content": "import { Component } from '@angular/core';\nimport { MatDialog } from '@angular/material';\nimport { DialogComponent } from './dialog/dialog.component';\nimport { UploadService } from './upload.service';\n\n@Component({\n  selector: 'app-upload',\n  templateUrl: './upload.component.html',\n  styleUrls: ['./upload.component.scss']\n})\nexport class UploadComponent {\n  constructor(public dialog: MatDialog, public uploadService: UploadService) { }\n\n  public openUploadDialog() {\n    let dialogRef = this.dialog.open(DialogComponent, { width: '50%', height: '50%' });\n  }\n}\n"
  },
  {
    "path": "client/src/app/upload/upload.module.ts",
    "content": "import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { UploadComponent } from './upload.component';\nimport { MatButtonModule, MatDialogModule, MatListModule, MatProgressBarModule } from '@angular/material';\nimport { DialogComponent } from './dialog/dialog.component';\nimport { BrowserAnimationsModule } from '@angular/platform-browser/animations';\nimport { FlexLayoutModule } from '@angular/flex-layout';\nimport { UploadService } from './upload.service';\nimport { HttpClientModule } from '@angular/common/http';\n\n@NgModule({\n  imports: [CommonModule, MatButtonModule, MatDialogModule, MatListModule, FlexLayoutModule, HttpClientModule, BrowserAnimationsModule, MatProgressBarModule],\n  declarations: [UploadComponent, DialogComponent],\n  exports: [UploadComponent],\n  entryComponents: [DialogComponent], // Add the DialogComponent as entry component\n  providers: [UploadService]\n})\nexport class UploadModule {}\n"
  },
  {
    "path": "client/src/app/upload/upload.service.ts",
    "content": "import { Injectable } from '@angular/core';\nimport {\n  HttpClient,\n  HttpRequest,\n  HttpEventType,\n  HttpResponse\n} from '@angular/common/http';\nimport { Subject, Observable } from 'rxjs';\n\nconst url = 'http://localhost:3000/upload';\n\n@Injectable()\nexport class UploadService {\n  constructor(private http: HttpClient) { }\n\n  public upload(\n    files: Set<File>\n  ): { [key: string]: { progress: Observable<number> } } {\n    // this will be the our resulting map\n    const status: { [key: string]: { progress: Observable<number> } } = {};\n\n    files.forEach(file => {\n      // create a new multipart-form for every file\n      const formData: FormData = new FormData();\n      formData.append('file', file, file.name);\n\n      // create a http-post request and pass the form\n      // tell it to report the upload progress\n      const req = new HttpRequest('POST', url, formData, {\n        reportProgress: true\n      });\n\n      // create a new progress-subject for every file\n      const progress = new Subject<number>();\n\n      // send the http-request and subscribe for progress-updates\n\n      const startTime = new Date().getTime();\n      this.http.request(req).subscribe(event => {\n        if (event.type === HttpEventType.UploadProgress) {\n          // calculate the progress percentage\n\n          const percentDone = Math.round((100 * event.loaded) / event.total);\n          // pass the percentage into the progress-stream\n          progress.next(percentDone);\n        } else if (event instanceof HttpResponse) {\n          // Close the progress-stream if we get an answer form the API\n          // The upload is complete\n          progress.complete();\n        }\n      });\n\n      // Save every progress-observable in a map of all observables\n      status[file.name] = {\n        progress: progress.asObservable()\n      };\n    });\n\n    // return the map of progress.observables\n    return status;\n  }\n}\n"
  },
  {
    "path": "client/src/assets/.gitkeep",
    "content": ""
  },
  {
    "path": "client/src/environments/environment.prod.ts",
    "content": "export const environment = {\n  production: true\n};\n"
  },
  {
    "path": "client/src/environments/environment.ts",
    "content": "// This file can be replaced during build by using the `fileReplacements` array.\n// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.\n// The list of file replacements can be found in `angular.json`.\n\nexport const environment = {\n  production: false\n};\n\n/*\n * For easier debugging in development mode, you can import the following file\n * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.\n *\n * This import should be commented out in production mode because it will have a negative impact\n * on performance if an error is thrown.\n */\n// import 'zone.js/dist/zone-error';  // Included with Angular CLI.\n"
  },
  {
    "path": "client/src/index.html",
    "content": "<!doctype html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>FileUploader</title>\n  <base href=\"/\">\n\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n  <link rel=\"icon\" type=\"image/x-icon\" href=\"favicon.ico\">\n</head>\n<body>\n  <app-root></app-root>\n</body>\n</html>\n"
  },
  {
    "path": "client/src/main.ts",
    "content": "import { enableProdMode } from '@angular/core';\nimport { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\n\nimport { AppModule } from './app/app.module';\nimport { environment } from './environments/environment';\n\nif (environment.production) {\n  enableProdMode();\n}\n\nplatformBrowserDynamic().bootstrapModule(AppModule)\n  .catch(err => console.error(err));\n"
  },
  {
    "path": "client/src/polyfills.ts",
    "content": "/**\n * This file includes polyfills needed by Angular and is loaded before the app.\n * You can add your own extra polyfills to this file.\n *\n * This file is divided into 2 sections:\n *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.\n *   2. Application imports. Files imported after ZoneJS that should be loaded before your main\n *      file.\n *\n * The current setup is for so-called \"evergreen\" browsers; the last versions of browsers that\n * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),\n * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.\n *\n * Learn more in https://angular.io/guide/browser-support\n */\n\n/***************************************************************************************************\n * BROWSER POLYFILLS\n */\n\n/** IE10 and IE11 requires the following for NgClass support on SVG elements */\n// import 'classlist.js';  // Run `npm install --save classlist.js`.\n\n/**\n * Web Animations `@angular/platform-browser/animations`\n * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.\n * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).\n */\n// import 'web-animations-js';  // Run `npm install --save web-animations-js`.\n\n/**\n * By default, zone.js will patch all possible macroTask and DomEvents\n * user can disable parts of macroTask/DomEvents patch by setting following flags\n * because those flags need to be set before `zone.js` being loaded, and webpack\n * will put import in the top of bundle, so user need to create a separate file\n * in this directory (for example: zone-flags.ts), and put the following flags\n * into that file, and then add the following code before importing zone.js.\n * import './zone-flags.ts';\n *\n * The flags allowed in zone-flags.ts are listed here.\n *\n * The following flags will work for all browsers.\n *\n * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame\n * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick\n * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames\n *\n *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js\n *  with the following flag, it will bypass `zone.js` patch for IE/Edge\n *\n *  (window as any).__Zone_enable_cross_context_check = true;\n *\n */\n\n/***************************************************************************************************\n * Zone JS is required by default for Angular itself.\n */\nimport 'zone.js/dist/zone';  // Included with Angular CLI.\n\n\n/***************************************************************************************************\n * APPLICATION IMPORTS\n */\n"
  },
  {
    "path": "client/src/styles.scss",
    "content": "/* You can add global styles to this file, and also import other style files */\n@import '~@angular/material/prebuilt-themes/indigo-pink.css';\n"
  },
  {
    "path": "client/src/test.ts",
    "content": "// This file is required by karma.conf.js and loads recursively all the .spec and framework files\n\nimport 'zone.js/dist/zone-testing';\nimport { getTestBed } from '@angular/core/testing';\nimport {\n  BrowserDynamicTestingModule,\n  platformBrowserDynamicTesting\n} from '@angular/platform-browser-dynamic/testing';\n\ndeclare const require: any;\n\n// First, initialize the Angular testing environment.\ngetTestBed().initTestEnvironment(\n  BrowserDynamicTestingModule,\n  platformBrowserDynamicTesting()\n);\n// Then we find all the tests.\nconst context = require.context('./', true, /\\.spec\\.ts$/);\n// And load the modules.\ncontext.keys().map(context);\n"
  },
  {
    "path": "client/tsconfig.app.json",
    "content": "{\n  \"extends\": \"./tsconfig.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"./out-tsc/app\",\n    \"types\": []\n  },\n  \"include\": [\n    \"src/**/*.ts\"\n  ],\n  \"exclude\": [\n    \"src/test.ts\",\n    \"src/**/*.spec.ts\"\n  ]\n}\n"
  },
  {
    "path": "client/tsconfig.json",
    "content": "{\n  \"compileOnSave\": false,\n  \"compilerOptions\": {\n    \"baseUrl\": \"./\",\n    \"outDir\": \"./dist/out-tsc\",\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"module\": \"esnext\",\n    \"moduleResolution\": \"node\",\n    \"emitDecoratorMetadata\": true,\n    \"experimentalDecorators\": true,\n    \"importHelpers\": true,\n    \"target\": \"es2015\",\n    \"typeRoots\": [\n      \"node_modules/@types\"\n    ],\n    \"lib\": [\n      \"es2018\",\n      \"dom\"\n    ]\n  }\n}\n"
  },
  {
    "path": "client/tsconfig.spec.json",
    "content": "{\n  \"extends\": \"./tsconfig.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"./out-tsc/spec\",\n    \"types\": [\n      \"jasmine\",\n      \"node\"\n    ]\n  },\n  \"files\": [\n    \"src/test.ts\",\n    \"src/polyfills.ts\"\n  ],\n  \"include\": [\n    \"src/**/*.spec.ts\",\n    \"src/**/*.d.ts\"\n  ]\n}\n"
  },
  {
    "path": "client/tslint.json",
    "content": "{\n  \"extends\": \"tslint:recommended\",\n  \"rules\": {\n    \"array-type\": false,\n    \"arrow-parens\": false,\n    \"deprecation\": {\n      \"severity\": \"warn\"\n    },\n    \"component-class-suffix\": true,\n    \"contextual-lifecycle\": true,\n    \"directive-class-suffix\": true,\n    \"directive-selector\": [\n      true,\n      \"attribute\",\n      \"app\",\n      \"camelCase\"\n    ],\n    \"component-selector\": [\n      true,\n      \"element\",\n      \"app\",\n      \"kebab-case\"\n    ],\n    \"import-blacklist\": [\n      true,\n      \"rxjs/Rx\"\n    ],\n    \"interface-name\": false,\n    \"max-classes-per-file\": false,\n    \"max-line-length\": [\n      true,\n      140\n    ],\n    \"member-access\": false,\n    \"member-ordering\": [\n      true,\n      {\n        \"order\": [\n          \"static-field\",\n          \"instance-field\",\n          \"static-method\",\n          \"instance-method\"\n        ]\n      }\n    ],\n    \"no-consecutive-blank-lines\": false,\n    \"no-console\": [\n      true,\n      \"debug\",\n      \"info\",\n      \"time\",\n      \"timeEnd\",\n      \"trace\"\n    ],\n    \"no-empty\": false,\n    \"no-inferrable-types\": [\n      true,\n      \"ignore-params\"\n    ],\n    \"no-non-null-assertion\": true,\n    \"no-redundant-jsdoc\": true,\n    \"no-switch-case-fall-through\": true,\n    \"no-use-before-declare\": true,\n    \"no-var-requires\": false,\n    \"object-literal-key-quotes\": [\n      true,\n      \"as-needed\"\n    ],\n    \"object-literal-sort-keys\": false,\n    \"ordered-imports\": false,\n    \"quotemark\": [\n      true,\n      \"single\"\n    ],\n    \"trailing-comma\": false,\n    \"no-conflicting-lifecycle\": true,\n    \"no-host-metadata-property\": true,\n    \"no-input-rename\": true,\n    \"no-inputs-metadata-property\": true,\n    \"no-output-native\": true,\n    \"no-output-on-prefix\": true,\n    \"no-output-rename\": true,\n    \"no-outputs-metadata-property\": true,\n    \"template-banana-in-box\": true,\n    \"template-no-negated-async\": true,\n    \"use-lifecycle-interface\": true,\n    \"use-pipe-transform-interface\": true\n  },\n  \"rulesDirectory\": [\n    \"codelyzer\"\n  ]\n}\n"
  },
  {
    "path": "server/.gitignore",
    "content": "node_modules"
  },
  {
    "path": "server/package.json",
    "content": "{\n  \"name\": \"image-upload-tutorial-example\",\n  \"version\": \"1.0.0\",\n  \"description\": \"\",\n  \"main\": \"index.js\",\n  \"scripts\": {\n    \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n  },\n  \"author\": \"\",\n  \"license\": \"ISC\",\n  \"dependencies\": {\n    \"cors\": \"^2.8.5\",\n    \"express\": \"^4.17.1\",\n    \"formidable\": \"^1.2.1\"\n  }\n}\n"
  },
  {
    "path": "server/server.js",
    "content": "const express = require('express');\r\nconst upload = require('./upload');\r\nconst cors = require('cors');\r\n\r\nconst server = express();\r\n\r\nvar corsOptions = {\r\n  origin: '*',\r\n  optionsSuccessStatus: 200\r\n};\r\n\r\nserver.use(cors(corsOptions));\r\n\r\nserver.post('/upload', upload);\r\n\r\nserver.listen(3000, () => {\r\n  console.log('Server started!');\r\n});\r\n"
  },
  {
    "path": "server/upload.js",
    "content": "const IncomingForm = require('formidable').IncomingForm;\r\nconst fs = require('fs');\r\n\r\nmodule.exports = function upload(req, res) {\r\n  const form = new IncomingForm();\r\n\r\n  form.on('file', (field, file) => {\r\n    // Do something with the file\r\n    // e.g. save it to the database\r\n    // you can access it using file.path\r\n    console.log('file', file.name);\r\n    const readStream = fs.createReadStream(file.path);\r\n  });\r\n  form.on('end', () => {\r\n    res.json();\r\n  });\r\n  form.parse(req);\r\n};\r\n"
  }
]