0

This is my HTML form

<!DOCTYPE html>
<html>
<body>

<form>
  <input type="file" name="pic">
  <input type="submit">
</form>


</body>
</html>

It displays a simple file picker.

As soon as the "choosing the file" is completed I would like to rename the name of the file selected.

Is it possible to do this in jQuery ?

For example, this is my UI initially

enter image description here

I choose a file "Screenshot_1.png"

then it looks like

enter image description here

As soon as this action is done I want the file name to be renamed as "XYZ_Screenshot_1.png"

Is it possible to do this in jQuery ?

VPY
  • 463
  • 8
  • 21
  • 1
    I doubt you can do it with default html file upload element. **[You can, however, have your custom file upload written and update the name accordingly.](https://stackoverflow.com/questions/41542845/how-to-display-file-name-for-custom-styled-input-file-using-jquery)** – Guruprasad J Rao Feb 27 '18 at 04:09

1 Answers1

2

give id or class to your file select control

<input type="file" class="filepath" id="filepath" />

then call the function on click of submit button in javascript

function submitclick(){
 var fileUpload = $(".filepath").get(0);
            var files = fileUpload.files;
            var test = new FormData();
            for (var i = 0; i < files.length; i++) {
                var currentdate = new Date();
                var d = currentdate.getDate();
                var m = currentdate.getMonth() + 1; // JavaScript months are 0-11
                var y = currentdate.getFullYear();
                var h = currentdate.getHours();
                var mn = currentdate.getMinutes();
                var sc = currentdate.getSeconds();
                var fname = "filename" + "_" + d + "_" + m + "_" + y + "_" + h + "_" + mn + "_" + sc;
                var parts = files[i].name.split('.');

                test.append(fname + "." + parts[parts.length - 1], files[i]);
                FileUploaded = fname + "." + parts[parts.length - 1];
}

then you can pass this file to upload method 

  $.ajax({
                url: "uploadurl",
                type: "POST",
                contentType: false,
                processData: false,
                data: test,
                // dataType: "json",
                success: function (result) {}
});
Saurabh Solanki
  • 2,146
  • 18
  • 31