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

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