Some picture upload templates.

.vs/VSWorkspaceState.json

@@ -3,8 +3,9 @@
     "",
     "\\src",
     "\\src\\app",
-    "\\src\\app\\boards",
+    "\\src\\app\\send-post",
     "\\src\\app\\services"
   ],
+  "SelectedNode": "\\src\\app\\services\\api-chat.service.ts",
   "PreviewInSolutionExplorer": false
 }

src/app/boards/post/post.component.html

@@ -1,5 +1,5 @@
 <div class="post">
-  <img src="http://static.vdk2ch.ru:15555/test-public/оладий.jpg" alt="anonpls" width="140"> #  {{post.Id}}
+  <img *ngIf="post.ImgURL != '0'" src="{{post.ImgURL}}" alt="anonpls" width="140"> #  {{post.Id}}
   <h3>{{post.Timestamp}}</h3>
   <h2>{{post.Text}}</h2>
 </div>

src/app/models/post.ts

@@ -2,5 +2,5 @@ export interface SinglePost {
   Timestamp: string
   Id: number
   Text: string
-
+  ImgURL: string
 }

src/app/send-post/send-post.component.html

@@ -5,5 +5,7 @@
     <button (click)="sendPost(textToPost.value)">Отправить</button>
   </p>
   <h1>Загрузить картинку:</h1>
-    <input type="file" (change)="sendPic($event)">
+  <input type="file" #file placeholder="Загрузить картинку" (change)="sendPic($event)" style="display:none;">
+  <button type="button" class="btn btn-success" (click)="file.click()">Загрузить картинку</button>
+  <p>{{filename}} : {{progress}}</p>
 </div>

src/app/send-post/send-post.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
 import { ApiChatService } from '../services/api-chat.service';
 import { MinIoService } from '../services/min-io.service.'
 
@@ -9,15 +9,22 @@ import { MinIoService } from '../services/min-io.service.'
 })
 export class SendPostComponent implements OnInit {
 
+  progress: number;
+  message: string;
+  filename = '';
+
   constructor(public apiChatService: ApiChatService, public minIoService: MinIoService) {
   }
 
+
   sendPost(text: string) {
     this.apiChatService.sendPostToApi(text).subscribe();
   }
 
   sendPic(event: any) {
-    this.minIoService.SendPicture(event);
+    this.filename = event.target.files[0].name;
+    //console.log(event.target.files[0]);
+    this.apiChatService.sendpic(event.target.files[0]).subscribe();
   }
 
   ngOnInit(): void {

src/app/services/api-chat.service.ts

@@ -11,7 +11,7 @@ export class ApiChatService {
   }
 
   getPosts(): Observable<SinglePost[]> {
-    console.log("Получаю данные из сервиса");
+    console.log("Получаю посты");
     return this.http.get<SinglePost[]>('http://api.vdk2ch.ru:5000/List/');
     //return this.http.get<SinglePost[]>('http://localhost:7141/List/');
   }
@@ -22,9 +22,18 @@ export class ApiChatService {
     {
       Timestamp: text,
       Id: 0,
-      Text: text
+      Text: text,
+      Picture: text
     }
-      return this.http.post('http://api.vdk2ch.ru:5000/PostTo', postToSend)
-      //return this.http.post('http://localhost:7141/PostTo', postToSend)
+    //return this.http.post('http://api.vdk2ch.ru:5000/PostTo', postToSend)
+    return this.http.post('http://localhost:7141/PostTo', postToSend)
+
   }
+  sendpic(picToSend: File) {
+    const formData = new FormData();
+    formData.append('file', picToSend, picToSend.name);
+    return this.http.post('http://localhost:7141/UploadPic', formData)
   }
+
+  }
+