{"id":8450,"date":"2023-08-01T07:09:24","date_gmt":"2023-08-01T07:09:24","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=8450"},"modified":"2023-08-01T07:09:24","modified_gmt":"2023-08-01T07:09:24","slug":"target-filename-javascript","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/javascript\/target-filename-javascript","title":{"rendered":"How to Get the fileName in JavaScript from Input File Tag in IE Browser"},"content":{"rendered":"

Here’s an example how you can get file-name from file input in Javascript:<\/p>\n

Code of index.html:<\/strong><\/p>\n

<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Document<\/title>\r\n    <script src=\".\/script.js\"><\/script>\r\n<\/head>\r\n<body>\r\n    <div>\r\n        <label for=\"file\">Select file<\/label>\r\n        <input type=\"file\" name=\"file\" id=\"file\">\r\n    <\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Code of script.js:<\/strong><\/p>\n
window.onload = function() {\r\n    document.getElementById('file').addEventListener('change', getFileName);\r\n}\r\n\r\nconst getFileName = (event) => {\r\n    const files = event.target.files;\r\n    const fileName = files[0].name;\r\n    console.log(\"file name: \", fileName);\r\n}\r\n<\/pre>\n
Explanation:<\/strong><\/p>\n
In the above code, We are adding an event listener to the input element which detects the changes and executes the getFileName method.
\nIn the getFileName method, using the event object of javascript, we can get selected file objects. If we want to get file-name then we can use the name property of the selected file object.<\/p>\n
Here\u2019s an example for multiple file inputs in single html file,<\/p>\n
Code of index.html:<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Document<\/title>\r\n    <script src=\".\/script.js\"><\/script>\r\n<\/head>\r\n<body>\r\n    <div>\r\n        <label for=\"file\">Select file 1:<\/label>\r\n        <input type=\"file\" name=\"file\" class=\"file\">\r\n    <\/div>\r\n    <div>\r\n        <label for=\"file\">Select file 2:<\/label>\r\n        <input type=\"file\" name=\"file\" class=\"file\">\r\n    <\/div>\r\n    <div>\r\n        <label for=\"file\">Select file 3:<\/label>\r\n        <input type=\"file\" name=\"file\" class=\"file\">\r\n    <\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
Code of script.js:<\/strong><\/p>\n
window.onload = function() {\r\n    const fileCollection = document.getElementsByClassName('file');\r\n    for(let fileInput of fileCollection) {\r\n        fileInput.addEventListener('change', getFileName);\r\n    }\r\n}\r\n\r\nconst getFileName = (event) => {\r\n    const files = event.target.files;\r\n    const fileName = files[0].name;\r\n    console.log(\"file name: \", fileName);\r\n}\r\n<\/pre>\n
Now for multiple file inputs, We just have to use class selector instead of id selector and iterate the collection returned by the getElementsByClassName() method.
\nSimilar to a single file logic, for each input element, add the event listener which detects the changes and we will get file name in the getFileName method.<\/p>\n","protected":false},"excerpt":{"rendered":"
Here’s an example how you can get file-name from file input in Javascript: Code of index.html: <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Document<\/title> <script src=”.\/script.js”><\/script> <\/head> <body> <div> <label for=”file”>Select file<\/label> <input type=”file” name=”file” id=”file”> <\/div> <\/body> <\/html> Code of script.js: window.onload = function() { document.getElementById(‘file’).addEventListener(‘change’, getFileName); } const getFileName […]<\/p>\n","protected":false},"author":1,"featured_media":8451,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[22],"tags":[],"class_list":["post-8450","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/8450"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=8450"}],"version-history":[{"count":2,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/8450\/revisions"}],"predecessor-version":[{"id":8453,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/8450\/revisions\/8453"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/8451"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=8450"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=8450"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=8450"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}