{"id":117,"date":"2011-08-15T21:34:16","date_gmt":"2011-08-15T13:34:16","guid":{"rendered":"https:\/\/www.techcoil.com\/blog\/?p=117"},"modified":"2018-09-02T22:52:00","modified_gmt":"2018-09-02T14:52:00","slug":"implement-a-file-chooser-in-windows-form","status":"publish","type":"post","link":"https:\/\/www.techcoil.com\/blog\/implement-a-file-chooser-in-windows-form\/","title":{"rendered":"Implement a file chooser in windows form"},"content":{"rendered":"<p>I wanted to create a form element that looks like this. <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.techcoil.com\/ph\/img\/blog\/posts\/file-chooser-demo-cs.gif\" alt=\"File Chooser Demo\"\/><\/p>\n<p>The solution was such that when users click  \"Browse\", a open file dialog will show up to allow them to choose a file for my program to process. In this post, I shall discuss how I had implemented this solution. <\/p>\n<h3>Elements on the windows form<\/h3>\n<p>The classes needed for this solution are as follows:<\/p>\n<ul>\n<li><a href=\"http:\/\/msdn.microsoft.com\/en-us\/library\/system.windows.forms.label.aspx\" target=\"_blank\" title=\"msdn reference for System.Windows.Forms.Label\">System.Windows.Forms.Label<\/a><\/li>\n<li><a href=\"http:\/\/msdn.microsoft.com\/en-us\/library\/system.windows.forms.textbox.aspx\" target=\"_blank\" title=\"msdn reference for System.Windows.Forms.TextBox\">System.Windows.Forms.TextBox<\/a><\/li>\n<li><a href=\"http:\/\/msdn.microsoft.com\/en-us\/library\/system.windows.forms.button.aspx\" target=\"_blank\" title=\"msdn reference for System.Windows.Forms.Button\">System.Windows.Forms.Button<\/a><\/li>\n<li><a href=\"http:\/\/msdn.microsoft.com\/en-us\/library\/system.windows.forms.openfiledialog.aspx\" target=\"_blank\" title=\"msdn reference for System.Windows.Forms.OpenFileDialog\">System.Windows.Forms.OpenFileDialog dialog<\/a><\/li>\n<\/ul>\n<p>Except for OpenFileDialog, all of the above components will have their visuals on the windows form:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.techcoil.com\/ph\/img\/blog\/posts\/file-chooser-demo-form-designer-view.jpg\" alt=\"File Chooser Demo Designer View\"\/><\/p>\n<h3>Implementing the logic to show the file dialog when users click \"Browse\"<\/h3>\n<p>Double-click on the \"Browse\" button in the Designer to generate a function and associate it with the Button.Click event. In the generated code, include the codes to show the OpenFileDialog:<\/p>\n<pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\r\n\/\/ Event handler for browseButton\r\nprivate void browseButton_Click(object sender, EventArgs e)\r\n{\r\n    \/\/ Show the dialog that allows user to select a file, the \r\n    \/\/ call will result a value from the DialogResult enum\r\n    \/\/ when the dialog is dismissed.\r\n    DialogResult result = this.openFileDialog.ShowDialog();\r\n    \/\/ if a file is selected\r\n    if (result == DialogResult.OK)\r\n    {\r\n        \/\/ Set the selected file URL to the textbox\r\n        this.fileURLTextBox.Text = this.openFileDialog.FileName;\r\n    }\r\n}\r\n<\/pre>\n<p>With that, we are able to get the file URL that users have selected from the text box. Alternatively, if we are just going to process a file, we could have just call our backend code from within the if statement. However, for my case, I will want to get more user input before I process the file, that was why I had set the file URL to the text box. This will allow my program to get the file URL of the selected file when users had submitted more input.<\/p>\n<h3>Other configurations<\/h3>\n<h4>Set the TextBox as readonly<\/h4>\n<p>Similar to a file upload html element, I will only allow my users to see which file that they have selected. By setting the <a href=\"http:\/\/msdn.microsoft.com\/en-us\/library\/system.windows.forms.textboxbase.readonly.aspx\" target=\"_blank\" title=\"msdn documentation of the ReadOnly property of the System.Windows.Forms.TextBox class\">ReadOnly<\/a> property of the TextBox instance to true, users can click on the file URL text to verify their selection but not able to change the contents with their keyboards. <\/p>\n<h4>Set the file filter for the OpenFileDialog<\/h4>\n<p>By default, the OpenFileDialog allows users to select any files that they want. However, in my application, I only want them to select .txt files. By setting the Filter property of the OpenFileDialog instance, I can configure the OpenFileDialog to only display the type of files I want my users to select. The easiest way is to do so in the designer: <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.techcoil.com\/ph\/img\/blog\/posts\/fcd-open-file-dialog-filter-example.jpg\" title=\"Setting the filter property for OpenFileDialog\" \/><\/p>\n\n      <ul id=\"social-sharing-buttons-list\">\n        <li class=\"facebook\">\n          <a href=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=https%3A%2F%2Fwp.me%2Fp245TQ-1T\" target=\"_blank\" role=\"button\" rel=\"nofollow\">\n            <img decoding=\"async\" src=\"\/ph\/img\/3rd-party\/social-icons\/Facebook.png\" alt=\"Facebook icon\"> Share\n          <\/a>\n        <\/li>\n        <li class=\"twitter\">\n          <a href=\"https:\/\/twitter.com\/intent\/tweet?text=&url=https%3A%2F%2Fwp.me%2Fp245TQ-1T&via=Techcoil_com\" target=\"_blank\" role=\"button\" rel=\"nofollow\">\n          <img decoding=\"async\" src=\"\/ph\/img\/3rd-party\/social-icons\/Twitter.png\" alt=\"Twitter icon\"> Tweet\n          <\/a>\n        <\/li>\n        <li class=\"linkedin\">\n          <a href=\"https:\/\/www.linkedin.com\/shareArticle?mini=1&title=&url=https%3A%2F%2Fwp.me%2Fp245TQ-1T&source=https:\/\/www.techcoil.com\" target=\"_blank\" role=\"button\" rel=\"nofollow\">\n          <img decoding=\"async\" src=\"\/ph\/img\/3rd-party\/social-icons\/linkedin.png\" alt=\"Linkedin icon\"> Share\n          <\/a>\n        <\/li>\n        <li class=\"pinterest\">\n          <a href=\"https:\/\/pinterest.com\/pin\/create\/button\/?url=https%3A%2F%2Fwww.techcoil.com%2Fblog%2Fwp-json%2Fwp%2Fv2%2Fposts%2F117&description=\" class=\"pin-it-button\" target=\"_blank\" role=\"button\" rel=\"nofollow\" count-layout=\"horizontal\">\n          <img decoding=\"async\" src=\"\/ph\/img\/3rd-party\/social-icons\/Pinterest.png\" alt=\"Pinterest icon\"> Save\n          <\/a>\n        <\/li>\n      <\/ul>\n    ","protected":false},"excerpt":{"rendered":"<p>I wanted to create a form element that looks like this. <\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.techcoil.com\/ph\/img\/blog\/posts\/file-chooser-demo-cs.gif\" alt=\"File Chooser Demo\"\/><\/p>\n<p>The solution was such that when users click  &#8220;Browse&#8221;, a open file dialog will show up to allow them to choose a file for my program to process. In this post, I shall discuss how I had implemented this solution. <\/p>\n","protected":false},"author":1,"featured_media":1189,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":true,"_jetpack_newsletter_tier_id":0,"footnotes":""},"categories":[375],"tags":[20,32,33,31],"jetpack_featured_media_url":"https:\/\/www.techcoil.com\/blog\/wp-content\/uploads\/C-Sharp-Logo.gif","jetpack_shortlink":"https:\/\/wp.me\/p245TQ-1T","jetpack-related-posts":[],"jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/posts\/117"}],"collection":[{"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/comments?post=117"}],"version-history":[{"count":0,"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/posts\/117\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/media\/1189"}],"wp:attachment":[{"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/media?parent=117"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/categories?post=117"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/tags?post=117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}