0

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!

decebal
  • 1,151
  • 3
  • 18
  • 38

1 Answers1

2

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/

Flinkas
  • 56
  • 9
  • Thanks for your answer @Flinkas but I am not sure what you mean. I am using this module: https://github.com/valor-software/ng2-file-upload and my app is running on http://localhost:4200 I don't know what you mean by "file-catcher.js sample". – decebal Sep 28 '17 at 09:03
  • I will have a look at this. It's good to know that the problem I have is related to the backend. I thought I was doing something wrong in Angular. Many thanks! – decebal Sep 28 '17 at 11:36