web-dev-qa-db-fra.com

Téléchargement de fichier dans Angular 4

quand j'essaye d'installer "npm install ng2-file-upload --save" dans mon application 4 angulaire, il jette

UNMET PEER DEPENDENCY @4.1.0
UNMET PEER DEPENDENCY @4.1.0
`-- [email protected]

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

"Impossible de se lier à 'uploader' car ce n'est pas une propriété connue de 'entrée'"

c'est mon HTML 

<input type="file" ng2FileSelect [uploader]="upload" multiple formControlName="file" id="file"/>

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 Grand Parent).

quelqu'un peut-il m'aider à ce sujet s'il vous plaît ...

angularfile-uploaddependenciespeer
10
sandeep

Télécharger des images dans Angular 4 sans plugin C’est cet article qui pourrait valoir la peine d’être essayé . Télécharger des images dans Angular 4 sans plugin

Il met l'accent sur ces points:

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

Pour solution commune est de créer un nouveau module comme shared module. Vous devez simplement créer un module partagé comme This et importer un module partagé dans un 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 { }

il suffit d’importer share.module dans votre 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 oeil sur le chargement paresseux dans 4 angulaire

2
Sathish Kotha

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, en cliquant sur le bouton Lien et à télécharger des données supplémentaires avec des fichiers.

Voir l'article complet ici Angular 4 télécharger des fichiers avec des données et une API Web par glisser-déposer

2
Ali Adravi

Pour ce faire, vous n'avez pas besoin d'une bibliothèque externe. Consultez l'exemple de code ci-dessous.

@Component({
    selector: 'app-root',
    template: '<div>'
        + '<input type="file" (change)="upload($event)">'
        + '</div>',
})

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: 'Sample File',
            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

2
Prashobh

importer fileupload de primeng ou utiliser un simple uploader de fichier

HTML

  <p-fileUpload name="myfile[]"  customUpload="true" 
     (uploadHandler)="uploadSuiteForRelease($event)" auto="auto"></p-fileUpload>

TS

 var data = new FormData();
        let index: number = 0;
        if (this.files != undefined)
        {
            for (let file of this.files.files)
            {
                data.append("myFile" + index, file);
                ++index;
            }
        }
     data.append('viewModel', JSON.stringify(<<data model that needs to be 
     sent with request>>));

Envoyer ces données avec la requête return this._httpClient.post ('api/controller', data)

Serveur 

  [HttpPost]
        public async Task<IHttpActionResult> Post()
        {
            HttpPostedFile httpPostedFile = null;
            var viewModel = JsonConvert.DeserializeObject<ReleasesViewModel>(HttpContext.Current.Request["viewModel"]);
            if (viewModel != null)
            {
                if (HttpContext.Current.Request.Files.AllKeys.Any())
                {
                    var cnt = HttpContext.Current.Request.Files.Count;
                    for (int i = 0; i < cnt; i++)
                    {
                        httpPostedFile = HttpContext.Current.Request.Files["myFile" + i];
                    }
                }
            }
        }
0
Sara

HTML: 

<input type="file" (change)="onFileChange($event)" id="file">

TS:

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

export class myComponent{

    form: FormGroup;

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

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

      let httpRequest = httpclient.post(url, body);
      httpRequest.subscribe((response) =>{
         //..... handle response here
      },(error) => {
         //.....handle errors here
      });
   }

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