File upload reaches 100% before upload end, due to Kapersky Internet Security

30 Views Asked by At

I'm using Angular with a NodeJs API. I implemented a method to upload files to the api with upload progress tracking.

At first I used the reportProgress and observe properties of the HttpClient service but on each upload the first event that was emitted automatically returned 100% despite the upload not being completed.It was something like this :

    uploadMedia(file: File, type: string, description: string): Observable<any> {
        const formdata: FormData = new FormData();
        formdata.append("file", file);
        formdata.append("type", type);
        formdata.append("description", description);
        return this.httpClient.post<MediaFile>(`${this.apiUrl}files/single-file`, formdata, {
            reportProgress: true,
            observe: "events",
        });
    }

Then as this did not work I went through packages. I tested '@kbob/ng2-file-upload' and 'ngx-uploadx' and still had the same problem. That is to say online or locally, whether the file weighs 1MB or 100MB, I automatically have 100% progress and I therefore have to wait until the upload is actually completed. However, in all the demos or tutorials that I consulted, the percentage of progress worked perfectly. Finally I tested a third method using AJAX. Something like this:

    uploadPosterFile(uploadEvent: any): void {
            this.xhrUploader = new XMLHttpRequest();
            this.abortButtonLocked = false;
            this.progressActive = true;
            this._detector.markForCheck()

            this.xhrUploader.upload.onprogress = (progressEvent) => {
                let percentage = ((progressEvent.loaded / progressEvent.total) * 100).toFixed(2);
                this.uploadProgress = Number(percentage);
                this._detector.markForCheck()
            };

            this.xhrUploader.upload.onloadend = (end) => {
                this.abortButtonLocked = true;
                this._detector.markForCheck()
            }

            this.xhrUploader.onreadystatechange = () => {
                if (this.xhrUploader.readyState === 4 && this.xhrUploader.status === 200) {
                    this.getTicketImg(JSON.parse(this.xhrUploader.responseText))
                }
            };

            this.xhrUploader.upload.onabort = () => {
                this.ticket.posterFile = undefined;
                this.abortButtonLocked = false;
                this.progressActive = false;
                this.uploadProgress = 0;
                this._alertService.showToast('Upload canceled', 'info', 'bottom-center');
                this._detector.markForCheck()
            }

            this.xhrUploader.upload.onerror = () => {
                this.ticket.posterFile = undefined;
                this.abortButtonLocked = false;
                this.progressActive = false;
                this.uploadProgress = 0;
                this._alertService.showToast(`Failed Upload! Please check your network connexion.`, 'error', 'bottom-center', 3200);
                this._detector.markForCheck()
            }

            this.xhrUploader.open('POST', `${this.apiUrl}files/single-file`);
            let formData = new FormData();
            formData.append("file", uploadEvent.target.files[0]);
            this.xhrUploader.send(formData);
            this._detector.markForCheck()
    }

Again the result was the same. I had the idea to deactivate my Antivirus (Kapersky Internet Security) and boom! everything was working fine. I am therefore looking for a solution allowing me to solve this problem since I will still not ask all users with antivirus to deactivate them.

0

There are 0 best solutions below