Finished implementation of file uploading on post creating; post service can now upload files

4 files changed, 9 insertions, 6 deletions

diff --git a/src/DevHive.Angular/src/app/components/feed/feed.component.html b/src/DevHive.Angular/src/app/components/feed/feed.component.html
index 055ca16..f394cad 100644
--- a/src/DevHive.Angular/src/app/components/feed/feed.component.html
+++ b/src/DevHive.Angular/src/app/components/feed/feed.component.html
@@ -23,7 +23,7 @@
 						<input id="top-bar-create-post" type="text" formControlName="newPostMessage" placeholder="What's on your mind?"/>
 						<input type="submit" style="display: none" /> <!-- You need this element, so when you press enter the request is sent -->
 						<img id="attachment-img" src="assets/images/paper-clip.png">
-						<input id="file-upload" type="file" formControlName="fileUpload" (change)="onFileUpload($event)">
+						<input id="file-upload" type="file" formControlName="fileUpload" (change)="onFileUpload($event)" multiple>
 					</div>
 					<div id="attachments">
 						<div *ngFor="let file of files" class="attachment">
diff --git a/src/DevHive.Angular/src/app/components/feed/feed.component.ts b/src/DevHive.Angular/src/app/components/feed/feed.component.ts
index 7ce1133..1d9a7c2 100644
--- a/src/DevHive.Angular/src/app/components/feed/feed.component.ts
+++ b/src/DevHive.Angular/src/app/components/feed/feed.component.ts
@@ -89,7 +89,7 @@ export class FeedComponent implements OnInit {
   }
 
   onFileUpload(event: any): void {
-    this.files.push(event.target.files[0]);
+    this.files.push(...event.target.files);
     this.createPostFormGroup.get('fileUpload')?.reset();
   }
 
@@ -100,7 +100,7 @@ export class FeedComponent implements OnInit {
   createPost(): void {
     const postMessage = this.createPostFormGroup.get('newPostMessage')?.value;
 
-    this._postService.createPostWithSessionStorageRequest(postMessage).subscribe(
+    this._postService.createPostWithSessionStorageRequest(postMessage, this.files).subscribe(
       (result: object) => {
         this.goToProfile();
       }
diff --git a/src/DevHive.Angular/src/app/services/post.service.ts b/src/DevHive.Angular/src/app/services/post.service.ts
index 0c472bb..0f3a4e2 100644
--- a/src/DevHive.Angular/src/app/services/post.service.ts
+++ b/src/DevHive.Angular/src/app/services/post.service.ts
@@ -20,11 +20,11 @@ export class PostService {
 
   /* Requests from session storage */
 
-  createPostWithSessionStorageRequest(postMessage: string): Observable<object> {
+  createPostWithSessionStorageRequest(postMessage: string, files: File[]): Observable<object> {
     const userId = this._tokenService.getUserIdFromSessionStorageToken();
     const token = this._tokenService.getTokenFromSessionStorage();
 
-    return this.createPostRequest(userId, token, postMessage);
+    return this.createPostRequest(userId, token, postMessage, files);
   }
 
   putPostWithSessionStorageRequest(postId: Guid, newMessage: string): Observable<object> {
@@ -42,9 +42,12 @@ export class PostService {
 
   /* Post requests */
 
-  createPostRequest(userId: Guid, authToken: string, postMessage: string): Observable<object> {
+  createPostRequest(userId: Guid, authToken: string, postMessage: string, files: File[]): Observable<object> {
     const form = new FormData();
     form.append('message', postMessage);
+    for (const file of files) {
+      form.append('files', file, file.name);
+    }
     const options = {
       params: new HttpParams().set('UserId', userId.toString()),
       headers: new HttpHeaders().set('Authorization', 'Bearer ' + authToken)
diff --git a/src/DevHive.Angular/src/assets/images/paper-clip.png b/src/DevHive.Angular/src/assets/images/paper-clip.png
new file mode 100644
index 0000000..46ce0a7
--- /dev/null
+++ b/src/DevHive.Angular/src/assets/images/paper-clip.png