Manually start uploading not working

[fredericojesus]

I'm doing this

const event: UploadInput = {
      type: 'uploadAll',
      url: `${environment.api_url}/track/bulk_update/artwork`,
      method: 'POST',
      data: { track_id: this.data.trackIds, upload_file: this.imageToUpload },
      concurrency: 0,
      withCredentials: true,
    }

    this.uploadInput.emit(event)
}

But it's simply not making any request. Btw I'm using upload_file: this.imageToUpload on data because I'm also using cropper.js to crop the image before sending it to the API. If you can tell me also how to convert the UploadFile to the cropped image I would appreciate.

Doing this.uploadInput.emit(event) inside if (output.type === 'allAddedToQueue') { ... } it works. But I still don't have the cropped image at that point.

Can somebody help?

[jkuri]

hi. how does cropped image looks like, i mean what format?

[jason111neo]

I am new to this too. I would suggest adding a fieldname in 'UploadInput'. For example (fieldName: 'image',)

[fredericojesus]

@jkuri Blob

[fredericojesus]

@jason111neo even if I use fieldName I need the cropped image in Blob format

[fredericojesus]

@jkuri when I make the emit nothing happens, no request on network and no error on console or network :x

[jkuri]

because there are no files in the queue. try something like

import { Component, OnInit, EventEmitter } from '@angular/core';
import { NgUploaderService, UploadOutput, UploadInput } from 'ngx-uploader';

@Component({ ... })
export class AppComponent implements OnInit {
  uploadInput: EventEmitter<UploadInput>;
  upload: NgUploaderService;

  constructor() {
    this.upload = new NgUploaderService();
  }

  ngOnInit() {
    this.upload.initInputEvents(this.uploadInput);

    this.upload.serviceEvents.subscribe((event: UploadOutput) => {
      console.log(event);
    });
  }

  startUpload(): void {
    let fileList = [];
    fileList.push.apply(fileList, new File([BlobData], 'image.jpg');

    this.upload.handleFiles(fileList);
    const event = { ... };
    this.uploadInput.emit(event);
  }
}

[fredericojesus]

@jkuri Argument of type 'any[]' is not assignable to parameter of type 'FileList' Is it possible to append a File to a FileList ? I don't think so, for security reasons right? But not sure

[jkuri]

try let fileList: FileList = [];

[fredericojesus]

@jkuri I had tried that 😄 Then the fileList doesn't have the push method. FileList is a ready only type. We can't edit, I researched about it. 😞

[fredericojesus]

@jkuri do you know some other way to add files to the queue?

[jkuri]

yes, you have to do it manually, check this out: https://github.com/jkuri/ngx-uploader/blob/master/src/ngx-uploader/classes/ngx-uploader.class.ts#L81-L111

[fredericojesus]

@jkuri sorry but that didn't helped me. I figure out why the File is not in the queue.

onUploadOutput(output: UploadOutput): void {
  if (output.type === 'allAddedToQueue') {
  } else if (output.type === 'addedToQueue') {
    // this.imageToUpload = output.file
    this.openCropperDialog(output.nativeFile)
  } else if (output.type === 'uploading') {
    console.log(output.file.progress.status)
  }
}

startUpload(): void {
  const event: UploadInput = {
    type: 'uploadAll',
    url: `${environment.api_url}/track/bulk_update/artwork`,
    fieldName: 'upload_file',
    method: 'POST',
    data: { track_id: this.data.trackIds },
    concurrency: 0,
    withCredentials: true,
  }
  this.uploadInput.emit(event)
}

If I do this

this.openCropperDialog(output.nativeFile)

Then this.uploadInput.emit(event) on startUpload function doesn't work. But if I remove that line and don't use output.nativeFile for nothing then it works. Why is the file removed from the queue if I use output.nativeFile?

Any ideas? I would really appreciate some help