Angular sending multiple images with filereader

Question

i am using ngx-file-upload for image uploading and sending it as base64 with my formvalue. it works for one image but how can i make it work for multiple images?

.ts

    send() {
      // if (this.createEstimation.valid) {
      let value = this.createEstimation.value;
      const selectedFile = <File>value.files;
      const file = selectedFile[0];
      const fileName = file.name;
      const fileExtension = file.name.split('.').pop().toLowerCase();
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        const image = reader.result as any;
        var strImage = image.split("base64,")[1].substring(4);
        //final data
        this.finalData = {
          client: {
            firstName: value.firstName.split(' ').slice(0, -1).join(' '),
            lastName: value.firstName.split(' ').slice(-1).join(' '),
          },
          images: [
            {
              fileName: fileName,
              content: strImage
            }
          ],
  
        }  
        console.log(this.finalData);
      }
    }
  }

` const file = selectedFile[0];` Here you are picking only 1 file. You can loop the array & push fileName & content properties. Then finaaly attach that array to your finalData — Pankaj Sati
– Pankaj Sati, Commented Feb 3, 2022 at 16:08

Joosep Parts · Accepted Answer · 2022-02-03 18:35:15Z

1

I am going to guess selectedFile is actually a collection of files? We could loop over the files, push file blobs to array of files and add that to finalData. Go over the code, add type checking and refactor where necessary.

  send() {
    // if (this.createEstimation.valid) {
    let value = this.createEstimation.value;
    const selectedFiles = <File>value.files;
    const files = selectedFiles;
    let imageArray = [];
    for (let file of selectedFiles) {
      let fileName = file.name;
      let fileExtension = file.name.split('.').pop().toLowerCase();
      let reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        let image = reader.result as any;
        let strImage = image.split('base64,')[1].substring(4);
        imageArray.push({fileName: fileName, content: strImage});
      };
      this.finalData = {
        client: {
          firstName: value.firstName.split(' ').slice(0, -1).join(' '),
          lastName: value.firstName.split(' ').slice(-1).join(' ')
        },
        images: imageArray

      };
      console.log(this.finalData);
    }
  }
}

edited Feb 3, 2022 at 18:35

answered Feb 3, 2022 at 16:36

Joosep Parts

6,3452 gold badges13 silver badges38 bronze badges

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

1 Comment

user16357452 Over a year ago

Thank you so much!!

Collectives™ on Stack Overflow

Angular sending multiple images with filereader

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related