Téléchargement de fichier en Angular 4

Question

Lorsque j'essaie d'installer "npm install ng2-file-upload --save" dans mon application angular 4, ça lance

DEPENDANCE DE PAIRE NON SATISFAITE @4.1.0
DEPENDANCE DE PAIRE NON SATISFAITE @4.1.0
`-- ng2-file-upload@1.2.1

et le téléchargement ne fonctionne pas mes applications lancent

"Impossible de lier 'uploader' car ce n'est pas une propriété connue de 'input'"

voici mon HTML

et son Composant

import { FileUploadModule } from 'ng2-file-upload/ng2-file-upload';   
import { FileSelectDirective, FileUploader } from 'ng2-file-upload/ng2-file-
upload';

export class PersonalInfoComponent implements OnInit
{
    public upload:FileUploader= new FileUploader({url:""});
}

Module Parent

import { FileUploadModule } from 'ng2-file-upload/ng2-file-upload';

@NgModule({

imports: [
..
....
..
FileUploadModule
],

export class RegistrationModule { }

et je n'ai rien importé/changé dans AppModule (Module Parent Grand).

est-ce que quelqu'un peut m'aider sur ça s'il vous plaît...

Answer 1

Téléchargez des images en Angular 4 sans plugin Cet article vaut la peine d'être essayé. Téléchargez des images en Angular 4 sans plugin

Il met l'accent sur ces points :

1. Utilisation de la méthode .request() au lieu de .post
2. Envoi des formData directement dans le corps.
3. Personnalisation des en-têtes et construction d'un nouvel objet RequestOptions.
4. Pour envoyer des formData avec du contenu image, vous devez supprimer l'en-tête Content-Type.

Answer 2

Je ne pense pas que nous ayons besoin de bibliothèques supplémentaires

onFileChange(event){
   let files = event.target.files; 
   this.saveFiles(files);
}
@HostListener('dragover', ['$event']) onDragOver(event) {
    this.dragAreaClass = "droparea";
    event.preventDefault();
}
@HostListener('dragenter', ['$event']) onDragEnter(event) {
    this.dragAreaClass = "droparea";
    event.preventDefault();
}
@HostListener('dragend', ['$event']) onDragEnd(event) {
    this.dragAreaClass = "dragarea";
    event.preventDefault();
}
@HostListener('dragleave', ['$event']) onDragLeave(event) {
    this.dragAreaClass = "dragarea";
    event.preventDefault();
}
@HostListener('drop', ['$event']) onDrop(event) {   
    this.dragAreaClass = "dragarea";           
    event.preventDefault();
    event.stopPropagation();
    var files = event.dataTransfer.files;
    this.saveFiles(files);
}

Et maintenant nous sommes prêts à télécharger des fichiers par glisser-déposer ainsi qu'en cliquant sur le bouton de lien et à télécharger des données supplémentaires avec les fichiers.

Voir l'article complet ici Angular 4 upload files with data and web api by drag & drop

Answer 3

Pour une solution commune, il suffit de créer un nouveau module tel que module partagé. Vous devez simplement créer un module partagé comme ceci et l'importer dans le fichier app.module

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { FileSelectDirective, FileDropDirective } from 'ng2-file-upload';
import { FileUploadModule } from 'ng2-file-upload/ng2-file-upload';

@NgModule({
     imports: [ FileUploadModule],  
     declarations: [ ],
     exports :[ FileSelectDirective, FileDropDirective, FormsModule,
               FileUploadModule],
})
export class SharedModule { }

importe simplement le module partagé dans ton app.module comme ceci.

import { NgModule } from '@angular/core';
import { SharedModule} from '../shared/shared.module';

@NgModule({
    imports: [SharedModule],
    declarations: [],
    exports :[],
   })
export class AppModule { }

jetez un œil au chargement différé dans angular 4

Answer 4

Vous n'avez pas besoin d'une bibliothèque externe pour faire cela, vérifiez le code d'exemple ci-dessous

@Component({
    selector: 'app-root',
    template: ''
        + ''
        + '',
})

export class AppComponent {

    constructor(private _service: commonService) { }

    upload(event: any) {
        let files = event.target.files;
        let fData: FormData = new FormData;

        for (var i = 0; i < files.length; i++) {
            fData.append("file[]", files[i]);
        }
        var _data = {
            filename: 'Fichier d'exemple',
            id: '0001'
        }

        fData.append("data", JSON.stringify(_data));

        this._service.uploadFile(fData).subscribe(
            response => this.handleResponse(response),
            error => this.handleError(error)
        )
    }
    handleResponse(response: any) {
        console.log(response);
    }
    handleError(error: string) {
        console.log(error);
    }
}

Plus d'informations

Answer 5

HTML:

TS:

@Component({
  ......
})

export class myComponent{

    form: FormGroup;

    contructor(fb: FormGroup){
       form: fb.group({file: null});
    }

 //fVals vient du Formulaire HTML -> (ngSubmit)="postImage(form.value)" 
    postImage(fVals){
      let body = new FormData();
      body.append('file', formValues.file);

      let httpRequest = httpclient.post(url, body);
      httpRequest.subscribe((response) =>{
         //..... gérer la réponse ici
      },(error) => {
         //..... gérer les erreurs ici
      });
   }

   onFileChange(event) {
     if(event.target.files.length > 0) {
       let file = event.target.files[0];
       this.form.get('file').setValue(file);
     }
   }
}