Почему файл для отправки на сервер имеет значение null?

Question

[Данил Волконеско]

В общем есть форма реализованная через react-hook-form (но я так же пробовал и без него посредством простой формы)

const onSubmit: SubmitHandler<ICreateProduct> = (data) => {
        dispatch(createProduct(data));
    }


    return (
        <form className={styles.root} onSubmit={handleSubmit(onSubmit)}>
            <Stack>
                <span>Название</span>
                <input type="text" {...register('name')}/>
            </Stack>
            <Stack>
                <span>Цена</span>
                <input type="number" {...register('price')}/>
            </Stack>
            <Stack>
                <span>Рейтинг</span>
                <input type="number" {...register('rating')}/>
            </Stack>
            <Stack>
                <span>Описание</span>
                <input type="text" {...register('description')}/>
            </Stack>
            <Stack>
                <span>Изображение</span>
                <input type="file" {...register('image')}/>
            </Stack>
            <Stack>
                <span>Категория</span>
                <input type="number" {...register('categoryId')}/>
            </Stack>
            <input type="submit"/>
        </form>

А вот запрос на сервер через createAsyncThunk

export const createProduct = createAsyncThunk<IProductCreated, ICreateProduct>(
    'products/createProduct',
    async ({name, price, rating, description, image, categoryId}, {rejectWithValue}) => {
      try {
        console.log({
          name, price, rating, description, image, categoryId
        })
        const formData = new FormData();
        formData.append('name', name);
        formData.append('price', String(price));
        formData.append('rating', String(rating));
        formData.append('description', description);
        formData.append('image', image);
        formData.append('categoryId', String(categoryId));
          const response = await $api_file.post('api/product', formData);
          return response.data;
      } catch (error: any) {
        if (error.response && error.response.data.message) {
          return rejectWithValue(error.response.data.message);
        } else {
          return rejectWithValue(error.message);
        }
      }
    }
)

там где я поставил console.log в этом месте выводит следующие данные в консоль (сделал для наглядности что попадает в FormData:


И при всем этом возникает ошибка при сабмите которая приходит с сервера:

message: "Cannot read properties of null (reading 'image')"

Через Postman отправляю все работает. В чем тут дело?

Comments

[SymphoGraph]

А какой Content-Type в заголовках отправляется?

[Данил Волконеско]

const $api_file = axios.create({
    withCredentials: true,
    headers: {
        'Content-Type': 'multipart/form-data',
    },
    baseURL: process.env.REACT_APP_API_URL,
})

[Александр]

FormData.append(name, value, filename)

[Данил Волконеско]

Александр, К сожалению если делаю так то вообще запроса не происходит, и выполнение кода прекращается сразу после этой строки

FormData.append('image', image, 'test')

[Александр]

Данил Волконеско, Раз так, какая ошибка?

[Данил Волконеско]

Александр, Что самое странное ошибки вообще не выдавало, просто пустая консоль, в сети так же пусто.

Answer 1

[Данил Волконеско]

В общем разобрался с проблемой с горем пополам. Проблема была в том что в аргументе data у меня был тип image - File. И я это не заметил и не мог понять почему вебшторм ругается на такое мое дествие (но если закрыть на него глаза то все заработало)

data.image.item(0)

И я соответственно заменил тип File на FileList и далее сделал такую проверку чтобы ни на что не ругалось

const fileImage: File | null = data.image.item(0);
        if (!!fileImage) {
            dispatch(createProduct({
                ...data,
                image: fileImage
            }));
        }

Спасибо всем за помощь в поиске проблемы.