strange filename callback after file selection finish

Question

I have this code which will display the file name after file has been selected:

<input id="file-input" type="file" />
<script>
  const fileInput = document.querySelector('#file-input');
  fileInput.onchange = function(){
    console.log('file name:', this.value)
  }
</script>

I prepared two windows shortcut file (produced by Desktop ---> right click ---> new ---> shortcut)

the first shortcut file

the target is https://www.baidu.com/ and the file name is www.baidu.com

after i select this file, the output is C:\fakepath\www.baidu.com.url in callback, which is working as expected

the second shortcut file

target is https://www.google.com/ and the file name is www.google.com

but after select this file, i expect it to output C:\fakepath\www.google.com.url in callback, but it outputs something like C:\fakepath\TQCJEVEM

Why is this happening?

vineetvdubey · Accepted Answer · 2021-06-22T05:22:24.673

Disclaimer: I'm still not sure about the why, but I can make a guess about what is happening.

When you create a windows shortcut (like you mentioned above) where the target is a Network Resource, it creates a URL file that has a .url extension.
NOTE: Microsoft Windows does not display the ".url" file extension even though it exists in the filename. Therefore, URL files saved using Windows web browsers will appear with only the filename prefix.

A URL file on windows looks something like this:

[{000214A0-0000-0000-C000-000000000046}]
Prop3=19,11
[InternetShortcut]
IDList=
URL=https://www.baidu.com/
HotKey=0

When you upload the baidu shortcut, windows simply uploads the file with above content.

HOWEVER
When you upload the google shortcut, windows actually downloads a copy of the www.google.com website landing page, stores it in the local cache somewhere in the ..\AppData\Local\Microsoft\Windows\INetCache\.. folder and then uploads that cache file which could have its filename as a randomly generated string. Every new attempt would generate a new string for filename.

Hope this points you in the right direction.

Edit: To verify the content of the uploaded file, slightly modify your code using sample code from this answer.

function init() {
  document.getElementById('fileInput').addEventListener('change', handleFileSelect, false);
}

function handleFileSelect(event) {
  const reader = new FileReader()
  reader.onload = handleFileLoad;
  reader.readAsText(event.target.files[0])
}

function handleFileLoad(event) {
  console.log(event);
  document.getElementById('fileContent').textContent = event.target.result;
}

<!DOCTYPE html>
<html>

<head>
  <script src="script.js"></script>
</head>

<body onload="init()">
  <input id="fileInput" type="file" name="file" />
  <pre id="fileContent"></pre>
</body>

</html>

thanks for your notice & reply；it seems your analysis is right, but i realy want to know the reason behind it; for what reason, it behavior so strangely; — Yao Tao, Jun 22 '21 at 11:48
I'm still not sure, if I do find something I'll edit the answer. Request you to add an answer too if you solve it. — vineetvdubey, Jun 22 '21 at 11:53

strange filename callback after file selection finish

1 Answers1