jQuery : Rename the file selected from file picker

Question

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

I choose a file "Screenshot_1.png"

then it looks like

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 ?

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. — Guruprasad J Rao
– Guruprasad J Rao, Commented Feb 27, 2018 at 4:09

Saurabh Solanki · Accepted Answer · 2018-02-27 04:56:50Z

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

Collectives™ on Stack Overflow

jQuery : Rename the file selected from file picker

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related