How to get base64 image files with filename length over 100 characters using javascript, ReactJS

Question

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