404 (Not Found) error when uploading files with ng2-file-upload

Question

I am using ng2-file-upload for uploading files to my angular2 application. The problem is that when I click on the 'upload' button, I get a 404 (Not Found) error, meaning the directory I set for the uploads is not found. Here is my component:

import { Component } from '@angular/core';
import { FileUploader } from 'ng2-file-upload';

const URL = 'http://localhost:4200/src/app/uploads/';

@Component({
  selector: 'upload-file',
  templateUrl: 'upload-file.html'
})
export class UploadCvComponent {
  uploader: FileUploader = new FileUploader({ url: URL });
  hasBaseDropZoneOver: boolean = false;
  hasAnotherDropZoneOver: boolean = false;

  fileOverBase(e: any): void {
    this.hasBaseDropZoneOver = e;
  }

  fileOverAnother(e: any): void {
    this.hasAnotherDropZoneOver = e;
  }
}

I created a directory for holding the upload files at /src/app/uploads/. Is there anything else I need to do for this to work, or FileUploader should do the rest of the job? I believe the error I get is because I am using a router for the Angular2 app and that URL (http://localhost:4200/src/app/uploads/) isn't defined in the router.

Can someone please advise? Many thanks!

Answer 1

The constant URL should be replaced by your Back-End app (URL:Port) that will receive and handle the uploaded file.

If you are using the file-catcher.js sample, the correct should be:

const URL = 'http://localhost:3000/api/

---- x ----

Inside the folder demo\src\app\components\file-upload there are 3 files:

simple-demo.html 
simple-demo.ts 
file-catcher.js 

This file-catcher.js is a sample code to a Back-End that will handle your uploading request. To make it run you need Node.js. So basically, you have to open a terminal, go to this folder and execute node file-catcher.js (1st make shure to install all dependencies using npm). This will create a server running at port 3000 that will receive the Angular request to upload and will save the file (in this case, inside the folder uploads - make shure to assaing the correct permissions on it).

Here you have a step by step that I hope to helps you: https://www.thepolyglotdeveloper.com/2016/02/upload-files-to-node-js-using-angular-2/