In Chrome and Firefox, the filename is displayed after setting a File input using JavaScript. However, Safari does not display the filename when the File input is set programmatically. It does display the filename when the file is selected manually.

Is there a way to make Safari show the filename after setting the File input using JavaScript?

Example:

const blob = new Blob(["Demo"], { type: "text/plain" });
const file = new File([blob], "demo.txt", {
  type: "text/plain",
});
const dataTransfer = new DataTransfer();

dataTransfer.items.add(file);
document.querySelector('#fileInput').files = dataTransfer.files;

<input id="fileInput" type="file" />