Skip to content

Instantly share code, notes, and snippets.

@fport
Created December 27, 2022 23:03
Show Gist options
  • Save fport/2483607a1c3b2d0b60cebc471af093d6 to your computer and use it in GitHub Desktop.
Save fport/2483607a1c3b2d0b60cebc471af093d6 to your computer and use it in GitHub Desktop.
react-upload-pdf
import React, { useState, useEffect } from 'react';
const PdfUploadForm = () => {
const [pdf, setPdf] = useState(null);
const handleChange = (event) => {
setPdf(event.target.files[0]);
}
const handleSubmit = (event) => {
event.preventDefault();
const formData = new FormData();
formData.append('pdf', pdf);
fetch('/upload', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
// do something with the response data
})
.catch(error => {
// handle errors
});
}
useEffect(() => {
const form = document.getElementById('pdf-upload-form');
form.addEventListener('submit', handleSubmit);
return () => {
form.removeEventListener('submit', handleSubmit);
};
}, []);
return (
<form id="pdf-upload-form">
<input type="file" name="pdf" accept="application/pdf" onChange={handleChange} />
<button type="submit">Upload</button>
</form>
);
}
export default PdfUploadForm;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment