Standardizing the file name in Internet Explorer 11 and generating a new file using JavaScript

While attempting to upload a file and normalize its name, I encountered an issue with IE11 not supporting the 'normalize' method. After some research, I discovered the 'unorm' polyfill which resolved the normalization problem. However, I faced another hurdle as IE11 does not support the 'File' constructor. As a workaround, I utilized 'Blob' instead, but encountered the issue of the filename showing as 'blob' on the server side.

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';

Code for IE11:

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

For sending the request to the server, I am using formdata:

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

If you have any suggestions on how to retrieve the filename or if there is an alternative approach to tackle this issue, please let me know.

Answer №1

The Blob object does not have the capability to change the file name directly.

One solution is to append a new parameter to the file data to track the new file name. When submitting the form or saving the uploaded file, both the file data and the new file name can be sent to the server.

For more information on uploading files using FormData, check out this thread:

Angular File Upload

File Upload using AngularJS

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide to Spidermonkey Bytecode Documentation

I've been searching for a comprehensive guide to spidermonkey's bytecodes for some time now, or at least something that gives me an overview of their purpose. Does anyone know of a good resource for this? Thank you! ...

What methods can I use to prevent an image from moving and trigger a specific action with the press of a key?

I'm currently teaching myself web programming and also working on improving my C++ skills. However, I am facing a challenge with Javascript. My main question is regarding how to create an "if statement" based on the location of an image. I am in the ...

Display HTML using JavaScript/jQuery

I am trying to figure out how to print a document by passing custom HTML code. Below is the code I have tried, but unfortunately it's not working: function Clickheretoprint() { var disp_setting="toolbar=yes,location=no,directories=yes,menubar=yes, ...

Sequelize makes it easy to input records into various tables simultaneously

Embarking on my first experience with Sequelize and MySQL, I am seeking guidance on inserting data into two tables with a foreign key relationship. Let's delve into the structure of the entities - bookingDescription and bookingSummary. //bookingSumma ...

The error message "Cannot access property 'findAll' of undefined in expressjs" is displayed

An issue has occurred with ExpressJS: TypeError - Cannot read property 'findAll' of undefined. It seems that all Sequelize functions are not working correctly. Numerous errors are popping up, such as "Cannot read property 'sequelize method& ...

Repairing my CSS with jQuery fullpage.js

My CSS on needs fixing. The word Obert is not aligning properly in the section. Interestingly, everything works fine without Javascript: I suspect the wrapper divs created by the plugin are causing the issue. Can someone lend a hand, please? ...

Encountering issues with rendering in React JS when utilizing state variables

I've been attempting to display content using the render method in React JS, but for some reason, the onClick code isn't executing. I'm currently enrolled in a course on Udemy that covers this topic. import React, { Component } from 'r ...

Issue with proper functioning of JQueryUI Datepicker directive arises when an element is deleted using Angular's List.Splice()

Encountering an issue with the JQueryUI Datepicker after removing an element using Angular's list.splice($index,1) within an ng-repeat statement. Upon removal (using the del($index) function below), the calendar starts selecting dates for the next in ...

The function FileSaver.js saves a file as Xlsx format

I have been using filesaver.js to successfully export my div (which contains multiple tables) to Excel as XLS with the following code snippet. var blob = new Blob([document.getElementById('exportable').innerHTML], { type: "application/vnd.op ...

Tips for including a Places Autocomplete box within an InfoWindow on Google Maps

I am currently working with the Google Maps Javascript API v3 and I am facing a challenge. I want to integrate a Places Autocomplete box inside an InfoWindow that pops up when a user clicks on a marker. I have successfully created an autocomplete object a ...

Issue: Configuration Error - CKEditor5 cannot be loaded for extension in Vuejs

Hey everyone, I'm currently facing an issue. I'm trying to customize a build and everything works fine in the cloned ckeditor along with the sample.html file. However, when attempting to implement the customized build in Vue 2, I encounter an err ...

Troubleshooting: Vue component does not refresh data when a function is

In my application, I have created two Vue components: Vue.component('event', { props:['event'], template: ` <span class="pointer" @click="showModal = true"> {{event.evname}} <modal @hide ...

Clicking React useState causes it to update before the intended click is registered

My goal is to create 50 buttons that, when clicked, will update the value of useState to the current button number (array index+1). However, I've encountered an issue where I have to click a button twice to get the correct value. The first click alway ...

The updating of Angular 2 CLI variables does not occur

As a complete newcomer to Angular 2, I recently attempted to start my first project using the Angular CLI. Unfortunately, I encountered some issues. It seems that the variables in my views are not updating as expected. I followed the typical steps: ng n ...

What is the best way to access and manipulate data stored in a Firestore map using React?

In my Firestore database, I have a field with map-like data: coordinates:{_01:"copper",_02:"gold",_03:"iron"} When viewing this database in the Firestore admin panel, it appears like this: pic However, when attempting to list items using the following c ...

Sequencing and fulfillment of promises in a job queue using Promise.race

Currently, I'm grappling with the concepts of job queue and promise resolution in Javascript. While going through Nicholas Zakas' book "Understanding ECMAScript 6", I came across a code snippet regarding Promise.race() that has left me puzzled: ...

Guide to showcasing associated information in HTML using Angular 7

I am a beginner with Angular 7 and I am attempting to showcase a product's color on the HTML side using Angular 7 but have not been successful. Below are my tables; Product Id Name Color Id Name ProductColorRelation Id ProductId ColorId In ...

Navigating through nested objects in JSON when working with D3: a guide

Currently, I am in the process of learning D3 using various tutorials. Here is the code snippet I have been working with: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title ...

Background image not displaying in new tab after Chrome extension installation

I have been developing a Chrome extension that alters the background image of a new tab. However, I have encountered an issue where the background image doesn't change the first time the extension is loaded. This problem has also occurred very occasi ...

Filter out unnecessary attributes while utilizing an anonymous type in ClearScript

In my development project, I am creating a .NET wrapper for the popular java-script library called Linkify.js, utilizing Microsoft's ClearScript. The challenge I am facing involves implementing the attributes property within the options object parame ...