ASP.NET 3.5 and above only

Obout.Ajax.UI Controls - File Manager - Pick a file (client-side)

Click the button to pick a file



The grid with the file's information is generated in client-side when a file is picked in the 'File Manager' popup.

ASP.NET:

<%@ Register Assembly="Obout.Ajax.UI" TagPrefix="obout" Namespace="Obout.Ajax.UI.HTMLEditor" %>
<%
@ Register Assembly="Obout.Ajax.UI" TagPrefix="obout" Namespace="Obout.Ajax.UI.HTMLEditor.Popups" %>
<%
@ Register Assembly="Obout.Ajax.UI" TagPrefix="obout" Namespace="Obout.Ajax.UI.FileManager" %>
...
<obout:PopupHolder runat="server" ID="popupHolder"
  <Demand 
       <%-- Use the obout TreeView control in 'FileBrowser' popup --%>
       <obout:FileBrowser runat="server" UseOboutTree="true" ShowPreviewPanel="true">
          <%-- Set different previewers for different files extensions --%>
          <Previews>
                <%-- All Images here --%>
                <obout:Preview Extensions="jpg;jpeg;gif;bmp;png"
                                       
TypeName="Obout.Ajax.UI.HTMLEditor.Popups.ImageBrowser" />
 
               <%-- Flash Video --%>
                <obout:Preview Extensions="flv" TypeName="Obout.Ajax.UI.HTMLEditor.Popups.FlashVideoBrowser" />
                 <%-- Flash files --%>
                 <obout:Preview Extensions="swf" TypeName="Obout.Ajax.UI.HTMLEditor.Popups.FlashBrowser" />
                 <%-- Media --%>
                 <obout:Preview Extensions="mpeg;avi" TypeName="Obout.Ajax.UI.HTMLEditor.Popups.MediaBrowser" />
 
                <%-- All other files - just show description of the file (if exists) --%>
                 <obout:Preview Extensions="*" TypeName="Obout.Ajax.UI.HTMLEditor.Popups.UrlBrowser" />
 
         </Previews>
          <%-- Set the Tree features --%>
          <TreeFeatures FolderImageUrl="~/treeview/icons/folder_old.gif" > <%-- folders --%>
                 <%-- Set different leaf images for different files extensions --%>
                 <LeafImages>
 
                     <obout:LeafImage Extensions="html" Url="~/treeview/icons/ie_link.gif" />
 
                     <obout:LeafImage Extensions="doc;docx" Url="~/treeview/icons/doc.gif" />
 
                     <obout:LeafImage Extensions="txt" Url="~/treeview/img/vista_note.png" />
 
                     <obout:LeafImage Extensions="jpg;jpeg;gif;bmp;png" Url="~/treeview/img/picture.png" />
 
                     <obout:LeafImage Extensions="mp4;avi;mpeg;flv" Url="~/treeview/img/video.png" />
 
                     <obout:LeafImage Extensions="mp3;wav" Url="~/treeview/img/music.png" />
 
                     <obout:LeafImage Extensions="*" Url="~/treeview/icons/square_yellowS.gif" />
 
                </LeafImages>
 
         </TreeFeatures>
 
     </obout:FileBrowser>
  </
Demand>
</
obout:PopupHolder>
...
<script type="text/javascript">
  function openManager() {
     $find('<%= fileManager.ClientID %>').openManager();
     return false;
  }
  function filePicked(sender, args) {
     ...
  }
</script>
...
<obout:FileManager runat="server" ID="fileManager" PopupHolderID="popupHolder"
                            OnClientFilePicked="filePicked" />
<
asp:Button runat="server" ID="openManagerButton" OnClientClick="return openManager();"
                 Text="Open File Manager" />


The full source code of this example you can find in the downloaded SUITE for ASP.NET 3.5-4.0:

/FileManager/cs_GetFileClientSide.aspx(.cs) and /FileManager/vb_GetFileClientSide.aspx(.vb) files.

"Thanks! I'm starting to feel the support love everyone's talking about. :)"

Rob Hill

Random testimonial   All testimonials