Invoke form submit with a onChange event - reactjs

Question

Sorry if the title is confusing.
Basically I have a form that contains a single input with the type file that is disguised as an icon
I want the form to submit when a file is selected, but I have no clue how to invoke the form submission with the input onChange event (tbh I'm not even sure that would be the adequate way of doing it).
Here is the code:
<Form onSubmit={handleSubmit((data) => updateProfilePicture(data))}>
<IconButton
component='label'
htmlFor='image-input'
style={{
position: "absolute",
bottom: "0",
right: "0",
backgroundColor: "#eee",
}}
>
<Input
type='file'
id='image-input'
name='file'
style={{ display: "none" }}
inputRef={register}
/>
<PhotoCameraIcon style={{ fontSize: "25px" }} />
</IconButton>
</Form>
Here what it looks like:
note: there is two forms, one for the image, one for the data, I don't want to handle the through the "update" button, otherwise it would be one form only and I wouldn't be having this question

Answer 1

You don't need a form to submit after image is added.
you can just use the input field and add onChange event handler get the Image details. Check this out if interested
https://stackblitz.com/edit/react-qjqt3f
import React from "react";
import "./style.css";
export default class App extends React.Component {
constructor() {
super();
this.state = {
url: "https://www.w3schools.com/howto/img_avatar.png"
};
}
onSelectFile = e => {
if (e.target.files && e.target.files[0]) {
var reader = new FileReader();
reader.readAsDataURL(e.target.files[0]); // read file as data url
reader.onload = event => {
// called once readAsDataURL is completed
console.log(event.target.result);
this.setState({ url: event.target.result });
//you can do the HTTP post call here
};
}
};
render() {
return (
<div>
<label className="hoverable" htmlFor="fileInput">
<img src={this.state.url} />
<div className="hover-text">Choose file</div>
<div className="background" />
</label>
<br />
<input id="fileInput" type="file" onChange={this.onSelectFile} />
</div>
);
}
}

Answer 2

You can give the form a id and submit the form per javascript:
document.getElementById("imageForm").submit();
or handle the data without submit:
onChange={() => { handleSubmit(this.files) }}
<Form id="imageForm" onSubmit={handleSubmit((data) => updateProfilePicture(data))}>
<IconButton
component='label'
htmlFor='image-input'
style={{
position: "absolute",
bottom: "0",
right: "0",
backgroundColor: "#eee",
}}
>
<Input
type='file'
id='image-input'
name='file'
style={{ display: "none" }}
inputRef={register}
onChange={() => { document.getElementById("imageForm").submit(); }}
// or:
onChange={() => { handleSubmit(this.files) }}
/>
<PhotoCameraIcon style={{ fontSize: "25px" }} />
</IconButton>
</Form>

Answer 3

Submitting forms programmatically is not the way to go specially within react. But for the sake of it you could achieve something like this by dispatching a submit event.
<Form ref={formRef} onSubmit={handleSubmit((data) => updateProfilePicture(data))}>
...
<Input
type='file'
id='image-input'
name='file'
style={{ display: "none" }}
onChange={(e) => formRef.dispatchEvent(new Event('submit'))}
inputRef={register}
/>
</Form>
better yet, if you do not want to fire any sort of html form validation, putting this file input inside a <form/> is not mandatory. You could call your updateProfilePicture(data) function directly inside of <Input/> s onChange handler.