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
– VDWWD, Commented Mar 4, 2019 at 14:01
I want to give the user a chance to rename the file or accept my name change — Ben-Coden
– Ben-Coden, Commented Mar 4, 2019 at 15:29

Tony Tom · Accepted Answer · 2019-03-04 14:17:02Z

2

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.

answered Mar 4, 2019 at 14:17

Tony Tom

1,5831 gold badge12 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related