My Portal Project

Seems like there are alot of PHP based file managers for TinyMCE, but none for ASP.NET. So here you have it, a basic, VB.NET image file manager that can be plugged into your TinyMCE rich text editor. First is the eye candy with what it will look like:

First is the button in the TinyMCE image builder dialog that you click to see the image picker:

Below is the way the basic dialog looks inside the popup window.

First is the the ASPX.VB code that lists the folders and files as links. Note the HREF for the actual files:

javascript:window.opener.returnToOpener

This function will take the filename that I click on and move it to the TinyMCE image builder dialog box.

Imports system.IO
Partial Class fileManager
    Inherits System.Web.UI.Page
    Dim currentDir As String
    Dim directorySeparatorChar As Char = Path.DirectorySeparatorChar
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim imgRoot As String = "images\cmimages"
        Dim appName As String = Request.ApplicationPath
        Dim currentImgRoot As String = imgRoot.Replace("\", "/")
        Dim root As String = Request.PhysicalApplicationPath + imgRoot
        Dim thisPage As String = Request.Path
        Dim strTemp As String = ""
        Dim n As Integer = 2
        currentDir = Request.Params("dir")
        If currentDir Is Nothing Then
            currentDir = root
        ElseIf currentDir = "" Then
            currentDir = root
        Else
            currentImgRoot = currentImgRoot + "/" + currentDir.Replace("\", "/")
            currentDir = root + "\" + currentDir
        End If
        Dim sb As New StringBuilder(4096)
        If Not currentDir.Equals(root) Then
            ' not at the root
            Dim currentDirParent As String
            Dim lastIndex As Integer = currentDir.LastIndexOf(directorySeparatorChar)
            If lastIndex <> -1 Then
                currentDirParent = currentDir.Substring(root.Length, (currentDir.Length - root.Length) - (currentDir.Length - lastIndex))
            Else
                currentDirParent = currentDir
            End If
            Dim litFolderNav As Literal = tblFileContainer.FindControl("litFolderNav")
            strTemp = "<a href=" + thisPage + "?dir=" + Server.UrlEncode(currentDirParent) + "><img border=0 src='images/upfolder.gif'></a>Back..."
            litFolderNav.Text = strTemp
        End If
        DoUpload()
        strTemp = "<img border=0 src=images/openfolder.gif> " + currentDir.Substring(root.Length, currentDir.Length - root.Length)
        Dim litFolderDisplay As Literal = tblFileContainer.FindControl("litFolderDisplay")
        litFolderDisplay.Text = strTemp
        Dim dirs() As String
        Try
            dirs = Directory.GetDirectories(currentDir)
            Dim d As String
            For Each d In dirs
                Dim dirName As String = Path.GetFileName(d)
                Dim row As TableRow = New TableRow
                Dim cell1 As TableCell = New TableCell
                Dim cell2 As TableCell = New TableCell
                Dim cell3 As TableCell = New TableCell
                cell1.Text = "<img src=images/folder.gif> <a href=" + thisPage + "?dir=" + Server.UrlEncode(dirName) + ">" + dirName + "</a>"
                cell2.Text = " "
                cell3.HorizontalAlign = HorizontalAlign.Right
                cell3.Text = Directory.GetLastWriteTime(currentDir & directorySeparatorChar.ToString() & dirName).ToString()
                row.Cells.Add(cell1)
                row.Cells.Add(cell2)
                row.Cells.Add(cell3)
                tblFileContainer.Rows.AddAt(n, row)
                n = n + 1
            Next
        Catch ex As Exception
        End Try
        Try
            Dim dirInfo As New DirectoryInfo(currentDir)
            Dim files() As FileInfo
            Dim f As FileInfo
            files = dirInfo.GetFiles()
            For Each f In files
                Dim filename As String = f.Name
                Dim row As TableRow = New TableRow
                Dim cell1 As TableCell = New TableCell
                Dim cell2 As TableCell = New TableCell
                Dim cell3 As TableCell = New TableCell
                strTemp = "javascript:window.opener.returnToOpener('" + appName + "/" + currentImgRoot + "/" + filename + "');window.close();"
                cell1.Text = "<img src='images/File.gif'><a href=" + strTemp + ">" + Server.UrlEncode(filename) + "</a>"
                cell2.Text = f.Length.ToString()
                cell3.HorizontalAlign = HorizontalAlign.Right
                cell3.Text = File.GetLastWriteTime(currentDir & directorySeparatorChar.ToString() & f.Name).ToString()
                row.Cells.Add(cell1)
                row.Cells.Add(cell2)
                row.Cells.Add(cell3)
                tblFileContainer.Rows.AddAt(n, row)
                n = n + 1
            Next
        Catch ex As Exception
        End Try
    End Sub
    Private Sub DoUpload()
        Dim uploadedFile As FileUpload = tblFileContainer.FindControl("uploadedFile")
        If Not (uploadedFile.PostedFile Is Nothing) Then
            Try
                Dim postedFile = uploadedFile.PostedFile
                Dim filename As String = Path.GetFileName(postedFile.FileName)
                Dim contentType As String = postedFile.ContentType
                Dim contentLength As Integer = postedFile.ContentLength
                postedFile.SaveAs(currentDir & directorySeparatorChar.ToString() & filename)
            Catch ex As Exception
                message.Text = "Failed uploading file"
            End Try
        End If
    End Sub
End Class

Next is the ASPX page that formats the data. You may have noticed in the VB code that I started inserting table rows at index 2, which is the row right after my header row, and right before my footer rows that have the file upload dialogs.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="fileManager.aspx.vb" Inherits="fileManager" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>File Manager</title>
    <link rel="stylesheet" type="text/css" href="includes/contentAdmin.css" />
    <script src="includes/CMAdminFunctions.js" type="text/javascript"></script>
    <script src="includes/lib/prototype.js" type="text/javascript"></script>
    <script src="includes/src/scriptaculous.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server" enctype="multipart/form-data">
    <div id="showimage"></div>
    <div style="padding:5px;">
    <asp:Table runat="server" ID="tblFileContainer" Width="500" CellPadding="0" CellSpacing="0">
        <asp:TableRow>
            <asp:TableCell Width="275" ColumnSpan="2">
                <asp:Literal runat="server" ID="litFolderDisplay"></asp:Literal>
            </asp:TableCell>
            <asp:TableCell >
                <asp:Literal runat="server" ID="litFolderNav"></asp:Literal>
            </asp:TableCell>
        </asp:TableRow>
        <asp:TableRow BackColor="#D8D8D8">
            <asp:TableCell Width="275">
                Name
            </asp:TableCell>
            <asp:TableCell Width="60">
                Size
            </asp:TableCell>
            <asp:TableCell style="text-align:center;">
                Modified
            </asp:TableCell>
        </asp:TableRow>
        <asp:TableRow>
            <asp:TableCell ColumnSpan="3">
                 
            </asp:TableCell>
        </asp:TableRow>
        <asp:TableRow>
            <asp:TableCell ColumnSpan="3">
                Add a file: <asp:FileUpload ID="uploadedFile" runat="server" /> <asp:Button ID="upload" runat="server" Text="Upload" />
            </asp:TableCell>
        </asp:TableRow>
    </asp:Table>
    <asp:Label id="dirContent" runat="server"/>
    <asp:Label id="message" runat="server"/>
    </div>
    </form>
</body>
</html>

Lastly is the Javascript, with some of it already shown in the VB code. We need a single global variable that contains the window reference of the TinyMCE image builder dialog window. I still need to do something about that URL, since it will not let me use a relative URL because the folder that contains TinyMCE is a few levels below where the file manager page is. I’ll work that out tomorrow.

var fileWindow;
function openFileBrowser(field_name, url, type, win){
    fileWindow = win;
    window.open("/cm/fileManager.aspx",null,"height=400,width=520,status=yes,toolbar=no,menubar=no,location=no");
}
function returnToOpener(imgUrl){
    fileWindow.document.getElementById('src').value =imgUrl ;
}

This entry was posted on Monday, May 15th, 2006 at 8:22 pm and is filed under Code Bin, ASP.NET. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.