Angular sending multiple images with filereader Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Angular sending multiple images with filereader without wasting too much if your time.

The question is published on by Tutorial Guruji team.

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

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);
    }
  }
}
We are here to answer your question about Angular sending multiple images with filereader - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji