ngx-uploader上传完成后done事件未触发问题求助

I’ve run into this exact issue with ngx-uploader before—let’s walk through the most likely causes and fixes to get that done event triggering properly:

1. Ensure Your Server Returns Valid JSON #

ngx-uploader expects a valid JSON response for successful uploads, even if it’s just a simple empty object. If your server sends back plain text, an empty body, or malformed JSON, the library won’t recognize the upload as complete.

Try updating your server to return a basic valid JSON payload with the 200 OK, like:

{ "status": "success" }

2. Verify the Content-Type Response Header #

Even if your response is valid JSON, if the Content-Type header isn’t set to application/json, ngx-uploader might fail to parse the response and skip the done event.

Open your browser’s DevTools > Network tab, locate the upload request, and check that the response headers include Content-Type: application/json. If not, adjust your server to set this header.

3. Add an error Event Handler to Catch Silent Issues #

Sometimes an upload hits an error after the uploading event, but you won’t see it unless you explicitly listen for the error type. Update your upload handler to include this case:

onUploadOutput(output: UploadOutput): void {
  switch (output.type) {
    case 'addedToQueue':
    case 'allAddedToQueue':
    case 'start':
    case 'uploading':
      console.log(output.type, output.file);
      break;
    case 'done':
      console.log('Upload completed!', output.file);
      break;
    case 'error':
      console.error('Upload failed silently:', output.file, output.error);
      break;
  }
}

This might reveal a hidden issue (like parsing errors) that’s blocking the done event from firing.

4. Rule Out HTTP Interceptors #

If your Angular app uses custom HTTP interceptors, one of them might be modifying or swallowing the response before it reaches ngx-uploader. Temporarily disable all interceptors and test the upload again. If the done event starts working, adjust your interceptor to exclude upload requests (use the request URL or headers to target only uploads).

5. Update ngx-uploader to the Latest Version #

Older versions of ngx-uploader had bugs related to response handling. Check if your version has known issues with done events, and upgrade to the latest stable release if possible.

If none of these steps fix the problem, sharing a minimal snippet of your component’s upload setup and the exact server response details (headers + body) would help narrow things down further.

内容的提问来源于stack exchange，提问作者Xyrin Technologies