Kendo Ui Angular File Upload

18 views Asked by At

I have one problem I used kendo-upload from Kendo Ui Angular. [saveUrl] and [removeUrl] should be given in kendo-upload. But I divided the project into service and component parts. I wanted to write the Upload logic myself. This is home.component.ts

  //Variables Upload files (Modal)
    public openedUploadFilesModal = false;
    public fileSource: FileInfo[] = [];

    
    public uploadFiles(event:UploadEvent): void {
        debugger;
        if (this.fileSource) {
            const fileViewCreateModel = new FileViewCreateModel();
            fileViewCreateModel.file = event.files;
            fileViewCreateModel.filePath = this.toCollectPath();
       
            this._serviceFile.addFile(fileViewCreateModel).subscribe({
                next: (response) => {
       
                    this.getAll(this.skip, this.pageSize)
                    this.clearSelectFiles();
                },
                error: (err) => {
       
                    this.getAll(this.skip, this.pageSize)
                    this.clearSelectFiles();
                },
            });
        }
    }

    //Function Get select file in fileSource
    handleFileSelected(event: SelectEvent) {
        const newFiles = event.files.filter(
            (f) => !this.fileSource.find((existingFile) => existingFile.name == f.name)
        );
        this.fileSource = [...this.fileSource, ...newFiles];
    }

    successEventHandler(e: SuccessEvent) {
        console.log('The ' + e.operation + ' was successful!');
      }

    handleFileRemoved(event: RemoveEvent) {
        this.fileSource = this.fileSource.filter((f) => event.files.indexOf(f) === -1);
    }

    public clearSelectFiles():void{
        this.fileSource=[];
    }

    //Function (Button) opne Upload file Modal
    public opneUploadFileModal(): void {
        this.openedUploadFilesModal = true;
    }

    //Function Close Upload Files Modal
    public closeUploadFilesModal(): void {
        this.openedUploadFilesModal = false;
    }

This is home.component.html

<!--begin:: Modal Upload Files-->
    <div>
        <kendo-dialog title="Upload files" *ngIf="openedUploadFilesModal" (close)="closeUploadFilesModal()"
            [minWidth]="250" [width]="450">
            <kendo-upload [autoUpload]="false" (select)="handleFileSelected($event)" 
                (clear)="clearSelectFiles()"
                (remove)="handleFileRemoved($event)" 
                (upload)="uploadFiles($event)"
                >
            </kendo-upload>

           
        
        </kendo-dialog>
    </div>
    <!--end:: Modal Upload Files-->

This is file-api.sservice.ts

import { HttpClient } from '@angular/common/http';
import { Injectable, inject } from '@angular/core';
import { FileCreateModel } from './models/file/file.create-model';
import { Observable, catchError } from 'rxjs';
import { FileDeleteModel } from './models/file/file.delete-model';
import { FileEditModel } from './models/file/file.edit-model';

@Injectable({ providedIn: 'root' })
export class FileApiService {
    //Variable HttpClient Inject
    private client: HttpClient = inject(HttpClient);

    //Variable Backend URL
    private url: string = 'api/file';

    //Function (request) Upload File
    public addFile(file: FileCreateModel): Observable<boolean> {
        const formData: FormData = new FormData();
        formData.append('File', file.file[0].rawFile!);

        return this.client.post<boolean>(`${this.url}?filePath=${file.filePath}`, formData);
    }

This FileCreateModel

import { FileInfo} from '@progress/kendo-angular-upload';
export interface FileCreateModel{
    filePath:string;
    file:FileInfo[];
}

Why is it sending a request even though I didn't specify [saveUrl]?

Kendo Ui Angular, kendo-upload

0

There are 0 answers