1

I have been having real trouble trying to send a file to my backend API via my Angular2/NodeJS application I am building. I have tried so many different things and suggestions and nothing seems to work and I cannot figure out why. First, here is my code.

My view code.

<input type='file' (change)='fileChangeEvents($event)' placeholder='Upload file...' />
<button (click)='upload()'>Upload Files</button>

The functions in my controller. I have debugged here and the file upload process works fine to here. The this._filesToUpload variable contains a file that is sent to the service so the problem is not here.

fileChangeEvents(fileInput: any) {
        this._filesToUpload = <Array<File>> fileInput.target.files;
    }

    upload() {
        this._filesService.sendFile(routes.api.files, [], this._filesToUpload)
            .subscribe((result) => {
                console.log(result);
            }, (error) => {
                console.log(error);
            });
    }

Now, here is my service function. As you can see, I am creating a formDataObjct, appending the files to it and attempting to post it to the API via the this._http function:

sendFile(url: String, vars: Array<String>, files: File[]):Observable<any> {
        let headers = HttpHelper.createAuthorizationHeader(true);
        let options = new RequestOptions({ headers: headers });
        let files = files;
        const formData = new FormData();

        for(var i = 0; i < files.length; i++){
            formData.append(files[i].name, files[i]);
        }

        return this._http
            .post(url, formData)
            .map((res) => {
                return res.json();
            });
    }

I have a NodeJS route and function that catches this POST but when I add a breakpoint in my code the file is not anywhere in the post. I have checked the req variable inside my NodeJS route file and there is nowhere where the file is present. I would have thought it would have been in the req.body or req.files but nothing:

router.post('/upload', function(req, res, next) {
    filesRoutesControllerObjectInstance.upload(req, res, next);
});

I have tried the solution using an XHR request too (not using Angular2's http object) but this is not working either.

When I use POSTMAN to send the file I catch the request in my NodeJS route and the file is in there in the req.body property which is really strange. This would suggest to me that my Angular2 functionality is incorrect. Can anyone see what is going wrong here?

James
  • 2,800
  • 7
  • 45
  • 81
  • check http://stackoverflow.com/a/40216616/4793153 or http://stackoverflow.com/a/40379961/4793153 – Eswar Nov 11 '16 at 09:41
  • I have tried this solution and still nothing. There is no file being received in the NodeJS funciton in the req object. There is no req.uploadFile or anything in req.body. When I add a break point after the formData variable there doesn't seem to be anything set in there either? – James Nov 11 '16 at 10:40

0 Answers0