Question

I am attempting to provide a web-based solution for users to select a file on shared drives.
I want to use the typical file selector that is provided by windows when you go to browse for a file. The only info I need from this is the full filename + path. Now an obvious solution would be to just have a free-text textbox where users type in their filename, but I am required to use the file selector. (image below)

As a side note I am using the Telerik controls and this download functionality is in a user control that is inside an ajaxified panel in the parent page.

Currently I have this markup:

Add a Link to a Document: <input type="file" id="upLink" runat="server" onchange="LinkSelected(this);" />
<asp:HiddenField ID="hdnLinkFile" runat="server" />
<asp:Button ID="btnLink" runat="server" CssClass="invisiblebutton" OnClick="LinkFile" />

<script>
    function LinkSelected(sender) {
        if (sender && sender.value.length > 0) {
            //save filename to hidden value as it will not otherwise be usable on the server without a postback
            $("#<%= hdnLinkFile.ClientID %>").val(sender.value);
            //clear 
            sender.value = null;
            //fire server request on this user control
            $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>").ajaxRequestWithTarget("<%= btnLink.UniqueID %>", "");
        }
    }
</script>

code behind:

protected void LinkFile(object sender, EventArgs e)
{
     if (hdnLinkFile.Value.Length > 2 && hdnLinkFile.Value.Substring(0, 2) != @"\\")
     {
         Code.Common.DisplayMessage("File must be in a shared location!", Page);
     }
     else
     {
         //save link string to database
     }
}

The purpose of this code is to prevent a full postback. A full postback will cause the file input (upLink) to upload the selected file to the web server. As we are allowing large files (over 100MB) to be linked to, and all I want is the filepath, (and the internet for some of the clients is very slow) there is no need for the upload.

this code works great in IE – unfortunately for inputs with type=file Firefox returns only the filename – not the full path + name . Being that the reason Firefox doesn’t provide this data as it is considered a security risk, and also that the client uses firefox by default, I need to find another way. All I want is the full filename + path, without actually uploading the file – how hard can it be???

Answer 1

Well unfortunately the only way I found how to do it was to build my own file selector dialog. Seeing as I am already using the Telerik controls, I used the RadTreeView and RadWindow as below. I’ve pulled out all the validation to make it simpler. Its based on the Telerik demo here

Explorer.aspx (the popup window)

<script type="text/javascript">
   function onNodeClicking(sender, args) {
      //fill path textbox
      var textbox = document.getElementById('inpPath');
      if (args.get_node()._parent._uniqueId == "RadTreeView1")
         textbox.value = args.get_node()._properties._data.value; //root node
      else
         textbox.value = args.get_node()._parent._properties._data.value + "\\" + args.get_node()._getData().text;
   }

   function onCancel() {
      var wnd = getRadWindow();
      var openerPage = wnd.BrowserWindow;
      openerPage.OnFileSelected('');
      wnd.close();
   }

   function onOK() {
      var wnd = getRadWindow();
      var openerPage = wnd.BrowserWindow;
      openerPage.OnFileSelected(document.getElementById('inpPath').value);
      wnd.close();
   }

   function getRadWindow() {
        var oWindow = null;
        if (window.radWindow) oWindow = window.radWindow;
        else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;
        return oWindow;
   }
</script>

<div id="divFolderPath" style="padding: 0px 0px 10px 10px;">
   <input id="inpPath" runat="server" type="text" style="width:80%;" />&nbsp;&nbsp;
   <asp:Button ID="btnGo" runat="server" Text="Go" onclick="btnGo_Click" />
</div>

<div id="divButtons" style="padding: 0px 0px 15px 10px; text-align:center;">
   <input id="btnOk" type="button" value="OK" onclick="onOK()" style="padding-right:5px;" disabled="disabled" />
   <input id="btnCancel" type="button" value="Cancel" onclick="onCancel()" />
</div>

<telerik:RadTreeView ID="RadTreeView1" runat="server"
   OnNodeExpand="RadTreeView1_NodeExpand"
   OnClientNodeClicking="onNodeClicking">
</telerik:RadTreeView>

Code behind:

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Linq;
using System.Web.UI;
using System.IO;
using Telerik.Web.UI;

//extensions we have pics for
private readonly string[] _knownExtensions = new[] { "csv", "doc", "docx", "gif", "html", "jpg", "pdf", "png", "txt", "xls", "xlsx", "xml" }; 

protected void Page_Load(object sender, EventArgs e)
{
   if (!Page.IsPostBack)
   {
      if (Session["nodes"] != null && ((List<string>)Session["nodes"]).Count > 0)
      {
         foreach (string nod in (List<string>)Session["nodes"])
         {
            AddNode(nod);
         }
      }
      else
      {
         AddNode(ConfigurationManager.AppSettings["LinkDocumentStartPath"]);
      }
   }
}

