{"id":2390,"date":"2018-09-24T19:51:51","date_gmt":"2018-09-25T00:51:51","guid":{"rendered":"http:\/\/bluegalaxy.info\/codewalk\/?p=2390"},"modified":"2018-09-24T19:51:51","modified_gmt":"2018-09-25T00:51:51","slug":"jquery-how-to-launch-a-file-upload-dialog-from-a-text-field","status":"publish","type":"post","link":"https:\/\/bluegalaxy.info\/codewalk\/2018\/09\/24\/jquery-how-to-launch-a-file-upload-dialog-from-a-text-field\/","title":{"rendered":"jQuery: How to launch a file upload dialog from a text field"},"content":{"rendered":"

I have a text field with placeholder text that says “No file chosen”. I wanted to add functionality to this so that if the text field is clicked it launches a file upload dialog. Then when a file is chosen, I want the name of the chosen file to appear in the text field.<\/p>\n

This functionality can be described in several steps.<\/p>\n

 <\/p>\n

Step 1: Add a click event to the text field and have it open a file upload dialog<\/strong><\/h4>\n

Set up a CDN for jQuery 3.3.<\/p>\n

Set up the HTML with two input tags. The first one is the text field with placeholder text (input type=text). The second input is of (input type=file) and is styled to be invisible.<\/p>\n

<script src=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.3.1\/jquery.min.js\"><\/script>\r\n\r\n<input type=\"text\" id=\"import-file-text-field\" placeholder=\"No file chosen\">\r\n<input id=\"import-file-text-field-hidden\" type=\"file\" style=\"visibility: hidden;\"\/><\/pre>\n
Next I set up a click even on the text field using jQuery:<\/p>\n
$(\"#import-file-text-field\").on(\"click\", function(){\r\n  $(\"#import-file-text-field-hidden\").trigger(\"click\");\r\n});<\/pre>\n
The action in this click event is a click trigger of the hidden input that is of type=file. This click action is what launches the file selection dialog.<\/p>\n
 <\/p>\n
Step 2: Add a jQuery onChange function to collect the selected file name
\n<\/strong><\/h4>\n
First we need to set up an onChange event function set to the hidden type=file input:<\/p>\n
$(\"#import-file-text-field-hidden\").on(\"change\", function(e) {<\/pre>\n
Next set up a data variable to collect the name of the selected file:<\/p>\n
let data = $(\"#import-file-text-field-hidden\").prop('files')[0];<\/pre>\n
Here is a codepen that demonstrates this in action:<\/p>\n
\nSee the Pen click text field to launch file dialog \u2013 jQuery (simple) by Chris Nielsen (@Chris_Nielsen) on CodePen.<\/p>\n\n
 <\/p>\n
Here is the complete jQuery, with comments:<\/p>\n
\/\/ Click event set to detect click of the text field\r\n$(\"#import-file-text-field\").on(\"click\", function(){\r\n  \/\/ When a click occurs on the text field, launch the file selection dialog\r\n  \/\/ input[type=file]\r\n  $(\"#import-file-text-field-hidden\").trigger(\"click\");\r\n});\r\n\r\n\/\/ Change event set on the hidden input[type=file] input\r\n$(\"#import-file-text-field-hidden\").on(\"change\", function(e) {\r\n  \r\n   \/\/ get the first element of .prop('files') and place it in data\r\n   let data = $(\"#import-file-text-field-hidden\").prop('files')[0];\r\n  \r\n   \/\/ Handle the case of no data\r\n   if(!data) return;\r\n  \r\n   \/\/ Get some values related to the selected file\r\n   \/\/ data.name is the name of the selected file\r\n   data.fakepath = $(\"#import-file-text-field-hidden\").val();\r\n  \r\n   \/\/ put the name of the selected file into the text field\r\n   $(\"#import-file-text-field\").val( data.name );\r\n   \r\n   \/\/ Show the full data related to the chosen file in the console\r\n   console.log( data );\r\n   \r\n});<\/pre>\n
 <\/p>\n
Here is a styled example on codepen:<\/p>\n
\nSee the Pen click text field to launch file dialog \u2013 jQuery by Chris Nielsen (@Chris_Nielsen) on CodePen.<\/p>\n\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
I have a text field with placeholder text that says “No file chosen”. I wanted to add functionality to this so that if the text field is clicked it launches a file upload dialog. Then when a file is chosen, I want the name of the chosen file to appear in the text field. This … Continue reading jQuery: How to launch a file upload dialog from a text field<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44,128],"tags":[105,45,123],"class_list":["post-2390","post","type-post","status-publish","format-standard","hentry","category-javascript-language","category-jquery","tag-html","tag-javascript","tag-jquery"],"_links":{"self":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/2390","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/comments?post=2390"}],"version-history":[{"count":10,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/2390\/revisions"}],"predecessor-version":[{"id":2400,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/2390\/revisions\/2400"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=2390"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=2390"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=2390"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}