I'm trying to get the base64 (FileReader) image data after the file list is uploaded But files whose names are longer than 100 characters cannot be retrieved. Is there a way for me to solve this problem, I don't want to change the filename because the number of it is too much. You can see the attached photo.

File name:

1. Kyle Larson 77 Nascar Racing Sports Classic Tee, Men's T-Shirt, Hoodie - Katycollection 1.jpg => work
2. Kyle Larson Drilling for Oil Nascar Racing Sports Classic Tee, Men's T-Shirt, Hoodie - Katycollection 1.jpg => Not working

Here is my code

function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
 });
}
async onBeforeUpload(file) {
    this.setState({ loadingUpload: true })
    var path = file.webkitRelativePath;
    let pathArray = path.split('/');
    let fName;
    if (pathArray.length == 2) {
        fName = file.name.replace(/\.[^/.]+$/, "");
    } else {
        fName = pathArray.slice(-2)[0];
    }
    //console.log(file.name.length,": ", file.name)
    let data = await getBase64(file);
    const objectImg = {
        folderName: fName,
        description: "<p>" + fName + "</p>\n",
        images: {
            data: data,
        }
     }
     this.setState({ imageList: [...this.state.imageList, objectImg] })
  }

Update:

I use ant design's Upload component and upload directory

<Upload
    beforeUpload={(file) => this.onBeforeUpload(file)}
    directory
    showUploadList={false}
    accept="image/*"
    customRequest={() => {
        return false;
    }}
>
    <Button className="table-button" type="primary">Upload</Button>
</Upload>

Thanks in advance