private void AddNode(string rootpath)
{
   Directory.GetDirectories(rootpath);
   inpPath.Value = rootpath;
   //won't get this far if it fails the first check
   var dirNode = new RadTreeNode(rootpath)
   {
      Value = rootpath,
      ImageUrl = "~/Content/Images/folder.png",
      Expanded = true,
      ExpandMode = TreeNodeExpandMode.ServerSideCallBack
   };
   dirNode.Attributes.Add("isFile", "false");
   RadTreeView1.Nodes.Add(dirNode);
}

protected void RadTreeView1_NodeExpand(object sender, RadTreeNodeEventArgs e)
{
   BindTreeToDirectory(e.Node.Value, e.Node);
}

private void BindTreeToDirectory(string path, RadTreeNode parentNode)
{
   //get directories
   string[] directories = Directory.GetDirectories(path);
   foreach (string directory in directories)
   {
      var dirNode = new RadTreeNode(Path.GetFileName(directory))
      {
         Value = path + "/" + Path.GetFileName(directory),
         ImageUrl = "~/Content/Images/folder.png",
         ExpandMode = TreeNodeExpandMode.ServerSideCallBack
      };
      dirNode.Attributes.Add("isFile","false");
      parentNode.Nodes.Add(dirNode);
   }
   //get files in directory
   string[] files = Directory.GetFiles(path);
   foreach (string file in files)
   {
      var node = new RadTreeNode(Path.GetFileName(file));
      node.Attributes.Add("isFile", "true");
      //get extension
      string extension = Path.GetExtension(file);
      if (!string.IsNullOrEmpty(extension))
      {
         extension = extension.ToLower().TrimStart('.');
      }
      //choose an image for the extension
      if (Array.IndexOf(_knownExtensions, extension) > -1)
      {
         node.ImageUrl = "~/Content/Images/" + extension + ".png";
      }
      else
      {
         node.ImageUrl = "~/Content/Images/unknown.png";
      }
      parentNode.Nodes.Add(node);
   }
}

//go to a new directory
protected void btnGo_Click(object sender, EventArgs e)
{
   string nod = inpPath.Value.Trim();
   if (!string.isNullOrEmpty(nod))
   {
      var nodeslst = new List<string>();
      if (Session["nodes"] != null)
      {
         nodeslst = (List<string>) Session["nodes"];
      }
      else
      {
         //session has expired - get nodes from radtree
         nodeslst.AddRange(from RadTreeNode rtn in RadTreeView1.Nodes select rtn.Value);
      }
      if (nodeslst.Contains(nod, StringComparer.OrdinalIgnoreCase) == false)
      {
         AddNode(nod);
         nodeslst.Add(nod);
      }
      Session["nodes"] = nodeslst;
   }
}

and this code goes on the page that has the file select button:

<span style="width:200px; display:inline-block; text-align:right; padding-right:5px;">Add a Link to a Document:</span>
<telerik:RadTextBox ID="txtLinkFileName" runat="server" Width="325px" Enabled="False"></telerik:RadTextBox>
<asp:Button ID="selectFile" OnClientClick="OpenFileExplorerDialog(); return false;" Text="Browse..." runat="server" />

<asp:Button ID="btnLink" runat="server" CssClass="invisiblebutton" OnClick="LinkFile" CausesValidation="false" />

<telerik:RadWindow runat="server" Width="550px" Height="560px" VisibleStatusbar="false"
   ShowContentDuringLoad="false" NavigateUrl="Explorer.aspx" ID="ExplorerWindow"
   Modal="true" Behaviors="Close,Move,Resize">
</telerik:RadWindow>

<script type="text/javascript">
    function OpenFileExplorerDialog() {
        var wnd = $find("<%= ExplorerWindow.ClientID %>");
        wnd.show();
    }

    //This function is called from code on the Explorer.aspx page
    function OnFileSelected(fileSelected) {
        if (fileSelected && fileSelected.length > 0) {
            var textbox = $find("<%= txtLinkFileName.ClientID %>");
            textbox.set_value(fileSelected);
            $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>").ajaxRequestWithTarget("<%= btnLink.UniqueID %>", "");   
        }
    }
</script>

code behind:

protected void LinkFile(object sender, EventArgs e)
{
   if (!string.IsNullOrEmpty(txtLinkFileName.Text))
   {
      if (txtLinkFileName.Text.Length > 2 && txtLinkFileName.Text.Substring(0, 2) != @"\\")
      {
         Code.Common.DisplayMessage("File must be in a shared location!", Page);
      }
      else
      {
         //just a link to a file - no need to upload anything
         //save filepath to database
         //filepath = txtLinkFileName.Text;
      }
   }
}

As you can see it would be a lot easier if smartypants browsers weren’t trying to protect us from ourselves, but still accomplishable.