How to solve the problem that the file name of antd upload is broken

Question

Currently, in my project, I am using ant-design upload as follows.

<ImageUploaderWrapper
      name="images"
      rules={[
        {
          required: true,
        },
      ]}                    
      valuePropName="fileList"
      getValueFromEvent={normFile}
      initialValue={editPost && [...editPostImages]}
    >          
      <Upload.Dragger             
        name="image" 
        multiple            
        listType="picture"
        onChange={onChangeImages}
        beforeUpload={onBeforeUpload}                        
        onPreview={onImagePreview}
      >            
        <ImageUploaderText className='bold'>
          {editPost ? 'Drag edit files here or' : 'Drag files here OR'}
        </ImageUploaderText>            
        <Button type='primary' size='large' icon={<UploadOutlined />}>Upload</Button>
      </Upload.Dragger>
  </ImageUploaderWrapper>

I am studying in Korea and often upload file names in Korean.

At this time, if you upload an image file in Korean, it is changed to special characters as follows.

// Upload file name
다운로드.jfif

// Uploaded file name
ë¤ì´ë¡ë_.jfif

I would appreciate it if you could let me know what method I should use to solve this problem.

Answer 1

using customRequest for this solution:

const formData = new FormData();
formData.append(fileName, file, encodeURI(file.name));