loading files in view

Core/Core/ClientApp/src/app/app.component.html

 <div class='container-fluid wrapper'>
   <header class="row">
     <div class="col input__header">
-      Nahraj výsledky:
+      <app-import></app-import>
     </div>
     <div class="col accout__header">
       image

Core/Core/ClientApp/src/app/app.module.ts

@@ -8,11 +8,14 @@ import { ChartModule } from 'angular-highcharts';
 import { AppComponent } from './app.component';
 import { ExpensesComponent } from './expenses/expenses.component';
 import { ExpensesService } from './expenses/expenses.service';
+import { ImportService } from './import/import.service';
+import { ImportComponent } from './import/import.component';
 
 @NgModule({
   declarations: [
     AppComponent,
-    ExpensesComponent
+    ExpensesComponent,
+    ImportComponent
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
@@ -21,7 +24,10 @@ import { ExpensesService } from './expenses/expenses.service';
     ChartModule,
     RouterModule
   ],
-  providers: [ExpensesService],
+  providers: [
+    ExpensesService,
+    ImportService
+  ],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

Core/Core/ClientApp/src/app/import/import.component.css

+

Core/Core/ClientApp/src/app/import/import.component.html

+<div>
+
+  <form method="post" enctype="multipart/form-data" asp-controller="FileUpload" asp-action="Index">
+    <div class="form-group">
+      <div class="col-md-10">
+        <p>Nahrát historii:</p>
+        <input
+               type="file"
+               id="file"
+               (change)="handleFileInput($event.target.files)"
+               multiple />
+      </div>
+    </div>
+    <div class="form-group">
+      <div class="col-md-10">
+        <input type="submit" value="Odeslat" (click)="uploadFileToActivity()"/>
+      </div>
+    </div>
+  </form>
+</div>

Core/Core/ClientApp/src/app/import/import.component.ts

+import { Component, Inject } from '@angular/core';
+import { ImportService } from './import.service';
+import { HttpClient } from '@angular/common/http';
+
+@Component({
+    selector: 'app-import',
+    templateUrl: './import.component.html',
+    styleUrls: ['./import.component.css']
+})
+/** Import component*/
+export class ImportComponent {
+  importService: ImportService;
+  Http: HttpClient;
+
+  fileToUpload: File = null;
+
+  /** Import ctor */
+  constructor(http: HttpClient) {
+    this.Http = http;
+    this.importService = new ImportService(http);
+  }
+  
+  handleFileInput(files: FileList) {
+    console.log('hanfleFileInput');
+    this.fileToUpload = files.item(0);
+  }
+
+  uploadFileToActivity() {
+    console.log('uploadFileToActivity');
+    this.importService.postFile(this.fileToUpload).subscribe(data => {
+      // do something, if upload success
+    }, error => {
+      console.log(error);
+    });
+  }
+}

Core/Core/ClientApp/src/app/import/import.service.ts

+import { Injectable, Inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+}
+)
+export class ImportService {
+
+  httpClient: HttpClient;
+  importService: ImportService;
+
+  constructor(http: HttpClient) {
+    this.httpClient = http;
+  }
+
+  postFile(fileToUpload: File): Observable<Object> {
+    //const endpoint = 'your-destination-url';
+    const formData: FormData = new FormData();
+    formData.append('fileKey', fileToUpload, fileToUpload.name);
+    return this.httpClient.post('api/Import', formData);
+      //.post(endpoint, formData, { headers: yourHeadersConfig })
+      //.map(() => { return true; })
+      //.catch((e) => console.log(e));
+  }
+}

Core/Core/Controllers/ImportController.cs

+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Http;
+using Microsoft.AspNetCore.Mvc;
+
+namespace Core.Controllers
+{
+    [Route("api/[controller]")]
+    [ApiController]
+    public class ImportController : ControllerBase
+    {
+        // GET: api/Import
+        [HttpGet]
+        public IEnumerable<string> Get()
+        {
+            return new string[] { "value1", "value2" };
+        }
+
+        // GET: api/Import/5
+        [HttpGet("{id}", Name = "Get")]
+        public string Get(int id)
+        {
+            return "value";
+        }
+
+        // POST: api/Import
+        [HttpPost]
+        [RequestFormLimits(MultipartBodyLengthLimit = 268435456)]// Set the limit to 256 MB
+        public async Task<IActionResult> Post([FromForm] List<IFormFile> files)
+        {
+            long size = files.Sum(f => f.Length);
+
+            var filePaths = new List<string>();
+            foreach (var formFile in files)
+            {
+                if (formFile.Length <= 0)
+                    continue;
+
+                // full path to file in temp location
+                var filePath = Path.GetTempFileName();
+                filePaths.Add(filePath);
+
+                using (var stream = new FileStream(filePath, FileMode.Create))
+                {
+                    await formFile.CopyToAsync(stream);
+                }
+            }
+
+            // process uploaded files
+            // Don't rely on or trust the FileName property without validation.
+
+            return Ok(new { count = files.Count, size, filePaths });
+        }
+
+        // PUT: api/Import/5
+        [HttpPut("{id}")]
+        public void Put(int id, [FromBody] string value)
+        {
+        }
+
+        // DELETE: api/ApiWithActions/5
+        [HttpDelete("{id}")]
+        public void Delete(int id)
+        {
+        }
+    }
+}

Core/Core/Core.csproj

@@ -25,6 +25,7 @@
     <PackageReference Include="MathNet.Numerics" Version="4.8.1" />
     <PackageReference Include="Microsoft.AspNetCore.App" />
     <PackageReference Include="Microsoft.AspNetCore.Razor.Design" Version="2.2.0" PrivateAssets="All" />
+    <PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="2.2.4" />
     <PackageReference Include="NLog.Config" Version="4.6.2" />
   </ItemGroup>
 
@@ -35,6 +36,14 @@
     <None Include="$(SpaRoot)**" Exclude="$(SpaRoot)node_modules\**" />
   </ItemGroup>
 
+  <ItemGroup>
+    <None Remove="ClientApp\src\app\import\import.service.ts" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <TypeScriptCompile Include="ClientApp\src\app\import\import.service.ts" />
+  </ItemGroup>
+
   <Target Name="DebugEnsureNodeEnv" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('$(SpaRoot)node_modules') ">
     <!-- Ensure Node.js is installed -->
     <Exec Command="node --version" ContinueOnError="true">

Core/ImporterCSV/DocumentLayout.cs

@@ -43,7 +43,7 @@ namespace ImporterCSV
             string str;
             str = AccountType + delimiter;
-            str+= Account + delimiter;
+            str += Account + delimiter;
             str += Date.ToString() + delimiter;
             str += Amount + delimiter;
             str += Currency + delimiter;