---
title: "How to show name of a file before uploading it."  
description: "How to show name of a file before uploading it."  
author: "Anonymous User"  
published: 2013-03-11  
updated: 2013-03-11  
canonical: https://www.mindstick.com/forum/640/how-to-show-name-of-a-file-before-uploading-it  
category: "javascript"  
tags: ["javascript"]  
reading_time: 1 minute  

---

# How to show name of a file before uploading it.

Hi Everyone!

I want to show the name of a file using [JavaScript](https://www.mindstick.com/articles/874/how-to-create-watermark-text-for-textbox-by-using-javascript) or jQuery before it is uploaded by the server. I've researched about it and instead I learned how to [preview](https://www.mindstick.com/forum/429/i-want-to-get-full-path-of-lt-asp-fileupload-gt-and-then-client-can-click-the-preview-button-to-see-what-file-he-here-has-uploaded) an [image](https://www.mindstick.com/articles/23551/an-investigate-distinctive-seafood-restaurant-for-your-image-stamp-character) before it is uploaded. But the file I wish to [upload](https://www.mindstick.com/forum/12860/how-to-upload-file-asynchronously-using-generic-handler) may not be an image so I need to show the name.

Here is the code to show preview of an image, can it be modified to show the name instead?:

HTML:

<form [method](https://www.mindstick.com/forum/166/webservice-method)="post" name="form" enctype="multipart/form-[data](https://www.mindstick.com/articles/13050/salesforce-aiming-to-dominate-predictive-analytics-with-data-science)">\
<[input](https://www.mindstick.com/forum/159209/how-can-i-read-convert-an-input-stream-into-a-string-in-java) type="file" name="attachment" onchange="read_input(this);" />\
</form>\
Javascript + jQuery:

[function](https://www.mindstick.com/articles/13001/multi-statement-table-valued-user-defined-function-in-sql-server) read_input(input) {

if (input.files && input.files[0]) {

var reader = new FileReader();

reader.onload = function (e) {

[result](https://www.mindstick.com/blog/12011/advantages-of-getting-result-oriented-seo-from-an-agency) = e.target.result;

$(".attachment").html('<img src="'+result+'" alt="preview" />');

}

reader.readAsDataURL(input.files[0]);

}

}

Thanks in [advance](https://www.mindstick.com/blog/33258/jee-mains-and-jee-advance-exams)!

## Replies

### Reply by AVADHESH PATEL

Hi Jeet!\
You can try following line of code\
document.getElementById('upload').onchange = uploadOnChange;\
function uploadOnChange() { var filename = this.value; var lastIndex = filename.lastIndexOf("\\"); if (lastIndex >= 0) { filename = filename.substring(lastIndex + 1); } document.getElementById('filename').value = filename;}


---

Original Source: https://www.mindstick.com/forum/640/how-to-show-name-of-a-file-before-uploading-it

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.