Comment on page
React File Upload Form
File uploading is one of the major features of Web3Forms. Integrating it with React is tricky. Using the following example, you can copy-paste a fully-working React File upload form.
Note: File Upload is only available for PRO users.
React File Upload Form
Here's the code:
import React from "react";
function App() {
const [result, setResult] = React.useState("");
const onSubmit = async (event) => {
event.preventDefault();
setResult("Sending....");
const formData = new FormData(event.target);
formData.append("access_key", "YOUR_ACCESS_KEY_HERE");
const res = await fetch("https://api.web3forms.com/submit", {
method: "POST",
body: formData
}).then((res) => res.json());
if (res.success) {
console.log("Success", res);
setResult(res.message);
} else {
console.log("Error", res);
setResult(res.message);
}
};
return (
<div className="App">
<h1>React File Upload Form</h1>
<form onSubmit={onSubmit}>
<input type="text" name="name"/>
<input type="email" name="email"/>
<input type="file" name="attachment" />
<input type="submit" />
</form>
<span>{result}</span>
</div>
);
}
export default App;
Last modified 1yr ago