Move to axios

frontend/package.json

@@ -38,6 +38,7 @@
     "@types/resize-observer-browser": "^0.1.7",
     "@types/validator": "^13.7.10",
     "ackee-tracker": "^5.1.0",
+    "axios": "^1.2.1",
     "bootstrap": "^5.2.3",
     "caniuse-lite": "^1.0.30001441",
     "fuse.js": "^6.6.2",

frontend/src/app/components/picsur-img/picsur-img.component.ts

@@ -6,7 +6,7 @@ import {
   Input,
   OnChanges,
   SimpleChanges,
-  ViewChild,
+  ViewChild
 } from '@angular/core';
 import { FileType, ImageFileType } from 'picsur-shared/dist/dto/mimes.dto';
 import { AsyncFailable, HasFailed } from 'picsur-shared/dist/types';
@@ -85,7 +85,7 @@ export class PicsurImgComponent implements OnChanges {
 
       this.state = PicsurImgState.Canvas;
     } else {
-      const result = await this.apiService.getBuffer(url);
+      const result = await this.apiService.getBuffer(url).result;
       if (HasFailed(result)) return result;
 
       const img = this.img.nativeElement;
@@ -99,12 +99,12 @@ export class PicsurImgComponent implements OnChanges {
   }
 
   private async getFileType(url: string): AsyncFailable<FileType> {
-    const response = await this.apiService.head(url);
+    const response = await this.apiService.head(url).result;
     if (HasFailed(response)) {
       return response;
     }
 
-    const mimeHeader = response.get('content-type') ?? '';
+    const mimeHeader = response['content-type'] ?? '';
     const mime = mimeHeader.split(';')[0];
 
     return ParseMime2FileType(mime);

frontend/src/app/models/dto/images-upload-request.dto.ts

@@ -0,0 +1,13 @@
+import { MultiPartRequest } from './multi-part-request.dto';
+
+export class ImagesUploadRequest implements MultiPartRequest {
+  constructor(private images: File[]) {}
+
+  public createFormData(): FormData {
+    const data = new FormData();
+    for (let i = 0; i < this.images.length; i++) {
+      data.append(`images[${i}]`, this.images[i]);
+    }
+    return data;
+  }
+}