Angular sending multiple images with filereader

Issue

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);
      }
    }
  }

Solution

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);
    }
  }
}

Answered By - Joosep.P