Upload d'un fichier avec Angular2 et spring

Bonjour

Je suis débutante en Angular2 . Je travaille sur un projet qui utilise le "spring " dans la partie du backend et angular2 dans la partie "frontend". Je cherche la méthode avec laquelle je peux importer un fichier vers le serveur ou bien faire un "Drag" .
J'utilise webstorm 2016.1 et la version du node est 4.4.0 .
J'ai cherché sur le net et j'ai trouvé qu'il existe un module "ng2-uploader" pour facilieter cette tâche . Je l'ai testé mais ce dernier posséde des problémes de compilation .
voilà l'erreur qui s'affiche:

Citation:

Error: (32, 75) TS2345: Argument of type 'File' is not assignable to parameter of type 'any[]'.
Property 'length' is missing in type 'File'.

Voici le code de mon webservice:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
@RestController
public class UploadFileController {
 
	@RequestMapping(value = "/upload", method = RequestMethod.GET)
	public @ResponseBody String provideUploadInfo() {
		return "You can upload a file by posting to this same URL.";
	}
 
	@RequestMapping(value = "/upload", method = RequestMethod.POST)
	public @ResponseBody String handleFileUpload(@RequestParam("name") String name,
			@RequestParam("file") MultipartFile file) {
		if (!file.isEmpty()) {
			try {
				byte[] bytes = file.getBytes();
				BufferedOutputStream stream = new BufferedOutputStream(new FileOutputStream(new File(name)));
				stream.write(bytes);
				stream.close();
				return "You successfully uploaded " + name + "!";
			} catch (Exception e) {
				return "You failed to upload " + name + " => " + e.getMessage();
			}
		} else {
			return "You failed to upload " + name + " because the file was empty.";
		}
	}
}

et ceci du FrontEnd:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import {Http,Response} from "angular2/http";
import {contentHeaders} from "../../config/headers";
import {API} from "../../config/constants";
import { Router } from 'angular2/router';
import {MATERIAL_DIRECTIVES} from "ng2-material/all";
import { CORE_DIRECTIVES } from 'angular2/common';
import { Component, View,NgZone } from 'angular2/core';
 
let styles = require('./demo.css');
    let template = require('./demo.html');
@Component({
    selector: 'demo',
      templateUrl: 'app/components/demo/demo.html',
    styleUrls: ['app/components/demo/demo.css'],
 
 
})
 
 
    export class Demo {
 
      response : string;
        constructor(public http: Http){
            //  contentHeaders.append('X-Auth-Token', localStorage.getItem('jwt'));
 
        }
        uploadfile(name: String, file:File ){
            console.log("button clicked");
            return this.http.post(API + '/api/upload',JSON.stringify(name,file),{ headers: contentHeaders })
                .subscribe(res => {console.log(res)},
                    error=>{this.response = error.text()}
 
                );
        }
 
 
}

et ceci du html:

Code:

1
2
3
4
5
6
7
8
9
<h1> File Upload Example</h1>
 
<form   enctype="multipart/form-data" >
    <p>
        Select a file to Upload to server: <input type="file" name="file" size="60" />
    </p>
    <p><a class="btn btn-primary btn-lg" role="button" (click)="uploadfile()">UploadFile</a></p>
 
</form>