Garbled characters may appear when uploading Chinese files.

default discord avatar
clhomelast year
1 2

When I upload an image and the file name is in Chinese, garbled characters appear on the webpage. How can I solve this problem?
this is the image link
chinesepic
Snipaste2
Snipaste
I searched online and found that if the file name appears garbled when uploading using Node FormData, it may be because the file name is not encoded in UTF-8. We need to use the encodeURI() function or other encoding methods to solve this problem.like this:

const form = new FormData();
form.append('file', fs.createReadStream(filePath), encodeURI(fileName));

However, I don’t know where to place these codes. Does anyone know?

  • Selected Answer
    discord user avatar
    JessChowdhury
    last year

    To fix this issue, add the following property to the upload object in your payload.config:

    upload: {
        defParamCharset: 'utf-8',
    },

    Here is a little background as to why...

    Payload uses the express-fileupload package to manage uploads. By default, this package has defParamCharset set to latin1. However, we need a character set that supports Chinese i.e. utf-8.

    You have full control over the express-fileupload options with Payload, simply pass any valid properties to the upload object in your base payload.config.

    Note: here is the defParamCharset definition from express-fileupload:
    Screen Shot 2023-05-10 at 11 19 56 AM

    4 replies
  • default discord avatar
    clhomelast year

    Thank you very much, the problem is solved, this problem has been bothering me for a long time.

  • default discord avatar
    RiceeeChanglast year

    [10:29:56] INFO (payload): Starting Payload...
    [10:29:57] ERROR (payload): There were 1 errors validating your Payload config
    [10:29:57] ERROR (payload): 1: Collection "media" > "upload.defParamCharset" is not allowed

    Why apear these error messages, after I change the config?

  • discord user avatar
    JessChowdhury
    last year

    Hi @RiceeeChang - you don't need to add defParamCharset to your uploads collection config, instead it needs to be added to your payload.config.ts. If you remove it from your media collection, and add it into the payload.config, the error should go away.

  • default discord avatar
    RiceeeChanglast year

    thanks,

    The problem is solved, and the fileupload with chinese filename is working well.

  • discord user avatar
    JessChowdhury
    last year

    Hey @clhome, I'm looking into this now 🔎

  • discord user avatar
    JessChowdhury
    last year

    To fix this issue, add the following property to the upload object in your payload.config:

    upload: {
        defParamCharset: 'utf-8',
    },

    Here is a little background as to why...

    Payload uses the express-fileupload package to manage uploads. By default, this package has defParamCharset set to latin1. However, we need a character set that supports Chinese i.e. utf-8.

    You have full control over the express-fileupload options with Payload, simply pass any valid properties to the upload object in your base payload.config.

    Note: here is the defParamCharset definition from express-fileupload:
    Screen Shot 2023-05-10 at 11 19 56 AM

    4 replies
    default discord avatar
    clhomelast year

    Thank you very much, the problem is solved, this problem has been bothering me for a long time.

    default discord avatar
    RiceeeChanglast year

    [10:29:56] INFO (payload): Starting Payload...
    [10:29:57] ERROR (payload): There were 1 errors validating your Payload config
    [10:29:57] ERROR (payload): 1: Collection "media" > "upload.defParamCharset" is not allowed

    Why apear these error messages, after I change the config?

    discord user avatar
    JessChowdhury
    last year

    Hi @RiceeeChang - you don't need to add defParamCharset to your uploads collection config, instead it needs to be added to your payload.config.ts. If you remove it from your media collection, and add it into the payload.config, the error should go away.

    default discord avatar
    RiceeeChanglast year

    thanks,

    The problem is solved, and the fileupload with chinese filename is working well.

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.