Copy <input type="file" name="attachment" />
Copy <form action="https://api.web3forms.com/submit" enctype="multipart/form-data" method="POST">
...
<input type="file" name="attachment" />
...
</form>
Our Default HTML5 File uploader works only for single files up to 5 MB only. To upload multiple files or larger attachments, we recommend using our Advanced File Uploader. Please see the guide here
File upload with Javascript
Here's an example code with Javascript
Copy < form id = "myForm" method = "POST" >
...
< input type = "file" id = "attachment" name = "attachment" />
...
< button type = "submit" >Submit Form</ button >
</ form >
Copy const form = document .getElementById ( "myForm" );
form .addEventListener ( "submit" , function (e) {
e .preventDefault ();
const formData = new FormData (form);
formData .append ( "access_key" , "YOUR_ACCESS_KEY_HERE" );
formData .append ( "subject" , "New Submission from Web3Forms" );
const file = document .getElementById ( "attachment" );
const filesize = file .files[ 0 ].size / 1024 ;
if (filesize > 1000 ) {
alert ( "Please upload file less than 1 MB" );
return ;
}
// Don't add `headers` or `content-type` in this fetch call
// Since it contains attachments, the browser auto-adds them.
fetch ( "https://api.web3forms.com/submit" , {
method : "POST" ,
body : formData
})
.then ( async (response) => {
let json = await response .json ();
if ( response .status == 200 ) {
console .log ( json .message);
} else {
console .log (response);
}
})
.catch ((error) => {
console .log (error);
})
.then ( function () {
form .reset ();
});
});