Uploading and done status in input .

[phantazma]

Goodmorning I have a probleme while uploading a file from the input , the last call to onUploadOutput is when the statut became "START" so im not able to see "uploading" and "done" status , however the file is uploaded and my return is in the file.response. however when using drag and drop i can see those two status any idea what's the problem ?

[DavidRouyer]

I have the same problem, I've tried to debug and it seems that the serviceEvents event emitter subscribers are gone on line https://github.com/bleenco/ngx-uploader/blob/master/src/ngx-uploader/classes/ngx-uploader.class.ts#L36

[pkracht]

Same here... @DavidRouyer - currently using bare php-backend returning all required headers and data as in the example.

Getting event for:

• addedToQueue
• allAddedToQueue
• uploadAll
• start

and thats it. After successfully uploading and returned status 200 with json data - nothing happens.

[jkuri]

let me check that again.

[jkuri]

I really think that the source of your problem guys is not returning response correctly. Check the included sample:

1. clone this repository
2. add console.log(event); after this line
3. npm run build:prod
4. npm run start-server
5. open your browser at http://localhost:4900 and upload a file.

here is the included demo server.

and this is the response I got 2 minutes ago:

[Newan]

is is not an server problem. I upload (post) to your URL like: http://ngx-uploader.com/upload

But the error is the same in my project:

Your demo project works on my machine, but the ngx-uploader module in my project return not all events

[jkuri]

@Newan actually I just noticed that demo uploads to https://github.com/bleenco/ngx-uploader/blob/master/src/components/app-home/app-home.component.ts#L27 and not on a local server (which can be configured to setting url to http://localhost:4900/upload) so I am not really sure what you are talking about. Can you be more specific or provide me some example. I am still pretty sure its a server issue.

[Newan]

if it is a server error, the error must be fixed with your http://ngx-uploader.com/upload server, but it doesn't.

i copy your AppHomeComponent to my project. i make minimal changes for the compnent name and the selector:

import { Component, EventEmitter } from '@angular/core';
import { UploadOutput, UploadInput, UploadFile, humanizeBytes, UploaderOptions, UploadStatus } from 'ngx-uploader';

@Component({
  selector: 'ngx-fileupload',
  templateUrl: 'file-upload.component.html'
})
export class FileUploadComponent {
  formData: FormData;
  files: UploadFile[];
  uploadInput: EventEmitter<UploadInput>;
  humanizeBytes: Function;
  dragOver: boolean;
  options: UploaderOptions;

  constructor() {
    this.options = { concurrency: 1 };
    this.files = [];
    this.uploadInput = new EventEmitter<UploadInput>();
    this.humanizeBytes = humanizeBytes;
  }

  onUploadOutput(output: UploadOutput): void {
    console.log(output.type);
    if (output.type === 'allAddedToQueue') {
      const event: UploadInput = {
        type: 'uploadAll',
        url: 'http://ngx-uploader.com/upload',
        method: 'POST',
        data: { foo: 'bar' }
      };
      console.log(event);
      this.uploadInput.emit(event);
    } else if (output.type === 'addedToQueue'  && typeof output.file !== 'undefined') {
      this.files.push(output.file);
    } else if (output.type === 'uploading' && typeof output.file !== 'undefined') {
      const index = this.files.findIndex(file => typeof output.file !== 'undefined' && file.id === output.file.id);
      this.files[index] = output.file;
    } else if (output.type === 'removed') {
      this.files = this.files.filter((file: UploadFile) => file !== output.file);
    } else if (output.type === 'dragOver') {
      this.dragOver = true;
    } else if (output.type === 'dragOut') {
      this.dragOver = false;
    } else if (output.type === 'drop') {
      this.dragOver = false;
    } else if (output.type === 'rejected' && typeof output.file !== 'undefined') {
      console.log(output.file.name + ' rejected');
    }

    this.files = this.files.filter(file => file.progress.status !== UploadStatus.Done);
  }

  startUpload(): void {
    const event: UploadInput = {
      type: 'uploadAll',
      url: 'http://ngx-uploader.com/upload',
      method: 'POST',
      data: { foo: 'bar' }
    };

    this.uploadInput.emit(event);
  }

  cancelUpload(id: string): void {
    this.uploadInput.emit({ type: 'cancel', id: id });
  }

  removeFile(id: string): void {
    this.uploadInput.emit({ type: 'remove', id: id });
  }

  removeAllFiles(): void {
    this.uploadInput.emit({ type: 'removeAll' });
  }
}

i copy also the template file. and add this to lines of output see in the component file. The server is your ngx-uploader.com. herer is the console output:

But there is no 'done' event ?

thanks for your support!

[jkuri]

you convinced me that this module doesn't work out of this demo so I start a new angular-cli project and use a code that you provided. I can still see done event. I am attaching sample project, you can check it out for yourself.

proj.zip

[Newan]

Thanks great, I will test it tomorrow. I think is is an combination of angular version other modules an this module. If I find something I will report

[Newan]

i catched the error:

• extract your project
• npm install
• npm install pace-js --save
• add in .angular-cli.json under scripts:

      "scripts": [
        "../node_modules/pace-js/pace.min.js"],

• ng serve

Now the project has no done event. I hope it helps to fix the error. I don't know it is a pace-js or ngx-uploader error? Here the updated project files with this error: proj.zip

[rrsdev]

As a reference I was also missing anything after the start event. In my case I had nested a file input inside of a drop container, like:

<div class="drop-container" ngFileDrop>
    <input type="file" ngFileSelect .../>
</div>

