Chlouchloutte ¯\_(ツ)_/¯
213 shaares
3 résultats
taggé
file
Super article qui reprend comment binder un file input avec Aurelia.
Exemple upload côté client :
fichier html
<input type="file" #package (change)="prepareFile(package.files)" class="is-small fileupload"/>
<button type="button" class="button is-small" (click)="importPackage()" [disabled]="!this.validPackage">Valider</button>fichier ts :
selectedPackage: any;
prepareFile(files: any) {
this.selectedPackage = files;
//exemple pour bloquer l'upload si on a pas affaire à un zip :
if(files != null){
let extension = files[0].name.split('.').pop();
if(extension == "zip" || extension == "ZIP"){
this.validPackage = true;
}else{
this.validPackage= false;
}
}
}
importPackage(): void {
let file: File = this.selectedPackage[0];
this.packageService.uploadFile(file).subscribe(
result => this.onFileUploaded(result)
);
}
onFileUploaded(result: any): void {
this.selectedPackage = null;
}packageService.ts
uploadFile(file: File): Observable<Entity[]> {
let formData: FormData = new FormData();
formData.append('file', file, file.name);
const url = `${this.getUrl()}/upload`;
return this.http.post(url, formData)
.map(res => this.extractListFromResponse(res))
.catch(res => this.handleError(res))
}Dans notre cas, le retour de la requete est une liste d'item. A vous de voir de votre côté.
Controller côté java:
@RequestMapping(value = "/upload", method = RequestMethod.POST)
public ResponseEntity uploadFile(@RequestParam("file") MultipartFile file) {
if (!file.isEmpty()) {
try {
return new ResponseEntity<>(this.packageService.uploadPackage(file.getBytes()), HttpStatus.OK);
} catch (GenericBELException | IOException e) {
return super.forwardException("Impossible de récupérer le package " + file.getOriginalFilename(), e);
}
} else {
return this.createStructuredResponse("Impossible de récupérer le package " + file.getOriginalFilename() + ". Il était vide à la réception.", HttpStatus.NO_CONTENT);
}
}A partir du file, vous pouvez extraire le contenu avec des BufferReader.
Gérer la récupération des fichiers avec Angular4 peut être un vrai casse-tête : entre les problèmes de compatibilité lié au navigateur et l'API de service qui ne répond pas facilement à ce besoin, j'ai trouvé cette petite librairie bien pratique.
On l'appelle de cette manière :
import { Component } from '@angular/core';
import { ZipService} from '../services/ZipService';
import { saveAs as importedSaveAs } from "file-saver";
@Component({
selector: 'zip-zip',
templateUrl: './zip-component.html'
})
export class ZipComponent {
private zipService: ZipService;
constructor(zipService: ZipService) {
this.zipService= zipService;
}
public getZipFile(): any {
this.zipService.downloadZipFile().subscribe(
(data: any) => {
importedSaveAs(new Blob([data], {type: 'application/zip'}), 'filename.zip');
},
error => this.doSomething(),
() => this.doSomething()
);
}
}