No complete | done | error event on upload

[Newan]

i use the ngx-admin projekt: https://github.com/akveo/ngx-admin/tree/ng2-admin/src/app/theme/components/baFileUploader

create a component with the example code from the AppHomeComponent but no finished event is called?

the difference to you project is the package.json. here my complete json file:

"dependencies": {
    "@agm/core": "1.0.0-beta.2",
    "@angular/animations": "~5.1.0",
    "@angular/common": "~5.1.0",
    "@angular/compiler": "~5.1.0",
    "@angular/core": "~5.1.0",
    "@angular/forms": "~5.1.0",
    "@angular/http": "~5.1.0",
    "@angular/platform-browser": "~5.1.0",
    "@angular/platform-browser-dynamic": "~5.1.0",
    "@angular/router": "~5.1.0",
    "@asymmetrik/ngx-leaflet": "3.0.1",
    "@nebular/auth": "2.0.0-rc.4",
    "@nebular/theme": "2.0.0-rc.4",
    "@ng-bootstrap/ng-bootstrap": "1.0.0-beta.8",
    "@ngx-translate/core": "8.0.0",
    "@ngx-translate/http-loader": "^2.0.0",
    "@swimlane/ngx-charts": "5.2.0",
    "angular2-chartjs": "0.4.1",
    "angular2-toaster": "4.0.1",
    "bootstrap": "4.0.0-beta.2",
    "chart.js": "2.7.1",
    "ckeditor": "4.7.3",
    "classlist.js": "1.1.20150312",
    "core-js": "2.5.1",
    "file-saver": "^1.3.3",
    "font-awesome": "4.7.0",
    "intl": "1.2.5",
    "ionicons": "2.0.1",
    "leaflet": "1.2.0",
    "nebular-icons": "1.0.6",
    "ng2-ckeditor": "1.1.13",
    "ng2-select": "^2.0.0",
    "ng2-smart-table": "1.2.2",
    "ng2-tree": "2.0.0-rc.4",
    "ngx-echarts": "2.0.0",
    "ngx-uploader": "^4.2.1",
    "normalize.css": "6.0.0",
    "pace-js": "1.0.2",
    "roboto-fontface": "0.8.0",
    "rxjs": "5.5.5",
    "tinymce": "4.5.7",
    "typeface-exo": "0.0.22",
    "web-animations-js": "2.2.5",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@angular/cli": "1.6.3",
    "@angular/compiler-cli": "~5.1.0",
    "@angular/language-service": "~5.1.0",
    "@compodoc/compodoc": "1.0.1",
    "@types/d3-color": "1.0.5",
    "@types/file-saver": "^1.3.0",
    "@types/jasmine": "2.5.54",
    "@types/jasminewd2": "2.0.3",
    "@types/leaflet": "1.2.3",
    "@types/node": "6.0.90",
    "codelyzer": "4.0.2",
    "conventional-changelog-cli": "1.3.4",
    "husky": "0.13.3",
    "jasmine-core": "2.6.4",
    "jasmine-spec-reporter": "4.1.1",
    "karma": "1.7.1",
    "karma-chrome-launcher": "2.1.1",
    "karma-cli": "1.0.1",
    "karma-coverage-istanbul-reporter": "1.3.0",
    "karma-jasmine": "1.1.0",
    "karma-jasmine-html-reporter": "0.2.2",
    "npm-run-all": "4.0.2",
    "protractor": "5.1.2",
    "rimraf": "2.6.1",
    "stylelint": "7.13.0",
    "ts-node": "3.2.2",
    "tslint": "5.7.0",
    "tslint-language-service": "0.9.6",
    "typescript": "2.5.3"
  }

[DavidRouyer]

Duplicate of #408

[sgyy]

it's a bug of pace-js remove "../node_modules/pace-js/pace.min.js", from .angular-cli.json

[igorissen]

Same issue for me. pace-js is not installed in case someone asks me.

