upload multiple file(image, file text,etc) to server using reactive form

Question

Hi I want to upload multiple file and send them to a server: using reactive form: I define this in the appropriate class:

this.attachmentsForm = this.formBuilder.group({
        attachmentName: ['']
      });

in the template html :

 <form [formGroup]="attachmentsForm">
              <ion-item>
                <ion-label floating>
                  Attachment Name
                </ion-label>
                <ion-input type="text" formControlName="attachmentName"></ion-input>
              </ion-item>
              <input class="form-control" #fileInput type='file' (change)="fileChanged($event)">
    </form>

In this class I used this function :

 fileChanged(event) {
        if (event.target.files && event.target.files[0]) {
          if (event.target.files[0].size > 512000) {
            this.fileValid = false;
            let toast = this.toastCtrl.create({
              message: 'the file size more than 500kb',
              duration: 3000
            });
            toast.present();
          } else {
            this.fileValid = true;
          }
        }

      }

So how can I get the data of the attachments :(Base64 or if there another solution) thanks in advance

Answer 1

It may work.

    files: FileList;
onChange(event: EventTarget) {
    let eventObj: MSInputMethodContext = <MSInputMethodContext>event;
    let target: HTMLInputElement = <HTMLInputElement>eventObj.target;
    this.files = target.files;
}

sendFilesToServer() {
    var formData = new FormData();
    for (var i = 0; i < this.files.length; i++) {
        formData.append('filesList[]', this.files[i], this.files[i].name);
    }
    var xhr = new XMLHttpRequest();
    xhr.open('POST', "submitFiles");
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            console.log("Files Uploaded")
        }
    }
    xhr.send(formData);
}

Java Code

    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.bind.annotation.ResponseBody;
    import org.springframework.web.multipart.MultipartFile;
    import org.springframework.web.multipart.MultipartHttpServletRequest;
    import org.apache.commons.io.IOUtils;

    @Controller
    public class MyController {

      @ResponseBody
      @RequestMapping(value = "submitFiles", method = RequestMethod.POST)
      public String submitPapers(MultipartHttpServletRequest request) {

        List  papers = request.getFiles("filesList");
    // If "filesList" doesn't work then try "filesList[]"
        try {
          saveFilesToServer(papers);
        } catch (Exception e) {
          return "error";
        }
        return "success";
      }

      public void saveFilesToServer(List multipartFiles) throws IOException {
        String directory = "/home/user/uploadedFilesDir/";
        File file = new File(directory);
        file.mkdirs();
        for (MultipartFile multipartFile : multipartFiles) {
            file = new File(directory + multipartFile.getOriginalFilename());
            IOUtils.copy(multipartFile.getInputStream(), new FileOutputStream(file));
        }
      }

}

Even if it will not work then try the classic method

**NOTE : ** In html code don't forget to add attribute multiple in element.

<input name="papers" id="modalPapers" type="file" class="filestyle" multiple data-input="false">

Answer 2

Please Try this code

imageBase64:string;
file: File;

fileChanged($event: any) {
        if (event.target.files && event.target.files[0]) {
            this.file = event.target.files[0];
            if (this.file.size > 512000) {
                if (this.file.type.startsWith("image")){
                    var myReader:FileReader = new FileReader();
                    myReader.onloadend = (e) => {
                        this.imageBase64 = myReader.result;
                    }
                    myReader.readAsDataURL(this.file);
                }else {
                    Logger.error("must select an image.");
                }
            } else {
                this.fileValid = true;
            }
        }

    }