TypeError occurred using a Japanese file name

[tominaga-h]

The following TypeError occurred When I uploaded a file with a Japanese file name. The upchunk.js didn't send a request when this error occurred. I tried to use a new File object with an encoded Japanese filename using encodeURIComponent, but it also failed with the same TypeError.

upchunk.cjs.js:3 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'statusCode')
    at upchunk.cjs.js:3:16848
    at ve.sendChunkWithRetries (upchunk.cjs.js:3:17664)
    at async upchunk.cjs.js:3:17295

My javascript source code is here:

const file = $("#form_file")[0].files[0];
const blob = file.slice(0, file.size, file.type);
const encoded_file = new File([blob], encodeURIComponent(file.name), {type: file.type});
const upload = UpChunk.createUpload({
    endpoint: url,
    file: encoded_file,
    chunkSize: 4096
});
upload.on("error", (err) => {
    console.error("[ChunkUpload] Error", err.detail);
});
upload.on("progress", ({ detail: progress }) => {
    console.log(`Progress: ${progress}%`);
});
upload.on("chunkSuccess", ({ detail }) => {
    const { response } = detail;
    const { result, order_asset_id } = JSON.parse(response.body);
    if (result === 201) {
        console.log("Chunk upload succeded!");
    } else {
        console.log(`Chunk upload failed. status: ${result}`);
    }
});
upload.on("success", () => {
    console.log("Upload succeded!");
});

I have attached the following jpg file I used. the file name is "日本語ファイル.jpg"

[cjpillsbury]

@tominaga-h thanks for surfacing and also having the foresight to give me the text for the name 😅. I was about to kick off a release but let me see if I can repro/fix quickly and smuggle this in if so. I'll keep you posted!

[cjpillsbury]

Hey @tominaga-h unfortunately I wasn't able to reproduce on a quick smoke test using our example.html application in our latest codebase and renaming a video file to "日本語ファイル.mp4". Given the error, are you sure this is related to the file name? Also, are you trying this using the latest version of upchunk and, if not, would you mind giving that a try?

[tominaga-h]

@cjpillsbury Thank you for your help. I used the 3.3.2 version, then I will try to update and use the 3.4.0 latest version. Please wait!

[cjpillsbury]

No need for waiting on our release side. If you are still encountering an issue and can get us a reproducible setup and it's a quick fix, we can always just push out another release.

[tominaga-h]

@cjpillsbury I tried to update to version 3.4.0 and upload the Japanese file name. But the same error occurred again.

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'statusCode')
    at upchunk.cjs.js:3:18444
    at ye.sendChunkWithRetries (upchunk.cjs.js:3:19315)
    at async upchunk.cjs.js:3:18891

In my program, when a user uploads a file with a Japanese filename, the program encodes the filename using encodeURIComponent. Then, it creates a new File object with this encoded filename and sets it as the file option in createUpload.

The following source code what I updated:

const file = $("#form_file")[0].files[0];
const blob = file.slice(0, file.size, file.type);
const encoded_file = new File([blob], encodeURIComponent(file.name), {type: file.type});
console.log(file);
await new Promise((resolve, reject) => {
    const upload = UpChunk.createUpload({
        endpoint: url,
        file: encoded_file,
        chunkSize: 4096,
    });
    upload.on("error", (err) => {
        console.error("[ChunkUpload] Error", err.detail);
    });
    upload.on("progress", ({ detail: progress }) => {
        console.log(`Progress: ${progress}%`);
    });
    upload.on("chunkSuccess", ({ detail }) => {
        const { response } = detail;
        const { result, order_asset_id } = JSON.parse(
            response.body
        );
        window.orderAssetId = order_asset_id;
        if (result === 201) {
            console.log("Chunk upload succeded!");
        } else {
            console.log(`Chunk upload failed. status: ${result}`);
            upload.abort();
            reject();
        }
    });
    upload.on("success", () => {
        console.log("[ChunkUpload] Success!");
    });
}).catch((error) => {
    console.log("エラー");
    console.error(error);
});

You can download the file from the following link: https://sendanywhe.re/NGALBMQ0

[tominaga-h]

@cjpillsbury Additional Information: I tried to upload a file with a Japanese name from the example page in this repository, but it also failed with the attempt log.

[mayur-padshala]

@tominaga-h You are trying to upload an image 日本語ファイル.jpg asset. @cjpillsbury Does UpChunk support uploading images?

[tominaga-h]

@mayur-padshala Thank you for your mention. I succeeded in uploading some image files with no Japanese filename on UpChunk.js whatever it doesn't support image file official.

[cjpillsbury]

@mayur-padshala since upchunk is just a chunked transfer file upload library, it should work with any binary files.

@tominaga-h as mentioned previously, since I was able to successfully upload a file with a japanese file name using upchunk with our example source/html, I don't know that I can promise any forward progress here unless you can provide me with a full working code example that reproduces the issue. This can be a codesandbox/stackblitz or the like, a github repo link with documentation for any steps to build/run where relevant, or the like. Happy to investigate further if you can get us this.