Rename parent directory

bytefy.webapp/src/tools/server-side/image-converter/image-converter.component.ts

@@ -0,0 +1,101 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { map, Subscription } from 'rxjs';
+import { DropdownModule } from 'primeng/dropdown';
+import { AutoCompleteCompleteEvent, AutoCompleteModule } from 'primeng/autocomplete';
+import { FormsModule } from '@angular/forms';
+import { ImageService } from './image-converter.service';
+import { CommonModule } from '@angular/common';
+import { FileConverterComponent } from "../../../app/shared/upload/file-converter.component";
+import { Format, ProcessedFile } from '../../../app/models/conversion.model';
+import { HttpHeaders } from '@angular/common/http';
+
+@Component({
+  selector: 'app-image-converter',
+  templateUrl: 'image-converter.component.html',
+  styleUrls: ['image-converter.component.scss'],
+  standalone: true,
+  imports: [DropdownModule, AutoCompleteModule, FormsModule, CommonModule, FileConverterComponent]
+})
+export class ImageConverterComponent implements OnInit, OnDestroy {
+  constructor(private ImageService: ImageService) { }
+
+  url = 'http://localhost:1337/convert';
+  filteredFormats: string[] = [];
+  formats: Format[] = [];
+  selectedFormat: string | undefined;
+  subscriptions: Subscription[] = [];
+  selected = '';
+  headers = new HttpHeaders();
+  processedFiles: ProcessedFile[] = [];
+  fileFormats: string[] = ["image/*"];
+  selectedFile: File[] | null = null;
+
+  filterFormats(event: AutoCompleteCompleteEvent) {
+    let filtered: any[] = [];
+    let query = event.query;
+
+    for (let index = 0; index < (this.formats as any[]).length; index++) {
+        let format = (this.formats as any[])[index];
+        if (format.name.toLowerCase().indexOf(query.toLowerCase()) == 0) {
+            filtered.push(format);
+        }
+    }
+
+    this.filteredFormats = filtered;
+  }
+
+  onUploadClicked() {
+    if (this.selectedFormat && this.selectedFile) {
+      this.subscriptions.push(
+        this.ImageService.getMimeType(this.selectedFormat).subscribe((typeResponse) => {
+          this.subscriptions.push(
+            this.ImageService.convertImage(this.selectedFile![0], this.selectedFormat!)
+              .pipe(map((response: any) => {
+                const blob = new Blob([response], { type: typeResponse });
+                const blobUrl = URL.createObjectURL(blob);
+                const processedFile = {
+                  name: this.selectedFile![0].name.replace(/\.[^/.]+$/, `.${this.selectedFormat?.toLowerCase()}`),
+                  link: blobUrl,
+                  format: this.selectedFormat
+                } as ProcessedFile;
+                this.processedFiles.push(processedFile);
+              }))
+              .subscribe()
+          );
+        })
+      );
+    }
+  }
+  
+
+  onFormatSelected(format: string) {
+    this.selectedFormat = format;
+  }
+
+  onFileSelected(input: File[]): void {
+    this.selectedFile = input;
+  }
+
+  ngOnInit(): void { 
+    this.subscriptions.push(this.ImageService.setAntiforgeryToken().subscribe());
+
+    this.subscriptions.push(this.ImageService.getFormats()
+      .pipe(map(formats => {
+        this.formats = formats.map(format => {
+          return {
+            name: format,
+            code: format.toLowerCase()
+          } as Format;
+        });
+      }))
+      .subscribe());
+
+    this.headers = new HttpHeaders({
+      '2311d8d8-607d-4747-8939-1bde65643254': localStorage.getItem('imgToken')!,
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.forEach(sub => sub.unsubscribe());
+  }
+}