I have a Collection Type called events. events has a name and image in its data architecture. Therefore events has a name field and a image field.

I have managed to upload a file to strapi v4 via the /api/upload endpoint. I know the upload is working because the file being uploaded does appear in the strapi localhost:1337 back end admin area and it also appears in the cloudinary backend.

However, the image file does not end up being added to the image field of the event.

I have tried to follow the code of multiple examples online but it seems like most of the examples online are for v3 and and v4 of strapi.

In any case below is my code where I do add in the ref, refId, and field of the formData before uploading the file...but it still does not work.

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('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')
            // 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>
    )
}

What am I doing wrong? What should I do so that the newly uploaded file would be added to the image field of the event entry of event Collection Type??

I have a Collection Type called events. events has a name and image in its data architecture. Therefore events has a name field and a image field.

I have managed to upload a file to strapi v4 via the /api/upload endpoint. I know the upload is working because the file being uploaded does appear in the strapi localhost:1337 back end admin area and it also appears in the cloudinary backend.

However, the image file does not end up being added to the image field of the event.

I have tried to follow the code of multiple examples online but it seems like most of the examples online are for v3 and and v4 of strapi.

In any case below is my code where I do add in the ref, refId, and field of the formData before uploading the file...but it still does not work.

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('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')
            // 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>
    )
}

What am I doing wrong? What should I do so that the newly uploaded file would be added to the image field of the event entry of event Collection Type??

• javascript
• reactjs
• rest
• strapi
• form-data

3 Answers 3

Changed the line:

formData.append('ref', 'events')

to

formData.append('ref', 'api::event.event')

and it worked...

Below is updated code...hope it helps other people...

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>
    )
}

I made vid that explains it

https://www.youtube./watch?v=54_SKMmrJkA

Basically you have to upload files in a specific format or else it will not work

Great answer but can't use this to update the image field in the event collection even though it successfully uploads to the media