{"id":8200,"date":"2023-06-27T11:40:28","date_gmt":"2023-06-27T11:40:28","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=8200"},"modified":"2024-06-27T10:27:54","modified_gmt":"2024-06-27T10:27:54","slug":"javascript-using-the-filereader-api","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/javascript\/javascript-using-the-filereader-api","title":{"rendered":"How to Get the Filename From the Javascript FileReader: A Complete Guide"},"content":{"rendered":"

An example on how you can get file name using FileReader constructor in Javascript:<\/p>\n

index.html<\/strong><\/p>\n

<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\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    <main>\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        <button onclick=\"uploadFile()\">Upload<\/button>\r\n    <\/main>\r\n<\/body>\r\n<\/html><\/pre>\n
script.js<\/b><\/p>\n
const uploadFile = () => {\r\n    const file = document.getElementById(\"file\").files[0];\r\n    const reader = new FileReader();\r\n    reader.onload = () => {\r\n        console.log(reader.fileName); \/\/ file name\r\n    };\r\n\r\n    \/\/ set file name for reader;\r\n    reader.fileName = file.name;\r\n    \r\n    \/\/ Read the file\r\n    reader.readAsDataURL(file);\r\n}<\/pre>\n
Explanation<\/b><\/p>\n
After selecting the file, when you click on the upload button, the uploadFile method will be executed.<\/p>\n
Inside the method, we are storing the selected file inside the file variable and we are providing the file variable to FileReader.<\/p>\n
And finally, inside the onload event handler of FileReader, We can get the name of the file.<\/p>\n
Example for Multi File Input<\/h3>\n
index.html<\/b><\/p>\n
<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\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    <main>\r\n        <div>\r\n            <label for=\"file\">Select file<\/label>\r\n            <input type=\"file\" name=\"file\" id=\"file\" multiple>\r\n        <\/div>\r\n        <button onclick=\"uploadFile()\">Upload<\/button>\r\n    <\/main>\r\n<\/body>\r\n<\/html><\/pre>\n
script.js<\/b><\/p>\n
const uploadFile = () => {\r\n    const files = document.getElementById(\"file\").files;\r\n    for(const file of files) {\r\n        const reader = new FileReader();\r\n        reader.onload = () => {\r\n            console.log(reader.fileName); \/\/ file name\r\n        };\r\n        \/\/ set file name for reader;\r\n        reader.fileName = file.name;\r\n        \r\n        \/\/ Read the file\r\n        reader.readAsDataURL(file);\r\n    }\r\n}<\/pre>\n
Compared to the previous example, for multi file input, we just have to iterate a list of files, and then we are providing individual file objects into FileReader.<\/p>\n","protected":false},"excerpt":{"rendered":"
An example on how you can get file name using FileReader constructor in Javascript: index.html <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Document<\/title> <script src=”.\/script.js”><\/script> <\/head> <body> <main> <div> <label for=”file”>Select file<\/label> <input type=”file” name=”file” id=”file”> <\/div> <button onclick=”uploadFile()”>Upload<\/button> <\/main> <\/body> <\/html> script.js const uploadFile = () => […]<\/p>\n","protected":false},"author":1,"featured_media":8438,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[22],"tags":[],"class_list":["post-8200","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\/8200"}],"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=8200"}],"version-history":[{"count":6,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/8200\/revisions"}],"predecessor-version":[{"id":10764,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/8200\/revisions\/10764"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/8438"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=8200"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=8200"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=8200"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}