public onUploadOutput(output: UploadOutput) {
    this.logger.debug(output);

    switch (output.type) {
      case 'dragOver': { ... }
      case 'dragOut': { ... }
      case 'drop': { ... }
      case 'rejected': { ... }
      case 'removed': { ... }
      case 'addedToQueue': { ... }
      case 'done': { ... }
      case 'uploading': { ... }
      case 'allAddedToQueue': { ... }
    }

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

I get this output on the console

And I get this on the network where you can see that upload completed without error with JSON data that I don't show on the screenshot.

[igorissen]

@Newan I think I found the issue.

Take a close look at the file object when start event is logged.

[jkuri]

if I see correctly upload is done so fast that it cannot handle the "done" event because it is triggered in "start" already?

[igorissen]

@jkuri I think so. I'll try with a bigger file.

EDIT

I did my tests with 180KB and 3.5MB files. I get the same results, the response is in the start event.

• Screenshot for 180KB file

• Screenshot for 3.5MB file

For debugging purpose, here is my package.json file.

{
  "dependencies": {
    "@angular/animations": "^5.2.7",
    "@angular/cdk": "^5.2.4",
    "@angular/common": "^5.2.7",
    "@angular/compiler": "^5.2.7",
    "@angular/core": "^5.2.7",
    "@angular/forms": "^5.2.7",
    "@angular/http": "^5.2.7",
    "@angular/material": "^5.2.4",
    "@angular/material-moment-adapter": "^5.2.4",
    "@angular/platform-browser": "^5.2.7",
    "@angular/platform-browser-dynamic": "^5.2.7",
    "@angular/router": "^5.2.7",
    "@angular/service-worker": "^5.2.7",
    "@nsalaun/ng-logger": "^5.0.0",
    "angular-split": "^1.0.0-rc.3",
    "core-js": "^2.4.1",
    "moment": "^2.21.0",
    "ng2-dnd": "^5.0.2",
    "ngx-json-viewer": "^2.2.0",
    "ngx-progressbar": "^2.1.1",
    "ngx-uploader": "^4.2.4",
    "normalize.css": "^7.0.0",
    "rxjs": "^5.5.2",
    "sanitize.css": "^5.0.0",
    "zone.js": "^0.8.20"
  },
  "devDependencies": {
    "@angular/cli": "^1.7.2",
    "@angular/compiler-cli": "^5.2.7",
    "@angular/language-service": "^5.2.7",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/moment": "^2.13.0",
    "@types/node": "^6.0.101",
    "codelyzer": "^4.2.1",
    "electron": "^1.8.3",
    "electron-packager": "^10.1.2",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.4.2",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.4.2"
  }
}

[jkuri]

@igorissen thanks for checking it out, I will investigate what is happening here, but currently I cannot reproduce it.

[igorissen]

@jkuri I'll try to make a simple page to see if there is the same issue.

[igorissen]

@jkuri I did some tests with a simple project and it works as expected. So I need to find what is the issue with my code.

[jkuri]

@igorissen thanks for helping on this issue, seems like a problem of many. I personally never encountered this.

[igorissen]

@jkuri I found where the problem is.

<div ngFileDrop
       *ngIf="!files.length && !uploadCompleted"
       class="full-width file-drop-container"
       [options]="options"
       [uploadInput]="uploadInput"
       (uploadOutput)="onUploadOutput($event)"
       [ngClass]="{'is-drop-over': dragOver}">
    <p>
      Drag a file here or
      <label class="label-upload-button">
        <input ngFileSelect
               [options]="options"
               [uploadInput]="uploadInput"
               (uploadOutput)="onUploadOutput($event)"
               type="file"> browse
      </label>
      to upload
    </p>
  </div>

This is the problem : *ngIf="!files.length && !uploadCompleted". When I remove this it works as expected.

I want to hide the drop box and display a progress bar for the upload progress and display another view when the upload is complete.

[jkuri]

I think you should hide it as

[class.is-hidden]="!files.length && !uploadCompleted"

and define class .is-hidden in styles as display: none; or visibility: hidden;

[igorissen]

Yes, I did that and now it's working. Thank you.