Не правильно преобразует русский текст при передачи на сервер nextjs

Я формирую изображения в формат formData и отправляю на nextjs сервер где 'use server' но туда приходит текст уже не правильного формата.

const handleFileUpload = async (files: FileList | null) => {
    if (files && files.length > 0) {
        const file = files[0];
        const formData = new FormData();
        formData.append("image", file);

        console.log('handleFileUpload', Object.fromEntries(formData));

        try {
            const data = await mutateAsync(formData);
            console.log('data', data);
        } catch (error) {
            console.log("Error uploading file:", error);
        }
    }
};

Эта функция вызывается при изменение input у которого type=file, получаю файл, формирую дату и отправляю через react-query на сервер

export const queryUploadImage = () => {
    const queryClient = useQueryClient();

    return useMutation({
        mutationFn: async (formData: FormData) => {
            console.log('queryUploadImage', Object.fromEntries(formData));
            return apiUploadImage(formData);
        },
        onSuccess: () => {
            queryClient.invalidateQueries({ queryKey: ['getImages'] });
        }
    });
}

Это функция react-query тут в console.log('queryUploadImage', Object.fromEntries(formData)); все еще данные нормального вида.

а apiUploadImage уже выполняется на сервере

'use server';

export const apiUploadImage = async (
    formData: FormData
): Promise<ApiResponse & {
    imageData?: ImageProps
}> => {
    await waiting(1);
    console.log('apiUploadImage', Object.fromEntries(formData));

    ...
    ...
}

тут я уже получаю

File {
  size: 2238334,
  type: 'image/png',
  name: 'Ð\x9DовÑ\x8Bй моÑ\x8Fк.png',
  lastModified: 1711877589810
}

где названия которое было на русском уже не на русском :) Как можно указать\исправить чтобы получать нормальные данные, чтобы можно было сохранить русский язык.


Ответы (1 шт):

Автор решения: Igor T

В клиентском компоненте

formData.append('image', file, encodeURI(file.name))

В серверном компоненте

  for(const [key,value] of formData.entries()) {
    formData.set(key, value, decodeURI(value.name))
  }

Фронтендером не являюсь, и не могу точно сказать, что этот выход является единственным и оптимальным, однако, мне помог)

→ Ссылка