An Interest In:
Web News this Week
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
- April 13, 2024
- April 12, 2024
How to Upload a File (Image/Pdf/Zip/etc) to Strapi with React
When I first started using Strapi as a CMS for one of my client, to give them a little freedom to manage their website content, the hardest part of the development was when I need to build a feature where there is a contact form which people can add and send an attachment (pdf/zip/image/etc.)
If I'm not mistaken, there is no official documentation regarding this on Strapi website, but after a few research, I discovered the step to do it.
1. Enable user permission to upload
Strapi has an upload plugin, that can enable user to upload file to strapi, make sure you check the upload checklist like the image below)
You can find the section in your-url.com/admin/settings/users-permissions/roles
2. Send file to Strapi
First, you need to send your file first to Strapi before submit the entire form data. Later, you can link the file and your form data using the id of the file that has been uploaded. For the code example I'm using axios to fetch the request.
const [selectedFile, setSelectedFile] = useState(null);let file = new FormData();file.append("files", selectedFile);axios.post("your-strapi-url/upload",file) .then((response) => { const fileId = response.data[0].id }) .catch((error)=>{ //handle error })
3. Send the form data to Strapi
You can use React useState or other method to store your form value, then create a FormData based on those value. Then the whole code will probably look like this
let formData = new FormData(); formData.append("fullName", name); formData.append("companyName", company); formData.append("email", email); formData.append("phoneNumber", phone); formData.append("team", phone); formData.append("files", selectedFile); formData.append("message", message);axios.post("your-strapi-url/upload",file) .then((response) => { const fileId = response.data[0].id axios({ method: "post", url: "your-strapi-url/contact-submissions", data:{ fullName: name, companyName: company, email: email, phoneNumber: phone, team: team, attachments: fileId, message: message, } }) .then(({ data }) => { setResponse(data); }) .catch((error) => { //handle error }); }) .catch((error)=>{ //handle error })
Since we have uploaded the file before the whole data, hence on the second request we only need to send the Strapi fileId that is attached with the file that we have uploaded previously.
Note: the endpoint "contact-submissions" is my own custom endpoint, where my client can see the data that their costumer has sent through the contact form.
I hope this short tutorial / article is helpful. Have a good day!
Original Link: https://dev.to/melvnl/how-to-upload-a-file-imagepdfzipetc-to-strapi-with-react-35jd
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To