how to change an input type="file" name in JavaScript

Question

I am having an issue with changing a file name.

The main issue I am having is when the user takes a picture from an iPhone. iOS names all just captured photos image.jpg. I am trying to give the user a chance to change the file name or do something programmatically, like "image (1).jpg".

I am looking for some advice on renaming files in JS or some other idea on how to handle preventing users from uploading a file with the same name.

function processSelectedFiles(fileInput) {
  var files = fileInput.files;
  var div = document.getElementById("fileList");

  for (var i = 0; i < files.length; i++) {
    var newFileName = prompt("Filename " + files[i].name,files[i].name);
    
    if (newFileName!== null){
      files[i].name=newFileName;
    }
    
    div.innerText += files[i].name;
  }
}

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/File/name -->

<input type="file" multiple onchange="processSelectedFiles(this)">
</br>
File Name:
</br>
<div id="fileList"></div>

Why? Once it is uploaded to the server you can rename it anyways. — VDWWD, Mar 04 '19 at 14:01
I want to give the user a chance to rename the file or accept my name change — Ben-Coden, Mar 04 '19 at 15:29

score 2 · Accepted Answer · answered Mar 04 '19 at 14:17

For security reason javascript in browser doesn't have the access to the file system. So if you try to get the full path from front end it's not possible check here

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_fileupload_value

You can create an api and hook it in the front end for making any file name changing operations and etc.

There are some alternative approaches provided by Firefox(mozFullPath) but it's not widely accepted at this point.

how to change an input type="file" name in JavaScript

1 Answers1