Angular 2 upload multiple files

Question

I trying to upload multiple files (PDFs or various image formats). Right now uploading a single file works, but multiple does not.

This is the code:

HTML:

<div>
    <label> Upload PDF(s) or Images (PNG/JPG/DICOM/DCM):</label>
    <div class="ctrl">
        <div class="icon">
            <i class="fa fa-file-image-o"></i>
        </div>
        <input type="file" (change)="onChange($event)"/>
        <md-input class="ctrl" [(ngModel)]="fileName"></md-input>
    </div>
</div>

Script:

onChange(event: any) {
    this.fileName = event.srcElement.files[0].name;
}

Help me how to do multiple files upload.

slaesh · Accepted Answer · 2016-09-21 06:36:17Z

12

Add the multiple attribute to you input:

<input type="file" (change)="onChange($event)" multiple />

And to show all file names in your input, do it like in this plunker: https://plnkr.co/edit/WvkNbwXpAkD14r417cYM?p=preview

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <input type="file" multiple (change)="onChange($event, showFileNames)" />
      <input #showFileNames />
    </div>
  `,
})
export class App {
  constructor() {
    this.name = 'Angular2'
  }

  onChange(event: any, input: any) {
    let files = [].slice.call(event.target.files);

    input.value = files.map(f => f.name).join(', ');
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

Or use your variable instead of putting it directly to that input!

edited Sep 21, 2016 at 6:36

answered Sep 21, 2016 at 6:15

slaesh

17k6 gold badges53 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

slaesh Over a year ago

Showing, yes.. Cause you are using files[0].name .. but uploading? that was the question, right? :)

Nagarjuna Reddy Over a year ago

What I am trying is, I have a file upload option. Where I can upload one or more files. When I click on Add button it has to send that uploaded files names. Right now only the newly uploaded file name is showing.

Ajith Over a year ago

@mxii If i want to upload it using HTTP which vallue should i send?

Vasanth Over a year ago

Can anyone tell me what is the angularJS code to upload multiple files ?

Mohd Abdul Baquee · Accepted Answer · 2020-01-08 14:30:53Z

2

Initialization:

selectedFiles: File[];

Files Selection Event :

onFileSelected(event) {
  this.selectedFiles = event.target.files;
  for (let i = 0; i < event.target.files; i++) {
    this.selectedFiles.push(event.target.files[i]);
  }
}

Form Submission Event :

onSubmit() {
  const formData = new FormData();
  if (this.selectedFiles.length > 0) {
   for (const row of this.selectedFiles) {
     formData.append('document_files[]', row);
   }
  }
}

HTML File Input :

<input 
 type="file" 
 id="documents" 
 multiple
 formControlName="documents" 
 (change)="onFileSelected($event)"
 accept="image/*,.pdf,.doc,.docx,.xml">

answered Jan 8, 2020 at 14:30

Mohd Abdul Baquee

4493 silver badges7 bronze badges

Comments

Atul Bhalerao · Accepted Answer · 2016-09-21 06:39:36Z

1

you can try this it worked for me ;)

https://github.com/jkuri/ng2-uploader

answered Sep 21, 2016 at 6:39

Atul Bhalerao

661 silver badge9 bronze badges

Collectives™ on Stack Overflow

Angular 2 upload multiple files

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related