CODEWITHSUNDEEP
jquery
VPY
VPY

Reputation: 463

jQuery : Rename the file selected from file picker

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 ?

Upvotes: 0

Views: 340

Answers (1)

Saurabh Solanki
Saurabh Solanki

Reputation: 2204

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) {}
});

Upvotes: 2

Related Questions