Nothing happens when trying to upload a file on my file upload screen

The file upload screen appears, but when I click upload, nothing happens. A pop-up window should appear saying "Are you sure?"

As I show in this video, nothing happens.

Angular Side


file-upload-component.ts:

import { CommonModule } from '@angular/common';
import { HttpClientModule, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
import { Component, Input } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { NgxFileDropEntry, FileSystemFileEntry, FileSystemDirectoryEntry, NgxFileDropModule } from 'ngx-file-drop';
import { HttpClientService } from '../http-client.service';
import { AlertifyService, MessagePosition, MessageType } from '../alertify.service';
import { MatDialog } from '@angular/material/dialog';
import { FileUplaodDialogState, FileUploadDialogComponent } from '../../../dialogs/file-upload-dialog/file-upload-dialog.component';
import { DialogService } from '../dialog.service';
import { MatButton } from '@angular/material/button';

@Component({
selector: 'app-file-upload',
standalone: true,
imports: [
CommonModule,
FormsModule,
NgxFileDropModule,
MatButton
],
templateUrl: './file-upload.component.html',
styleUrl: './file-upload.component.scss'
})
export class FileUploadComponent {

constructor(
private httpClient : HttpClientService,
private alertift : AlertifyService,
private dialog : MatDialog,
private dialogService : DialogService
)
{ }

@Input() options : Partial<FileUploadOptions>;

public files: NgxFileDropEntry[];

public dropped(files: NgxFileDropEntry[]) {

this.files = files;
const formData = new FormData()
for (const droppedFile of files) {
(droppedFile.fileEntry as FileSystemFileEntry).file((file: File) => {
formData.append(droppedFile.relativePath, file, droppedFile.relativePath)
})
}

this.dialogService.openDialog({
componentType : FileUploadDialogComponent,
data : FileUplaodDialogState.Yes,
afterClosed : () => {
this.httpClient.post({
controller : this.options.controller,
action : this.options.action,
queryString : this.options.queryString,
headers : new HttpHeaders({ "responseType" : "blob" })
},formData).subscribe(res => {
this.alertift.message("Dosya veya dosyalar başarıyla yüklendi", {
messagePosition : MessagePosition.TopRight,
messageType : MessageType.Success
})
},(errorResponse : HttpErrorResponse) => {
this.alertift.message("Dosya veya dosyalar yüklenirken hata oluştu", {
messagePosition : MessagePosition.TopRight,
messageType : MessageType.Error
})
})
}
})
}
}

export class FileUploadOptions {
controller? : string;
action? : string;
queryString? : string;
acceptedFiles? : string;
}


select-article-image-dialog.component.ts:

import { Component, Inject, OnInit, Output } from '@angular/core';
import { BaseDialog } from '../base-dialog';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { FileUplaodDialogState } from '../file-upload-dialog/file-upload-dialog.component';
import {MatDialogModule} from '@angular/material/dialog';
import { MatButton } from '@angular/material/button';
import { FileUploadComponent, FileUploadOptions } from '../../services/common/file-upload/file-upload.component';

@Component({
selector: 'app-select-article-image-dialog',
standalone: true,
imports: [
MatDialogModule,
MatButton,
FileUploadComponent
],
templateUrl: './select-article-image-dialog.component.html',
styleUrl: './select-article-image-dialog.component.scss'
})
export class SelectArticleImageDialogComponent extends BaseDialog<SelectArticleImageDialogComponent> {

constructor (dialogRef : MatDialogRef<SelectArticleImageDialogComponent>, @Inject(MAT_DIALOG_DATA) public data : SelectArticleImageState | string) {
super(dialogRef)
}


@Output() options : Partial<FileUploadOptions> = {
acceptedFiles : ".png,.jpg,.jpeg",
action : "upload",
controller : "articles",
queryString :`id=${this.data}`
}
}

export enum SelectArticleImageState {
Close
}


HTML template:

<h2 mat-dialog-title></h2>
<mat-dialog-content class="mat-typography">

<app-file-upload [options]="options"></app-file-upload>

</mat-dialog-content>
<mat-dialog-actions align="end">
<button mat-button mat-dialog-close>Cancel</button>
</mat-dialog-actions>

Server side


[HttpPost("[action]")]
public async Task<IActionResult> Upload(string id)
{
List<(string fileName, string pathOrContainerName)> result = await _storageService.UploadAsync("images", Request.Form.Files, _webHostEnvironment);

await _articleImageFileWriteRepository.AddRangeAsync(result.Select(x => new ArticleImageFile()
{
FileName = x.fileName,
Path = x.pathOrContainerName,
Storage = "Local",
}).ToList());

await _articleImageFileWriteRepository.SaveAsync();
return Ok();
}


I tried many things but I couldn't figure it out.

Continue reading...