In essence I am trying to do as the link below: https://docs.strapi.io/developer-docs/latest/plugins/upload.html#upload-files-related-to-an-entry
My code is just slightly different but should achieve the same goal of adding the new file as a field to a entry of a Content-Type:
import React from 'react'
import { useState } from 'react'
import { API_URL } from '@/config/index'
import styles from '@/styles/Form.module.css'
export default function ImageUpload({ evtId, imageUploaded }) {
const [image, setImage] = useState(null)
const handleSubmit = async (e) => {
console.log('handleSubmit')
e.preventDefault()
const formData = new FormData() // pure javascript nothing to do with react
formData.append('files', image)
// formData.append('ref', 'events') //'ref' The collection we want to use
formData.append('ref', 'api::event.event')
formData.append('refId', evtId) //'refId' The event Id
formData.append('field', 'image') //'field' the image field we called 'image'
const res = await fetch(`${API_URL}/api/upload`, {
method: 'POST',
body: formData,
})
if (res.ok) {
console.log('res.ok')
console.log('res', res)
imageUploaded()
}
}
const handleFileChange = (e) => {
console.log('handleFileChange')
console.log(e.target.files[0]) //this will give us an array and we want the first wone so we add 0
setImage(e.target.files[0])
}
return (
<div className={styles.form}>
<h1> Upload Event Image</h1>
<form onSubmit={handleSubmit}>
<div className={styles.file}>
<input type='file' onChange={handleFileChange} />
</div>
<input type='submit' value='Upload' className='btn' />
</form>
</div>
)
}
The code above works perfectly when I use it for the first time and upload the first image I want to add as a value to the field in a event entry in the event Collection-Type. However, if I decide that I no longer want that initial image as the value and would like to update it, if I use the same method above it doesn't work.
In the tutorial I'm following that is using perhaps v3 of Strapi, they were able to update/replace the image file just by using the same code.
How do I do the same thing for v4?
I'm not sure if this is the best and highest answer however it works for at the end of the day. The tutorial I'm following was perhaps working with v3 and it didn't have to delete the image to update it. In my case for v4 I couldn't find a exact corresponding code for it. What I decided to do was to delete the file before uploading the new replacement file which gives me the same result at the end.
import React from 'react'
import { useState } from 'react'
import { API_URL } from '@/config/index'
import styles from '@/styles/Form.module.css'
export default function ImageUpload({ evtId, imageUploaded, imgId }) {
const [image, setImage] = useState(null)
const handleSubmit = async (e) => {
console.log('handleSubmit')
e.preventDefault()
const formData = new FormData() // pure javascript nothing to do with react
formData.append('files', image)
// formData.append('ref', 'events') //'ref' The collection we want to use
formData.append('ref', 'api::event.event')
formData.append('refId', evtId) //'refId' The event Id
formData.append('field', 'image') //'field' the image field we called 'image'
var uploadFormData = async () => {
const res = await fetch(`${API_URL}/api/upload`, {
method: 'POST',
body: formData,
})
if (res.ok) {
console.log('res.ok')
console.log('res', res)
imageUploaded()
}
}
if (imgId === null) {
console.log('imgId is null')
uploadFormData()
} else {
console.log('imgId not null')
const resDelete = await fetch(
`${API_URL}/api/upload/files/${imgId}`,
{
method: 'DELETE',
// body: formData,
}
)
if (resDelete.ok) {
console.log('resDelete.ok')
console.log('resDelete', resDelete)
uploadFormData()
}
}
}
const handleFileChange = (e) => {
console.log('handleFileChange')
console.log(e.target.files[0]) //this will give us an array and we want the first wone so we add 0
setImage(e.target.files[0])
}
return (
<div className={styles.form}>
<h1> Upload Event Image</h1>
<form onSubmit={handleSubmit}>
<div className={styles.file}>
<input type='file' onChange={handleFileChange} />
</div>
<input type='submit' value='Upload' className='btn' />
</form>
</div>
)
}