How to display file name for custom styled input file using jquery?

I have styled a file input using CSS:

.custom-file-upload {

  border: 1px solid #ccc;

  display: inline-block;

  padding: 6px 12px;

  cursor: pointer; 

}

<form>

  <label for="file-upload" class="custom-file-upload">

    <i class="fa fa-cloud-upload"></i> Upload Image

  </label>

  <input id="file-upload" name='upload_cont_img' type="file" style="display:none;">

</form>

Everything is working fine, but I’d like to display the selected file name. How is this possible using CSS or jQuery?

edited Jan 9 '17 at 8:05

Mohammad

15.7k123562

asked Jan 9 '17 at 7:18

Dbb

1591421

1

Possible duplicate of Styling an input type="file" button

– Advaith
Jan 9 '17 at 7:45

If you could put the name attribute in the label - then this could be done with just CSS with the attr() function (generated content can't be added to input elements ). codepen.io/danield770/pen/XpmNYZ?editors=1100#0

– Danield
Jan 9 '17 at 7:48

add a comment |

I have styled a file input using CSS:

.custom-file-upload {

  border: 1px solid #ccc;

  display: inline-block;

  padding: 6px 12px;

  cursor: pointer; 

}

<form>

  <label for="file-upload" class="custom-file-upload">

    <i class="fa fa-cloud-upload"></i> Upload Image

  </label>

  <input id="file-upload" name='upload_cont_img' type="file" style="display:none;">

</form>

Everything is working fine, but I’d like to display the selected file name. How is this possible using CSS or jQuery?

edited Jan 9 '17 at 8:05

Mohammad

15.7k123562

asked Jan 9 '17 at 7:18

Dbb

1591421

1

Possible duplicate of Styling an input type="file" button

– Advaith
Jan 9 '17 at 7:45

If you could put the name attribute in the label - then this could be done with just CSS with the attr() function (generated content can't be added to input elements ). codepen.io/danield770/pen/XpmNYZ?editors=1100#0

– Danield
Jan 9 '17 at 7:48

add a comment |

I have styled a file input using CSS:

.custom-file-upload {

  border: 1px solid #ccc;

  display: inline-block;

  padding: 6px 12px;

  cursor: pointer; 

}

<form>

  <label for="file-upload" class="custom-file-upload">

    <i class="fa fa-cloud-upload"></i> Upload Image

  </label>

  <input id="file-upload" name='upload_cont_img' type="file" style="display:none;">

</form>

Everything is working fine, but I’d like to display the selected file name. How is this possible using CSS or jQuery?

edited Jan 9 '17 at 8:05

Mohammad

15.7k123562

asked Jan 9 '17 at 7:18

Dbb

1591421

I have styled a file input using CSS:

.custom-file-upload {

  border: 1px solid #ccc;

  display: inline-block;

  padding: 6px 12px;

  cursor: pointer; 

}

<form>

  <label for="file-upload" class="custom-file-upload">

    <i class="fa fa-cloud-upload"></i> Upload Image

  </label>

  <input id="file-upload" name='upload_cont_img' type="file" style="display:none;">

</form>

Everything is working fine, but I’d like to display the selected file name. How is this possible using CSS or jQuery?

.custom-file-upload {

  border: 1px solid #ccc;

  display: inline-block;

  padding: 6px 12px;

  cursor: pointer; 

}

<form>

  <label for="file-upload" class="custom-file-upload">

    <i class="fa fa-cloud-upload"></i> Upload Image

  </label>

  <input id="file-upload" name='upload_cont_img' type="file" style="display:none;">

</form>

.custom-file-upload {

  border: 1px solid #ccc;

  display: inline-block;

  padding: 6px 12px;

  cursor: pointer; 

}

<form>

  <label for="file-upload" class="custom-file-upload">

    <i class="fa fa-cloud-upload"></i> Upload Image

  </label>

  <input id="file-upload" name='upload_cont_img' type="file" style="display:none;">

</form>

javascript jquery html css input-field

edited Jan 9 '17 at 8:05

Mohammad

15.7k123562

asked Jan 9 '17 at 7:18

Dbb

1591421

edited Jan 9 '17 at 8:05

Mohammad

15.7k123562

asked Jan 9 '17 at 7:18

Dbb

1591421

edited Jan 9 '17 at 8:05

Mohammad

15.7k123562

edited Jan 9 '17 at 8:05

Mohammad

15.7k123562

edited Jan 9 '17 at 8:05

Mohammad

15.7k123562

asked Jan 9 '17 at 7:18

Dbb

1591421

asked Jan 9 '17 at 7:18

Dbb

1591421

asked Jan 9 '17 at 7:18

Dbb

1591421

1

Possible duplicate of Styling an input type="file" button

– Advaith
Jan 9 '17 at 7:45

If you could put the name attribute in the label - then this could be done with just CSS with the attr() function (generated content can't be added to input elements ). codepen.io/danield770/pen/XpmNYZ?editors=1100#0

– Danield
Jan 9 '17 at 7:48

add a comment |

1

Possible duplicate of Styling an input type="file" button

– Advaith
Jan 9 '17 at 7:45

If you could put the name attribute in the label - then this could be done with just CSS with the attr() function (generated content can't be added to input elements ). codepen.io/danield770/pen/XpmNYZ?editors=1100#0

– Danield
Jan 9 '17 at 7:48

Possible duplicate of Styling an input type="file" button

– Advaith
Jan 9 '17 at 7:45

If you could put the name attribute in the label - then this could be done with just CSS with the attr() function (generated content can't be added to input elements ). codepen.io/danield770/pen/XpmNYZ?editors=1100#0

– Danield
Jan 9 '17 at 7:48

add a comment |

7 Answers
7

active

oldest

votes

You have to bind and trigger the change event on the [type=file] element and read the files name as:

$('#file-upload').change(function() {

  var i = $(this).prev('label').clone();

  var file = $('#file-upload')[0].files[0].name;

  $(this).prev('label').text(file);

});

.custom-file-upload {

  border: 1px solid #ccc;

  display: inline-block;

  padding: 6px 12px;

  cursor: pointer;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>

  <label for="file-upload" class="custom-file-upload">

    <i class="fa fa-cloud-upload"></i> Upload Image

  </label>

  <input id="file-upload" name='upload_cont_img' type="file" style="display:none;">

</form>

answered Jan 9 '17 at 7:41

Jai

64.2k95581

@ Jai This is exactly what I wanted. Thanks a lot.

– Dbb
Jan 9 '17 at 10:16

@Deepak You are welcome. Glad we helped you here...

– Jai
Jan 9 '17 at 10:17

+1 however for me it didn't work with $('#file-upload')[0].files[0].name; but it worked fine with $('#file-upload').files[0].name;

– IamCavic
Feb 23 '18 at 19:20

add a comment |

You need to get name of file when input change and insert it into html. In the code this.files[0].name get name of selected file.

$("#file-upload").change(function(){

  $("#file-name").text(this.files[0].name);

});

$("#file-upload").change(function(){

  $("#file-name").text(this.files[0].name);

});

.custom-file-upload {

    border: 1px solid #ccc;

    display: inline-block;

    padding: 6px 12px;

    cursor: pointer; 

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>

    <label for="file-upload" class="custom-file-upload">

        <i class="fa fa-cloud-upload"></i> Upload Image

    </label>

    <input id="file-upload" name='upload_cont_img' type="file" style="display:none;">

    <label id="file-name"></label>

</form>

Also you can do this work using pure javascript

document.querySelector("#file-upload").onchange = function(){

  document.querySelector("#file-name").textContent = this.files[0].name;

}

document.querySelector("#file-upload").onchange = function(){

  document.querySelector("#file-name").textContent = this.files[0].name;

}

.custom-file-upload {

  border: 1px solid #ccc;

  display: inline-block;

  padding: 6px 12px;

  cursor: pointer; 

}

<form>

  <label for="file-upload" class="custom-file-upload">

    <i class="fa fa-cloud-upload"></i> Upload Image

  </label>

  <input id="file-upload" name='upload_cont_img' type="file" style="display:none;">

  <label id="file-name"></label>

</form>

edited Dec 24 '18 at 6:57

answered Jan 9 '17 at 7:49

Mohammad

15.7k123562

add a comment |

You can take the file name like this

$('#file-upload')[0].files[0].name

answered Jan 9 '17 at 7:27

Sharmila

543210

That is right buy isn't perfect. It only get file name and you should use it when input change and set getted name in htm.

– Mohammad
Jan 9 '17 at 7:56

add a comment |

You can use this for multiple file upload also

updateList = function() {

  var input = document.getElementById('file');

  var output = document.getElementById('fileList');



  output.innerHTML = '<ul>';

  for (var i = 0; i < input.files.length; ++i) {

    output.innerHTML += '<li>' + input.files.item(i).name + '</li>';

  }

  output.innerHTML += '</ul>';

}

<input type="file" name="file" id="file" multiple 

       onchange="javascript:updateList()" />

<br/>Selected files:

<div id="fileList"></div>

answered Jan 9 '17 at 7:35

Gokul P P

582318

add a comment |

Upload button Style

input[type="file"] {

    display: none;

}

.custom-file-upload {

    border: 1px solid #ccc;

    display: inline-block;

    padding: 6px 12px;

    cursor: pointer;

}

<label for="file-upload" class="custom-file-upload">

    <i class="fa fa-cloud-upload"></i> Custom Upload

</label>

<input id="file-upload" type="file"/>

answered Jan 9 '17 at 7:34

user25775

277

Excellent Solution!

– Samuel Ramzan
Aug 29 '18 at 5:47

add a comment |

I've had a long crack i hope it helps you may need to style it more to your liking

HTML

<form>

  <label for="file-upload" class="custom-file-upload">

    <i class="fa fa-cloud-upload"></i> Upload Image

  </label>

  <input id="file-upload" name='upload_cont_img' type="file"     style="display:none;">

  <input id="uploadFile" placeholder="No File" disabled="disabled" />

</form>

CSS

.custom-file-upload {

  border: 1px solid #ccc;

  display: inline-block;

  padding: 6px 12px;

  cursor: pointer;

}



#uploadFile {

  text-align: center;

  border: none;

  background-color: white;

  color: black;

}

JavaScript

document.getElementById("file-upload").onchange = function() {

  document.getElementById("uploadFile").value = this.value;

};

JSFiddle link:https://jsfiddle.net/kd1brhny/

answered Jan 9 '17 at 7:59

PloxPanda

268

add a comment |

For CSS Only Solution

.file_upload {

  position: relative;

  min-width: 90px;

  text-align: center;

  color: #ee3333;

  line-height: 25px;

  background: #fff;

  border: solid 2px #ee3333;

  font-weight: 600;

}



a.file_upload {

  display: inline-block;

}



.file_upload .btn_lbl {

  position: relative;

  z-index: 2;

  pointer-events: none;

}



.file_upload .btn_colorlayer {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: #fff;

  z-index: 1;

  pointer-events: none;

}



.file_upload input[type="file"] {

  position: absolute;

  top: 3px;

  left: -86px;

  font-weight: 600;

  margin-left: 100%;

  color: #ee3333;

  outline: none;

}

<button class="file_upload" type="button">

      <span class="btn_lbl">Browse</span>

      <span class="btn_colorlayer"></span>

      <input type="file" name="fileupload" id="file_upload" />

    </button>

edited Nov 27 '18 at 7:33

adiga

9,77662343

answered Nov 27 '18 at 7:24

Growyour GK

113

Hi, I have removed demo link to your site as it might be considered as spam. Your demo can become invalid if the linked page is deleted. So, I have created a working snippet.

– adiga
Nov 27 '18 at 7:34

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f41542845%2fhow-to-display-file-name-for-custom-styled-input-file-using-jquery%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

7 Answers
7

active

oldest

votes

7 Answers
7

active

oldest

votes

You have to bind and trigger the change event on the [type=file] element and read the files name as:

$('#file-upload').change(function() {

  var i = $(this).prev('label').clone();

  var file = $('#file-upload')[0].files[0].name;

  $(this).prev('label').text(file);

});

.custom-file-upload {

  border: 1px solid #ccc;

  display: inline-block;

  padding: 6px 12px;

  cursor: pointer;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>

  <label for="file-upload" class="custom-file-upload">

    <i class="fa fa-cloud-upload"></i> Upload Image

  </label>

  <input id="file-upload" name='upload_cont_img' type="file" style="display:none;">

</form>

answered Jan 9 '17 at 7:41

Jai

64.2k95581

@ Jai This is exactly what I wanted. Thanks a lot.

– Dbb
Jan 9 '17 at 10:16

@Deepak You are welcome. Glad we helped you here...

– Jai
Jan 9 '17 at 10:17

+1 however for me it didn't work with $('#file-upload')[0].files[0].name; but it worked fine with $('#file-upload').files[0].name;

– IamCavic
Feb 23 '18 at 19:20

add a comment |

You have to bind and trigger the change event on the [type=file] element and read the files name as:

$('#file-upload').change(function() {

  var i = $(this).prev('label').clone();

  var file = $('#file-upload')[0].files[0].name;

  $(this).prev('label').text(file);

});

.custom-file-upload {

  border: 1px solid #ccc;

  display: inline-block;

  padding: 6px 12px;

  cursor: pointer;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>

  <label for="file-upload" class="custom-file-upload">

    <i class="fa fa-cloud-upload"></i> Upload Image

  </label>

  <input id="file-upload" name='upload_cont_img' type="file" style="display:none;">

</form>

answered Jan 9 '17 at 7:41

Jai

64.2k95581

@ Jai This is exactly what I wanted. Thanks a lot.

– Dbb
Jan 9 '17 at 10:16

@Deepak You are welcome. Glad we helped you here...

– Jai
Jan 9 '17 at 10:17

+1 however for me it didn't work with $('#file-upload')[0].files[0].name; but it worked fine with $('#file-upload').files[0].name;

– IamCavic
Feb 23 '18 at 19:20

add a comment |

You have to bind and trigger the change event on the [type=file] element and read the files name as:

$('#file-upload').change(function() {

  var i = $(this).prev('label').clone();

  var file = $('#file-upload')[0].files[0].name;

  $(this).prev('label').text(file);

});

.custom-file-upload {

  border: 1px solid #ccc;

  display: inline-block;

  padding: 6px 12px;

  cursor: pointer;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>

  <label for="file-upload" class="custom-file-upload">

    <i class="fa fa-cloud-upload"></i> Upload Image

  </label>

  <input id="file-upload" name='upload_cont_img' type="file" style="display:none;">

</form>

answered Jan 9 '17 at 7:41

Jai

64.2k95581

You have to bind and trigger the change event on the [type=file] element and read the files name as:

$('#file-upload').change(function() {

  var i = $(this).prev('label').clone();

  var file = $('#file-upload')[0].files[0].name;

  $(this).prev('label').text(file);

});

.custom-file-upload {

  border: 1px solid #ccc;

  display: inline-block;

  padding: 6px 12px;

  cursor: pointer;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>

  <label for="file-upload" class="custom-file-upload">

    <i class="fa fa-cloud-upload"></i> Upload Image

  </label>

  <input id="file-upload" name='upload_cont_img' type="file" style="display:none;">

</form>

$('#file-upload').change(function() {

  var i = $(this).prev('label').clone();

  var file = $('#file-upload')[0].files[0].name;

  $(this).prev('label').text(file);

});

.custom-file-upload {

  border: 1px solid #ccc;

  display: inline-block;

  padding: 6px 12px;

  cursor: pointer;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>

  <label for="file-upload" class="custom-file-upload">

    <i class="fa fa-cloud-upload"></i> Upload Image

  </label>

  <input id="file-upload" name='upload_cont_img' type="file" style="display:none;">

</form>

$('#file-upload').change(function() {

  var i = $(this).prev('label').clone();

  var file = $('#file-upload')[0].files[0].name;

  $(this).prev('label').text(file);

});

.custom-file-upload {

  border: 1px solid #ccc;

  display: inline-block;

  padding: 6px 12px;

  cursor: pointer;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>

  <label for="file-upload" class="custom-file-upload">

    <i class="fa fa-cloud-upload"></i> Upload Image

  </label>

  <input id="file-upload" name='upload_cont_img' type="file" style="display:none;">

</form>

answered Jan 9 '17 at 7:41

Jai

64.2k95581

answered Jan 9 '17 at 7:41

Jai

64.2k95581

answered Jan 9 '17 at 7:41

Jai

64.2k95581

answered Jan 9 '17 at 7:41

Jai

64.2k95581

@ Jai This is exactly what I wanted. Thanks a lot.

– Dbb
Jan 9 '17 at 10:16

@Deepak You are welcome. Glad we helped you here...

– Jai
Jan 9 '17 at 10:17

+1 however for me it didn't work with $('#file-upload')[0].files[0].name; but it worked fine with $('#file-upload').files[0].name;

– IamCavic
Feb 23 '18 at 19:20

add a comment |

@ Jai This is exactly what I wanted. Thanks a lot.

– Dbb
Jan 9 '17 at 10:16

@Deepak You are welcome. Glad we helped you here...

– Jai
Jan 9 '17 at 10:17

+1 however for me it didn't work with $('#file-upload')[0].files[0].name; but it worked fine with $('#file-upload').files[0].name;

– IamCavic
Feb 23 '18 at 19:20

@ Jai This is exactly what I wanted. Thanks a lot.

– Dbb
Jan 9 '17 at 10:16

@Deepak You are welcome. Glad we helped you here...

– Jai
Jan 9 '17 at 10:17

+1 however for me it didn't work with $('#file-upload')[0].files[0].name; but it worked fine with $('#file-upload').files[0].name;

– IamCavic
Feb 23 '18 at 19:20

add a comment |

You need to get name of file when input change and insert it into html. In the code this.files[0].name get name of selected file.

$("#file-upload").change(function(){

  $("#file-name").text(this.files[0].name);

});

$("#file-upload").change(function(){

  $("#file-name").text(this.files[0].name);

});

.custom-file-upload {

    border: 1px solid #ccc;

    display: inline-block;

    padding: 6px 12px;

    cursor: pointer; 

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>

    <label for="file-upload" class="custom-file-upload">

        <i class="fa fa-cloud-upload"></i> Upload Image

    </label>

    <input id="file-upload" name='upload_cont_img' type="file" style="display:none;">

    <label id="file-name"></label>

</form>

Also you can do this work using pure javascript

document.querySelector("#file-upload").onchange = function(){

  document.querySelector("#file-name").textContent = this.files[0].name;

}

document.querySelector("#file-upload").onchange = function(){

  document.querySelector("#file-name").textContent = this.files[0].name;

}

.custom-file-upload {

  border: 1px solid #ccc;

  display: inline-block;

  padding: 6px 12px;

  cursor: pointer; 

}

<form>

  <label for="file-upload" class="custom-file-upload">

    <i class="fa fa-cloud-upload"></i> Upload Image

  </label>

  <input id="file-upload" name='upload_cont_img' type="file" style="display:none;">

  <label id="file-name"></label>

</form>

edited Dec 24 '18 at 6:57

answered Jan 9 '17 at 7:49

Mohammad

15.7k123562

add a comment |

You need to get name of file when input change and insert it into html. In the code this.files[0].name get name of selected file.

$("#file-upload").change(function(){

  $("#file-name").text(this.files[0].name);

});

$("#file-upload").change(function(){

  $("#file-name").text(this.files[0].name);

});

.custom-file-upload {

    border: 1px solid #ccc;

    display: inline-block;

    padding: 6px 12px;

    cursor: pointer; 

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>

    <label for="file-upload" class="custom-file-upload">

        <i class="fa fa-cloud-upload"></i> Upload Image

    </label>

    <input id="file-upload" name='upload_cont_img' type="file" style="display:none;">

    <label id="file-name"></label>

</form>

Also you can do this work using pure javascript

document.querySelector("#file-upload").onchange = function(){

  document.querySelector("#file-name").textContent = this.files[0].name;

}

document.querySelector("#file-upload").onchange = function(){

  document.querySelector("#file-name").textContent = this.files[0].name;

}

.custom-file-upload {

  border: 1px solid #ccc;

  display: inline-block;

  padding: 6px 12px;

  cursor: pointer; 

}

<form>

  <label for="file-upload" class="custom-file-upload">

    <i class="fa fa-cloud-upload"></i> Upload Image

  </label>

  <input id="file-upload" name='upload_cont_img' type="file" style="display:none;">

  <label id="file-name"></label>

</form>

edited Dec 24 '18 at 6:57

answered Jan 9 '17 at 7:49

Mohammad

15.7k123562

add a comment |

You need to get name of file when input change and insert it into html. In the code this.files[0].name get name of selected file.

$("#file-upload").change(function(){

  $("#file-name").text(this.files[0].name);

});

$("#file-upload").change(function(){

  $("#file-name").text(this.files[0].name);

});

.custom-file-upload {

    border: 1px solid #ccc;

    display: inline-block;

    padding: 6px 12px;

    cursor: pointer; 

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>

    <label for="file-upload" class="custom-file-upload">

        <i class="fa fa-cloud-upload"></i> Upload Image

    </label>

    <input id="file-upload" name='upload_cont_img' type="file" style="display:none;">

    <label id="file-name"></label>

</form>

Also you can do this work using pure javascript

document.querySelector("#file-upload").onchange = function(){

  document.querySelector("#file-name").textContent = this.files[0].name;

}

document.querySelector("#file-upload").onchange = function(){

  document.querySelector("#file-name").textContent = this.files[0].name;

}

.custom-file-upload {

  border: 1px solid #ccc;

  display: inline-block;

  padding: 6px 12px;

  cursor: pointer; 

}

<form>

  <label for="file-upload" class="custom-file-upload">

    <i class="fa fa-cloud-upload"></i> Upload Image

  </label>

  <input id="file-upload" name='upload_cont_img' type="file" style="display:none;">

  <label id="file-name"></label>

</form>

edited Dec 24 '18 at 6:57

answered Jan 9 '17 at 7:49

Mohammad

15.7k123562

You need to get name of file when input change and insert it into html. In the code this.files[0].name get name of selected file.

$("#file-upload").change(function(){

  $("#file-name").text(this.files[0].name);

});

$("#file-upload").change(function(){

  $("#file-name").text(this.files[0].name);

});

.custom-file-upload {

    border: 1px solid #ccc;

    display: inline-block;

    padding: 6px 12px;

    cursor: pointer; 

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>

    <label for="file-upload" class="custom-file-upload">

        <i class="fa fa-cloud-upload"></i> Upload Image

    </label>

    <input id="file-upload" name='upload_cont_img' type="file" style="display:none;">

    <label id="file-name"></label>

</form>

Also you can do this work using pure javascript

document.querySelector("#file-upload").onchange = function(){

  document.querySelector("#file-name").textContent = this.files[0].name;

}

document.querySelector("#file-upload").onchange = function(){

  document.querySelector("#file-name").textContent = this.files[0].name;

}

.custom-file-upload {

  border: 1px solid #ccc;

  display: inline-block;

  padding: 6px 12px;

  cursor: pointer; 

}

<form>

  <label for="file-upload" class="custom-file-upload">

    <i class="fa fa-cloud-upload"></i> Upload Image

  </label>

  <input id="file-upload" name='upload_cont_img' type="file" style="display:none;">

  <label id="file-name"></label>

</form>

$("#file-upload").change(function(){

  $("#file-name").text(this.files[0].name);

});

.custom-file-upload {

    border: 1px solid #ccc;

    display: inline-block;

    padding: 6px 12px;

    cursor: pointer; 

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>

    <label for="file-upload" class="custom-file-upload">

        <i class="fa fa-cloud-upload"></i> Upload Image

    </label>

    <input id="file-upload" name='upload_cont_img' type="file" style="display:none;">

    <label id="file-name"></label>

</form>

$("#file-upload").change(function(){

  $("#file-name").text(this.files[0].name);

});

.custom-file-upload {

    border: 1px solid #ccc;

    display: inline-block;

    padding: 6px 12px;

    cursor: pointer; 

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>

    <label for="file-upload" class="custom-file-upload">

        <i class="fa fa-cloud-upload"></i> Upload Image

    </label>

    <input id="file-upload" name='upload_cont_img' type="file" style="display:none;">

    <label id="file-name"></label>

</form>

document.querySelector("#file-upload").onchange = function(){

  document.querySelector("#file-name").textContent = this.files[0].name;

}

.custom-file-upload {

  border: 1px solid #ccc;

  display: inline-block;

  padding: 6px 12px;

  cursor: pointer; 

}

<form>

  <label for="file-upload" class="custom-file-upload">

    <i class="fa fa-cloud-upload"></i> Upload Image

  </label>

  <input id="file-upload" name='upload_cont_img' type="file" style="display:none;">

  <label id="file-name"></label>

</form>

document.querySelector("#file-upload").onchange = function(){

  document.querySelector("#file-name").textContent = this.files[0].name;

}

.custom-file-upload {

  border: 1px solid #ccc;

  display: inline-block;

  padding: 6px 12px;

  cursor: pointer; 

}

<form>

  <label for="file-upload" class="custom-file-upload">

    <i class="fa fa-cloud-upload"></i> Upload Image

  </label>

  <input id="file-upload" name='upload_cont_img' type="file" style="display:none;">

  <label id="file-name"></label>

</form>

edited Dec 24 '18 at 6:57

answered Jan 9 '17 at 7:49

Mohammad

15.7k123562

edited Dec 24 '18 at 6:57

answered Jan 9 '17 at 7:49

Mohammad

15.7k123562

answered Jan 9 '17 at 7:49

Mohammad

15.7k123562

answered Jan 9 '17 at 7:49

Mohammad

15.7k123562

add a comment |

You can take the file name like this

$('#file-upload')[0].files[0].name

answered Jan 9 '17 at 7:27

Sharmila

543210

That is right buy isn't perfect. It only get file name and you should use it when input change and set getted name in htm.

– Mohammad
Jan 9 '17 at 7:56

add a comment |

You can take the file name like this

$('#file-upload')[0].files[0].name

answered Jan 9 '17 at 7:27

Sharmila

543210

That is right buy isn't perfect. It only get file name and you should use it when input change and set getted name in htm.

– Mohammad
Jan 9 '17 at 7:56

add a comment |

You can take the file name like this

$('#file-upload')[0].files[0].name

answered Jan 9 '17 at 7:27

Sharmila

543210

You can take the file name like this

$('#file-upload')[0].files[0].name

answered Jan 9 '17 at 7:27

Sharmila

543210

answered Jan 9 '17 at 7:27

Sharmila

543210

answered Jan 9 '17 at 7:27

Sharmila

543210

answered Jan 9 '17 at 7:27

Sharmila

543210

That is right buy isn't perfect. It only get file name and you should use it when input change and set getted name in htm.

– Mohammad
Jan 9 '17 at 7:56

add a comment |

That is right buy isn't perfect. It only get file name and you should use it when input change and set getted name in htm.

– Mohammad
Jan 9 '17 at 7:56

That is right buy isn't perfect. It only get file name and you should use it when input change and set getted name in htm.

– Mohammad
Jan 9 '17 at 7:56

add a comment |

You can use this for multiple file upload also

updateList = function() {

  var input = document.getElementById('file');

  var output = document.getElementById('fileList');



  output.innerHTML = '<ul>';

  for (var i = 0; i < input.files.length; ++i) {

    output.innerHTML += '<li>' + input.files.item(i).name + '</li>';

  }

  output.innerHTML += '</ul>';

}

<input type="file" name="file" id="file" multiple 

       onchange="javascript:updateList()" />

<br/>Selected files:

<div id="fileList"></div>

answered Jan 9 '17 at 7:35

Gokul P P

582318

add a comment |

You can use this for multiple file upload also

updateList = function() {

  var input = document.getElementById('file');

  var output = document.getElementById('fileList');



  output.innerHTML = '<ul>';

  for (var i = 0; i < input.files.length; ++i) {

    output.innerHTML += '<li>' + input.files.item(i).name + '</li>';

  }

  output.innerHTML += '</ul>';

}

<input type="file" name="file" id="file" multiple 

       onchange="javascript:updateList()" />

<br/>Selected files:

<div id="fileList"></div>

answered Jan 9 '17 at 7:35

Gokul P P

582318

add a comment |

You can use this for multiple file upload also

updateList = function() {

  var input = document.getElementById('file');

  var output = document.getElementById('fileList');



  output.innerHTML = '<ul>';

  for (var i = 0; i < input.files.length; ++i) {

    output.innerHTML += '<li>' + input.files.item(i).name + '</li>';

  }

  output.innerHTML += '</ul>';

}

<input type="file" name="file" id="file" multiple 

       onchange="javascript:updateList()" />

<br/>Selected files:

<div id="fileList"></div>

answered Jan 9 '17 at 7:35

Gokul P P

582318

You can use this for multiple file upload also

updateList = function() {

  var input = document.getElementById('file');

  var output = document.getElementById('fileList');



  output.innerHTML = '<ul>';

  for (var i = 0; i < input.files.length; ++i) {

    output.innerHTML += '<li>' + input.files.item(i).name + '</li>';

  }

  output.innerHTML += '</ul>';

}

<input type="file" name="file" id="file" multiple 

       onchange="javascript:updateList()" />

<br/>Selected files:

<div id="fileList"></div>

updateList = function() {

  var input = document.getElementById('file');

  var output = document.getElementById('fileList');



  output.innerHTML = '<ul>';

  for (var i = 0; i < input.files.length; ++i) {

    output.innerHTML += '<li>' + input.files.item(i).name + '</li>';

  }

  output.innerHTML += '</ul>';

}

<input type="file" name="file" id="file" multiple 

       onchange="javascript:updateList()" />

<br/>Selected files:

<div id="fileList"></div>

updateList = function() {

  var input = document.getElementById('file');

  var output = document.getElementById('fileList');



  output.innerHTML = '<ul>';

  for (var i = 0; i < input.files.length; ++i) {

    output.innerHTML += '<li>' + input.files.item(i).name + '</li>';

  }

  output.innerHTML += '</ul>';

}

<input type="file" name="file" id="file" multiple 

       onchange="javascript:updateList()" />

<br/>Selected files:

<div id="fileList"></div>

answered Jan 9 '17 at 7:35

Gokul P P

582318

answered Jan 9 '17 at 7:35

Gokul P P

582318

answered Jan 9 '17 at 7:35

Gokul P P

582318

answered Jan 9 '17 at 7:35

Gokul P P

582318

add a comment |

Upload button Style

input[type="file"] {

    display: none;

}

.custom-file-upload {

    border: 1px solid #ccc;

    display: inline-block;

    padding: 6px 12px;

    cursor: pointer;

}

<label for="file-upload" class="custom-file-upload">

    <i class="fa fa-cloud-upload"></i> Custom Upload

</label>

<input id="file-upload" type="file"/>

answered Jan 9 '17 at 7:34

user25775

277

Excellent Solution!

– Samuel Ramzan
Aug 29 '18 at 5:47

add a comment |

Upload button Style

input[type="file"] {

    display: none;

}

.custom-file-upload {

    border: 1px solid #ccc;

    display: inline-block;

    padding: 6px 12px;

    cursor: pointer;

}

<label for="file-upload" class="custom-file-upload">

    <i class="fa fa-cloud-upload"></i> Custom Upload

</label>

<input id="file-upload" type="file"/>

answered Jan 9 '17 at 7:34

user25775

277

Excellent Solution!

– Samuel Ramzan
Aug 29 '18 at 5:47

add a comment |

Upload button Style

input[type="file"] {

    display: none;

}

.custom-file-upload {

    border: 1px solid #ccc;

    display: inline-block;

    padding: 6px 12px;

    cursor: pointer;

}

<label for="file-upload" class="custom-file-upload">

    <i class="fa fa-cloud-upload"></i> Custom Upload

</label>

<input id="file-upload" type="file"/>

answered Jan 9 '17 at 7:34

user25775

277

Upload button Style

input[type="file"] {

    display: none;

}

.custom-file-upload {

    border: 1px solid #ccc;

    display: inline-block;

    padding: 6px 12px;

    cursor: pointer;

}

<label for="file-upload" class="custom-file-upload">

    <i class="fa fa-cloud-upload"></i> Custom Upload

</label>

<input id="file-upload" type="file"/>

input[type="file"] {

    display: none;

}

.custom-file-upload {

    border: 1px solid #ccc;

    display: inline-block;

    padding: 6px 12px;

    cursor: pointer;

}

<label for="file-upload" class="custom-file-upload">

    <i class="fa fa-cloud-upload"></i> Custom Upload

</label>

<input id="file-upload" type="file"/>

input[type="file"] {

    display: none;

}

.custom-file-upload {

    border: 1px solid #ccc;

    display: inline-block;

    padding: 6px 12px;

    cursor: pointer;

}

<label for="file-upload" class="custom-file-upload">

    <i class="fa fa-cloud-upload"></i> Custom Upload

</label>

<input id="file-upload" type="file"/>

answered Jan 9 '17 at 7:34

user25775

277

answered Jan 9 '17 at 7:34

user25775

277

answered Jan 9 '17 at 7:34

user25775

277

answered Jan 9 '17 at 7:34

user25775

277

Excellent Solution!

– Samuel Ramzan
Aug 29 '18 at 5:47

add a comment |

Excellent Solution!

– Samuel Ramzan
Aug 29 '18 at 5:47

Excellent Solution!

– Samuel Ramzan
Aug 29 '18 at 5:47

add a comment |

I've had a long crack i hope it helps you may need to style it more to your liking

HTML

<form>

  <label for="file-upload" class="custom-file-upload">

    <i class="fa fa-cloud-upload"></i> Upload Image

  </label>

  <input id="file-upload" name='upload_cont_img' type="file"     style="display:none;">

  <input id="uploadFile" placeholder="No File" disabled="disabled" />

</form>

CSS

.custom-file-upload {

  border: 1px solid #ccc;

  display: inline-block;

  padding: 6px 12px;

  cursor: pointer;

}



#uploadFile {

  text-align: center;

  border: none;

  background-color: white;

  color: black;

}

JavaScript

document.getElementById("file-upload").onchange = function() {

  document.getElementById("uploadFile").value = this.value;

};

JSFiddle link:https://jsfiddle.net/kd1brhny/

answered Jan 9 '17 at 7:59

PloxPanda

268

add a comment |

I've had a long crack i hope it helps you may need to style it more to your liking

HTML

<form>

  <label for="file-upload" class="custom-file-upload">

    <i class="fa fa-cloud-upload"></i> Upload Image

  </label>

  <input id="file-upload" name='upload_cont_img' type="file"     style="display:none;">

  <input id="uploadFile" placeholder="No File" disabled="disabled" />

</form>

CSS

.custom-file-upload {

  border: 1px solid #ccc;

  display: inline-block;

  padding: 6px 12px;

  cursor: pointer;

}



#uploadFile {

  text-align: center;

  border: none;

  background-color: white;

  color: black;

}

JavaScript

document.getElementById("file-upload").onchange = function() {

  document.getElementById("uploadFile").value = this.value;

};

JSFiddle link:https://jsfiddle.net/kd1brhny/

answered Jan 9 '17 at 7:59

PloxPanda

268

add a comment |

I've had a long crack i hope it helps you may need to style it more to your liking

HTML

<form>

  <label for="file-upload" class="custom-file-upload">

    <i class="fa fa-cloud-upload"></i> Upload Image

  </label>

  <input id="file-upload" name='upload_cont_img' type="file"     style="display:none;">

  <input id="uploadFile" placeholder="No File" disabled="disabled" />

</form>

CSS

.custom-file-upload {

  border: 1px solid #ccc;

  display: inline-block;

  padding: 6px 12px;

  cursor: pointer;

}



#uploadFile {

  text-align: center;

  border: none;

  background-color: white;

  color: black;

}

JavaScript

document.getElementById("file-upload").onchange = function() {

  document.getElementById("uploadFile").value = this.value;

};

JSFiddle link:https://jsfiddle.net/kd1brhny/

answered Jan 9 '17 at 7:59

PloxPanda

268

I've had a long crack i hope it helps you may need to style it more to your liking

HTML

<form>

  <label for="file-upload" class="custom-file-upload">

    <i class="fa fa-cloud-upload"></i> Upload Image

  </label>

  <input id="file-upload" name='upload_cont_img' type="file"     style="display:none;">

  <input id="uploadFile" placeholder="No File" disabled="disabled" />

</form>

CSS

.custom-file-upload {

  border: 1px solid #ccc;

  display: inline-block;

  padding: 6px 12px;

  cursor: pointer;

}



#uploadFile {

  text-align: center;

  border: none;

  background-color: white;

  color: black;

}

JavaScript

document.getElementById("file-upload").onchange = function() {

  document.getElementById("uploadFile").value = this.value;

};

JSFiddle link:https://jsfiddle.net/kd1brhny/

answered Jan 9 '17 at 7:59

PloxPanda

268

answered Jan 9 '17 at 7:59

PloxPanda

268

answered Jan 9 '17 at 7:59

PloxPanda

268

answered Jan 9 '17 at 7:59

PloxPanda

268

add a comment |

For CSS Only Solution

.file_upload {

  position: relative;

  min-width: 90px;

  text-align: center;

  color: #ee3333;

  line-height: 25px;

  background: #fff;

  border: solid 2px #ee3333;

  font-weight: 600;

}



a.file_upload {

  display: inline-block;

}



.file_upload .btn_lbl {

  position: relative;

  z-index: 2;

  pointer-events: none;

}



.file_upload .btn_colorlayer {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: #fff;

  z-index: 1;

  pointer-events: none;

}



.file_upload input[type="file"] {

  position: absolute;

  top: 3px;

  left: -86px;

  font-weight: 600;

  margin-left: 100%;

  color: #ee3333;

  outline: none;

}

<button class="file_upload" type="button">

      <span class="btn_lbl">Browse</span>

      <span class="btn_colorlayer"></span>

      <input type="file" name="fileupload" id="file_upload" />

    </button>

edited Nov 27 '18 at 7:33

adiga

9,77662343

answered Nov 27 '18 at 7:24

Growyour GK

113

Hi, I have removed demo link to your site as it might be considered as spam. Your demo can become invalid if the linked page is deleted. So, I have created a working snippet.

– adiga
Nov 27 '18 at 7:34

add a comment |

For CSS Only Solution

.file_upload {

  position: relative;

  min-width: 90px;

  text-align: center;

  color: #ee3333;

  line-height: 25px;

  background: #fff;

  border: solid 2px #ee3333;

  font-weight: 600;

}



a.file_upload {

  display: inline-block;

}



.file_upload .btn_lbl {

  position: relative;

  z-index: 2;

  pointer-events: none;

}



.file_upload .btn_colorlayer {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: #fff;

  z-index: 1;

  pointer-events: none;

}



.file_upload input[type="file"] {

  position: absolute;

  top: 3px;

  left: -86px;

  font-weight: 600;

  margin-left: 100%;

  color: #ee3333;

  outline: none;

}

<button class="file_upload" type="button">

      <span class="btn_lbl">Browse</span>

      <span class="btn_colorlayer"></span>

      <input type="file" name="fileupload" id="file_upload" />

    </button>

edited Nov 27 '18 at 7:33

adiga

9,77662343

answered Nov 27 '18 at 7:24

Growyour GK

113

Hi, I have removed demo link to your site as it might be considered as spam. Your demo can become invalid if the linked page is deleted. So, I have created a working snippet.

– adiga
Nov 27 '18 at 7:34

add a comment |

For CSS Only Solution

.file_upload {

  position: relative;

  min-width: 90px;

  text-align: center;

  color: #ee3333;

  line-height: 25px;

  background: #fff;

  border: solid 2px #ee3333;

  font-weight: 600;

}



a.file_upload {

  display: inline-block;

}



.file_upload .btn_lbl {

  position: relative;

  z-index: 2;

  pointer-events: none;

}



.file_upload .btn_colorlayer {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: #fff;

  z-index: 1;

  pointer-events: none;

}



.file_upload input[type="file"] {

  position: absolute;

  top: 3px;

  left: -86px;

  font-weight: 600;

  margin-left: 100%;

  color: #ee3333;

  outline: none;

}

<button class="file_upload" type="button">

      <span class="btn_lbl">Browse</span>

      <span class="btn_colorlayer"></span>

      <input type="file" name="fileupload" id="file_upload" />

    </button>

edited Nov 27 '18 at 7:33

adiga

9,77662343

answered Nov 27 '18 at 7:24

Growyour GK

113

For CSS Only Solution

.file_upload {

  position: relative;

  min-width: 90px;

  text-align: center;

  color: #ee3333;

  line-height: 25px;

  background: #fff;

  border: solid 2px #ee3333;

  font-weight: 600;

}



a.file_upload {

  display: inline-block;

}



.file_upload .btn_lbl {

  position: relative;

  z-index: 2;

  pointer-events: none;

}



.file_upload .btn_colorlayer {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: #fff;

  z-index: 1;

  pointer-events: none;

}



.file_upload input[type="file"] {

  position: absolute;

  top: 3px;

  left: -86px;

  font-weight: 600;

  margin-left: 100%;

  color: #ee3333;

  outline: none;

}

<button class="file_upload" type="button">

      <span class="btn_lbl">Browse</span>

      <span class="btn_colorlayer"></span>

      <input type="file" name="fileupload" id="file_upload" />

    </button>

.file_upload {

  position: relative;

  min-width: 90px;

  text-align: center;

  color: #ee3333;

  line-height: 25px;

  background: #fff;

  border: solid 2px #ee3333;

  font-weight: 600;

}



a.file_upload {

  display: inline-block;

}



.file_upload .btn_lbl {

  position: relative;

  z-index: 2;

  pointer-events: none;

}



.file_upload .btn_colorlayer {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: #fff;

  z-index: 1;

  pointer-events: none;

}



.file_upload input[type="file"] {

  position: absolute;

  top: 3px;

  left: -86px;

  font-weight: 600;

  margin-left: 100%;

  color: #ee3333;

  outline: none;

}

<button class="file_upload" type="button">

      <span class="btn_lbl">Browse</span>

      <span class="btn_colorlayer"></span>

      <input type="file" name="fileupload" id="file_upload" />

    </button>

.file_upload {

  position: relative;

  min-width: 90px;

  text-align: center;

  color: #ee3333;

  line-height: 25px;

  background: #fff;

  border: solid 2px #ee3333;

  font-weight: 600;

}



a.file_upload {

  display: inline-block;

}



.file_upload .btn_lbl {

  position: relative;

  z-index: 2;

  pointer-events: none;

}



.file_upload .btn_colorlayer {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: #fff;

  z-index: 1;

  pointer-events: none;

}



.file_upload input[type="file"] {

  position: absolute;

  top: 3px;

  left: -86px;

  font-weight: 600;

  margin-left: 100%;

  color: #ee3333;

  outline: none;

}

<button class="file_upload" type="button">

      <span class="btn_lbl">Browse</span>

      <span class="btn_colorlayer"></span>

      <input type="file" name="fileupload" id="file_upload" />

    </button>

edited Nov 27 '18 at 7:33

adiga

9,77662343

answered Nov 27 '18 at 7:24

Growyour GK

113

edited Nov 27 '18 at 7:33

adiga

9,77662343

edited Nov 27 '18 at 7:33

adiga

9,77662343

edited Nov 27 '18 at 7:33

adiga

9,77662343

answered Nov 27 '18 at 7:24

Growyour GK

113

answered Nov 27 '18 at 7:24

Growyour GK

113

answered Nov 27 '18 at 7:24

Growyour GK

113

Hi, I have removed demo link to your site as it might be considered as spam. Your demo can become invalid if the linked page is deleted. So, I have created a working snippet.

– adiga
Nov 27 '18 at 7:34

add a comment |

Hi, I have removed demo link to your site as it might be considered as spam. Your demo can become invalid if the linked page is deleted. So, I have created a working snippet.

– adiga
Nov 27 '18 at 7:34

Hi, I have removed demo link to your site as it might be considered as spam. Your demo can become invalid if the linked page is deleted. So, I have created a working snippet.

– adiga
Nov 27 '18 at 7:34

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Btukfyl