Normalising the fileName in IE11 and creating of a new file in Javscript

Question

I'm trying to upload a file, but i want to normalize it's name fisrt, it works on other browsers, but in IE11, i searched and i found out that this method (normalize) is not supported, so i'm using polyfill unorm. so normalizing works fine now, but we can't change the fileName directly, we need to create a new file. But we can't use new File because it's not supported too. So I used new Blob, but the problem is that i don't get the filename on the server side, it's always blob.

The code for other browsers :

var fileName = file.name.normalize('NFD').replace(/[\u0300-\u036f]/g, "");
var newFile = new File([file], fileName, { type: file.type });
newFile.label = 'FICHIER';

The code for IE11

fileName = unorm.nfd(file.name);
newFile = new Blob([file], { type: file.type });
newFile.label = 'Fichier';
newFile.name= fileName;

To generate the request to the server, i use formdata :

fd = new FormData();
fd.append("id", param);
fd.append(file.label || "uploadedFile", file, file[paramName]);

Can you tell me what should i do to get the filename or if there is another way to do this.

You are missing an important part here: how do you generate the request to the server? Are you by any chance using a FormData? In that case, you just have to use the third parameter of `formData.append(field, blob, filename)`. — Kaiido, Mar 10 '20 at 06:02
yes, i'm using formdata, il already did that but it didin't work, the existing code is, i added your suggestion to this code but it didn't work. fd = new FormData(); fd.append("id", param); fd.append(file.label || "uploadedFile", file, file[paramName]); — Di_, Mar 10 '20 at 09:23
@Kaiido I replaced file[paramName] with file.name now, i get the filename but it's not normalized. Maybe unorm is not what i should use ? i have special french characters éà in my filename. — Di_, Mar 10 '20 at 09:47
That's what i get"aaacape�e�e�e�a�a�.PNG", I think i need something like replace used with normalize — Di_, Mar 10 '20 at 10:00
You forgot `.replace(/[\u0300-\u036f]/g, "")`: `fileName = unorm.nfd(file.name).replace(/[\u0300-\u036f]/g, "");` — Kaiido, Mar 10 '20 at 10:00
yes, another remark is we should convert with toString first to be able to use replace, 'unorm.nfd(file.name).toString().replace(/[\u0300-\u036f]/g, "")'. Thank you, it works now. — Di_, Mar 10 '20 at 10:18

score 0 · Answer 1 · answered Mar 10 '20 at 05:53

The Blob object doesn't contain the name property, so, we can't change name via the Blob object.

After getting the file data, I suggest you could append a new parameter to log the new file name, then, when submits the form or save the uploaded file, you could send the file data and the new file name to the server.

Besides, here is another thread about upload file using FormData, please refer to it:

Angular File Upload

File Upload using AngularJS

Normalising the fileName in IE11 and creating of a new file in Javscript

1 Answers1