take several photos and upload them at once on Device using HTML5 capture attribute

Im building a webapp that takes pictures from an input tag and upload them to the server when I click "submit". I'm trying to allow the user to take Multiple pictures with the device and upload them all at once without asking the user to click submit every time a picture is taken, so far the app works on mobile device with single picture taken and on the computer with multiple image files being uploaded.

here is my constructor:

constructor(props) {
    super(props);
    this.state = {
        response: '', //API calls
        post: '',//API calls
    };
    this.fileList = []
}

this is what i'm using to request the image:

<form onSubmit={this.handleSubmit}}>
    <input type="file" accept="image/*" capture="camera" onChange={this.handleChange} multiple="multiple" />
    <input type="submit" value="Submit" />
</form>

and i'm handling the file list like this:

handleChange = (event) => {
    event.preventDefault();
    for (const i of event.target.files) {
        this.fileList.push(i);
    }
}

and once I click "submit", this is how its handle:

handleSubmit = (event) => {
    event.preventDefault();
    let data = new FormData();
    data.append('profileImage', this.fileList);
    fetch('/api/upload', { some code goes here}).catch('handle errors here'); // 
}

so basically the above code works well for one picture taken at a time, but how can I achieve taking several pictures and then submitting them all at once on a device?