Obviously in my case there was a little more markup. However, the basics are there. Using a label inside the drop container and moveing the ngFileSelect to outside of the drop container worked... this might be something to be documented.

<div class="drop-container" ngFileDrop>
    <label for="fileSelect1">Drop or click to select file</label>
</div>
<input type="file"  id="fileSelect1" ngFileSelect .../>

Overall, at this point I'd say that the ngx-uploader itself is working really well for me. The docs (what else is new) are somewhat slim which might discourage others from using.

[jkuri]

@rrsIPOV thanks for the nice words! glad it works well for your case. you are right about the docs, but I never find time to do it as it should be.

[BBaysinger]

I just used @Newan's last example, and I see the following events:

addedToQueue
allAddedToQueue
start
uploading

There's no 'done' event. When I look in the source, I see Done as a status, but I don't see an event emitting for that. Is there supposed to be? If not, is there a recommended way to know when uploads complete?

[BBaysinger]

My workaround is adding this at the end of onUploadOutput:

const completeFiles = this.files.filter(file => {
  return file.progress.status === UploadStatus.Done && file.responseStatus === 200
});

if (completeFiles.length) {
  completeFiles.forEach((file: UploadFile) => {
    const item = <Image>{filename: file.response[0].filename, type: file.nativeFile.type};
    this.items.push(item);
  });
}

this.files = this.files.filter(file => file.progress.status !== UploadStatus.Done);

[dpollastrini]

Same issue here. Other than the workaround, any fix for this yet?

My local test server returns application/json, 200, and a hard-coded json structure that precisely mimics the http://ngx-uploader.com/upload response. The file successfully saves to the server, but there's no "done" event, nor error. I did notice that the UploadFile status stays as 1 ("uploading"), so the event not firing may just be a side effect.

It's a great uploader, but once I hit the concurrency limit for multiple file uploads, additional files get "stuck" waiting for the files that are still "uploading" (but finished are actually at 100%).

[dpollastrini]

After some investigation it seems the condition at https://github.com/bleenco/ngx-uploader/blob/806e88ca9f6e28b4c3e50a62491f11cfbd80ffaa/src/ngx-uploader/classes/ngx-uploader.class.ts#L187 is never true, consequently the file.progress.status is never set to UploadStatus.DONE.

When xhr.readyState is 4 (DONE), XMLHttpRequest.DONE evaluates to a function for some reason (??), not the number 4. XMLHttpRequest.DONE is supposed to be 4 according to the spec (https://xhr.spec.whatwg.org/), but I can only find a declaration for DONE (no assignment) in the lib.es2016, which comes from the VS Code global node_modules. I suspect it's just a version or naming conflict between libs, which would explain why the issue doesn't always manifest (just a guess).

In any case, the instance variable xhr contains the DONE "enum" with a value of 4. So, either hard-coding the number 4 in the conditional or using xhr.DONE instead of the class value (XMLHttpRequest.DONE) seems to work.

[retailify]

@dpollastrini if the bug relates to lib.es2016 it should fixed there. Hardcoding it with 4 is no solution. @jkuri could you check the proposed solution with xhr.DONE?

[sgyy]

I find same problem in ngx-admin it's a bug of pace-js

[dpollastrini]

@retailify I completely agree. Just highlighting the cause and a possible workaround while solutions are investigated. Loving the the uploader...

[xyrintech]

Getting the same issue event after installing pace-js

[LiamDotPro]

@xyrintech add

else if (output.type === 'done') {
      console.log(output);
    }

to make

onUploadOutput(output: UploadOutput): void {
    if (output.type === 'allAddedToQueue') { // when all files added in queue
    } else if (output.type === 'addedToQueue' && typeof output.file !== 'undefined') { // add file to array when added
      this.files.push(output.file);
    } else if (output.type === 'uploading' && typeof output.file !== 'undefined') {
      // update current data in files array for uploading file
      const index = this.files.findIndex(file => typeof output.file !== 'undefined' && file.id === output.file.id);
      this.files[index] = output.file;
    } else if (output.type === 'removed') {
      // remove file from array when removed
      this.files = this.files.filter((file: UploadFile) => file !== output.file);
    } else if (output.type === 'dragOver') {
      this.dragOver = true;
    } else if (output.type === 'dragOut') {
      this.dragOver = false;
    } else if (output.type === 'drop') {
      this.dragOver = false;
    } else if (output.type === 'done') {
      console.log(output);
    }
  }

You'll be presented with a done event that holds your response.

From what I can tell from using this package if your response is malformed in anyway from say incorrect cors headers or incorrect headers the done event will likely not be reached. If you want I could mock up a small express server if I find the time to showcase that it's more than likely a server side issue if the package isn't returning. @jkuri

[xyrintech]

I am getting the event upto uploading but not after that.

If you feel good then can I share the link of my server and then you can see the things happening?

[xyrintech]

after uploading the files the server is returning 200 response. I believe this shall be god to show the done event.

[LiamDotPro]

@xyrintech If you upload your server or a minimal remake of the problem I'll happily test it for you.

[xyrintech]

Uploading the code, this really helps :)

[xyrintech]

http://russell.xyrintech.com/

• login using [email protected] / test@123
• select any production, you will get this screen.
• click on Inventory on top
• Click on New and then create new item
• there you will see an option to choose the file.

Its auto upload.

in response, I am responding with JSON.

[xyrintech]

@LiamDotPro Does this help?

[LiamDotPro]

@xyrintech I tested your website and checked the headers which seem to be fine, I'm concerned that you are getting more than one uploading event even though I'm only uploading a single file.

[charbonnier666]

still have this bug...