Currently Updating 05/09/2014
The tools used in its construction are: ASP.NET, C#, JQuery, JavaScript, Entity Framework, MS SQL Sever 2008, and CSS.
The File Manager allows:
- Moving, Removing, and uploading binary files.
- Create and navigate a directory hierarchy.
- Be open as a child window and return a selected image.
- Enlarge the viewing area to view a specific image.
Files are uploaded using AsyncFileUpload control. I could not find a way working by uploading files asynchronously, so I embedded the the AsyncFileUpload control within an external .aspx page, and this external page is displayed within an iframe element.
Below is the code for both the fileManager.aspx and fileUpload.aspx pages:
fileManager Code (Code behind page does not have any C# code):
1: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="fileManager.aspx.cs" Inherits="FileManager._default" %>
2:
3: <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
4: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
5: <html xmlns="http://www.w3.org/1999/xhtml">
6: <head runat="server">
7: <title></title>
8: <link href="css/fileManager.css" rel="stylesheet" type="text/css" />
9: <script src="../js/jquery-1.6.2.min.js" type="text/javascript"></script>1:2: <script src="../js/jquery-ui-1.8.14.min.js" type="text/javascript">1: </script>2: <script src="../js/json2.js" type="text/javascript">1: </script>2: <script src="js/fileManager.js" type="text/javascript">1: </script>2: <script type="text/javascript">3: $(function () {4: fileManager.init('<%: VirtualPathUtility.ToAbsolute("~") %>', "media");5: });6:</script>
10: </head>
11: <body>
12: <form runat="server">
13: <asp:ScriptManager ID="ScriptManager1" runat="server">
14: </asp:ScriptManager>
15: <div id="fileMngerBox">
16: <div id="fileMngerHead">
17: <div>
18: Home Folder
19: </div>
20: <img id="imgHome" src="images/Home.png" border="0" alt="Home" /><span></span>
21: </div>
22: <div id="fileMngerContents">
23: <div id="fileMngerDirBox">
24: <div id="fileMngerDir">
25: </div>
26: </div>
27: <div id="fileMngerImgDsply">
28: <h2>
29: <img src="images/uploading.gif" alt="Wait While Loading..." />
30: Retrieving Files...</h2>
31: </div>
32: <p id="flyoutCMDs">
33: <img src="images/x.gif" class="fRight" title="" alt="Remove Image" />
34: <img src="images/check.png" class="fLeft" title="" alt="Select Image" />
35: </p>
36: </div>
37: <div id="fileMngerFooter">
38: <div>
39: New Folder
40: <input type="text" name="dirNew" value="" />
41: <img src="images/iconsAdd.jpg" border="0" alt="Add New Folder" title="Add New Folder" />
42: <abbr id="waitResult" class="waitResult" runat="server">
43: <img src="images/uploading.gif" alt="Please wait, uploading file." />
44: Please Wait...
45: </abbr>
46: </div>
47: <div class="rightAlign">
48: <span>
49: <iframe height="28" src="fileUpload.aspx" frameborder="0" scrolling="no" />
50: </span>
51: </div>
52: </div>
53: </div>
54: </form>
55: </body>
56: </html>
fileUploader Code:
fileUploader code behind page handles the submitting of uploading image. The coding for the code behind page follows.
1: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="fileUpload.aspx.cs" Inherits="FileManager.fileManager.fileUpload" %>
2:
3: <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
4: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
5: <html xmlns="http://www.w3.org/1999/xhtml">
6: <head runat="server">
7: <title></title>
8: <style type="text/css">
9: body
10: {
11: margin: 0;
12: padding: 0;
13: text-align: right;
14: background-color: #bbb;
15: }
16: input[type='file']
17: {
18: position: absolute;
19: top: 0px;
20: right: 8px;
21: z-index: 2;
22: opacity: 0;
23: filter: alpha(opacity=0);
24: }
25: img
26: {
27: }
28: </style>
29: <script type="text/javascript">1:2: var uploadComplete = function () {3: var obj = window.parent.fileManager;4: if (typeof obj !== "undefined") {5: obj.fileUploaded();6: }7: }8: var uploadStarted = function () {9: if (typeof window.parent !== "undefined" && typeof window.parent.fileManager !== "undefined") {10: var elem = document.getElementById("currentFolder");11: elem.value = window.parent.fileManager.dataVals.currentFolder;12: }13: }14: var uploadErr = function () {15:16: }17:</script>
30: </head>
31: <body>
32: <form id="form1" runat="server">
33: <asp:ScriptManager ID="ScriptManager1" runat="server">
34: </asp:ScriptManager>
35: <asp:HiddenField ID="currentFolder" runat="server" />
36: <abbr id="uploadResult" runat="server">
37: <img src="images/uploading.gif" alt="Please wait, uploading file." />
38: </abbr>
39: <input type="button" value="Upload File" />
40: <asp:AsyncFileUpload ID="AsyncFileUpload1" runat="server" OnUploadedComplete="uf_UploadedComplete"
41: OnClientUploadStarted="uploadStarted" OnClientUploadComplete="uploadComplete"
42: ThrobberID="uploadResult" />
43: </form>
44: </body>
45: </html>
fileUploader code behind page code:
1: using System;
2: using System.Collections.Generic;
3: using System.Linq;
4: using System.Web;
5: using System.Web.UI;
6: using System.Web.UI.WebControls;
7: using System.IO;
8: using deDogs.ManageImage;
9: using adminDataContext;
10: using System.Transactions;
11:
12: namespace FileManager.fileManager
13: {
14: public partial class fileUpload : System.Web.UI.Page
15: {
16: private struct fInfo
17: {
18: public string fName;
19: public dimensions size;
20: public string path;
21: public string ext;
22: }
23: protected void Page_Load(object sender, EventArgs e)
24: {
25: }
26:
27: protected void uf_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
28: {
29: using (TransactionScope transaction = new TransactionScope())
30: {
31: try
32: {
33: using (adminDBEntities contxt = new adminDBEntities())
34: {
35: MediaType mediaType;
36: fInfo fi;
37: HttpFileCollection postedFiles = Request.Files;
38: string imgExts = ".bmp, .gif, .jpeg, .jpg, .png";
39:
40: for (int i = 0; i < postedFiles.Count; i++)
41: {
42: fi.fName = postedFiles[i].FileName;
43: fi.ext = fi.fName.Substring(fi.fName.LastIndexOf("."));
44: fi.path = currentFolder.Value;
45:
46: if (imgExts.IndexOf(fi.ext) == -1)
47: {
48: fi.size.width = 0;
49: fi.size.height = 0;
50: } else {
51: fi.size = deDogs.ManageImage.Image.size(postedFiles[i]);
52: }
53:
54: postedFiles[i].SaveAs(MapPath(fi.path + fi.fName));
55:
56: mediaType = contxt.MediaTypes.Where(m => m.ext == fi.ext).First();
57: mediaType.Medias.Add(new Media
58: {
59: name = fi.fName,
60: width = fi.size.width,
61: height = fi.size.height,
62: path = fi.path,
63: iDate = DateTime.Now,
64: uDate = DateTime.Now
65: });
66: }
67: contxt.SaveChanges();
68: transaction.Complete();
69: }
70: }
71: catch (Exception) {}
72: }
73: }
74: }
75: }
fileManagerHandler.ashx handles the asynchronous AJAX calls for retrieving, moving, adding, removing files, and creating new directories. Handlers C# code is below:
1: using System;
2: using System.Collections.Generic;
3: using System.Linq;
4: using System.Web;
5: using System.Web.Script.Serialization;
6: using adminDataContext;
7: using System.IO;
8: using System.Transactions;
9:
10: namespace FileManager.fileManager
11: {
12: public class zFolder
13: {
14: public zFolder()
15: {
16: this.files = new List<zFileInfo>();
17: }
18: public List<zFileInfo> files { get; set; }
19: public ParentDIR directories { get; set; }
20: public string err { get; set; }
21: }
22: public class zFileInfo
23: {
24: public int id { get; set; }
25: public string name { get; set; }
26: public string ext { get; set; }
27: public string path { get; set; }
28: public int w { get; set; }
29: public int h { get; set; }
30: }
31: public class ParentDIR
32: {
33: public ParentDIR()
34: {
35: this.subDir = new List<ParentDIR>();
36: }
37: public string name { get; set; }
38: public string path { get; set; }
39: public List<ParentDIR> subDir { get; set; }
40: }
41: public class fileManager : IHttpHandler
42: {
43: private class RequestVals
44: {
45: public int id { get; set; }
46: public string file { get; set; }
47: public int action { get; set; }
48: public string currentFolder { get; set; }
49: public string folder { get; set; }
50: }
51:
52: private const int cIMGS = 0, cDIRS = 1, cBOTH = 2, cMOVE = 3, cREMOVE = 4, cADD = 5;
53:
54: RequestVals requestVals = new RequestVals();
55: zFolder folder = new zFolder();
56:
57: public void ProcessRequest(HttpContext context)
58: {
59: context.Response.ContentType = "application/json";
60: JavaScriptSerializer serializer = new JavaScriptSerializer();
61: System.Threading.Thread.Sleep(4000);
62: string p = HttpContext.Current.Request["p"];
63: try
64: {
65: requestVals = serializer.Deserialize<RequestVals>(p);
66:
67: switch (requestVals.action)
68: {
69: case cIMGS:
70: populate();
71: break;
72: case cDIRS:
73: folder.directories = dirsList(requestVals.currentFolder);
74: break;
75: case cBOTH:
76: populate();
77: folder.directories = dirsList(requestVals.currentFolder);
78: break;
79: case cMOVE:
80: move();
81: populate();
82: break;
83: case cREMOVE:
84: remove();
85: populate();
86: break;
87: case cADD:
88: add();
89: folder.directories = dirsList(requestVals.currentFolder);
90: break;
91: }
92: }
93: catch (Exception)
94: {
95: }
96:
97: context.Response.Write(serializer.Serialize(folder));
98: }
99:
100: protected void populate()
101: {
102: using (adminDBEntities contxt = new adminDBEntities())
103: {
104: string relPath = requestVals.currentFolder;
105:
106: IEnumerable<zFileInfo> media = contxt.Medias.Where(m => m.path == relPath).OrderBy(m => m.name).Select(m => new zFileInfo
107: {
108: id = m.ID,
109: name = m.name,
110: ext = m.MediaType.ext,
111: path = m.path,
112: w = m.width,
113: h = m.height
114: });
115:
116: folder.files = media.ToList();
117: }
118: }
119:
120: protected ParentDIR dirsList(string path)
121: {
122: DirectoryInfo d = new DirectoryInfo(HttpContext.Current.Request.MapPath("~" + path));
123: ParentDIR parentDir = new ParentDIR();
124:
125: parentDir.name = d.Name;
126: parentDir.path = path;
127:
128: string subPath;
129: foreach (var item in d.GetDirectories())
130: {
131: subPath = path + item.Name + "/";
132: parentDir.subDir.Add(dirsList(subPath));
133: }
134:
135: return parentDir;
136: }
137:
138: protected void move()
139: {
140: using (adminDBEntities contxt = new adminDBEntities())
141: {
142: using (TransactionScope transaction = new TransactionScope())
143: {
144: try
145: {
146:
147: Media media = contxt.Medias.Where(m => m.ID == requestVals.id && m.path == requestVals.currentFolder).FirstOrDefault();
148: if (media == null)
149: {
150: throw new Exception("Could not find specified file?");
151: }
152:
153: media.path = requestVals.folder;
154: media.uDate = DateTime.Now;
155: contxt.SaveChanges();
156:
157: string source = HttpContext.Current.Request.MapPath("~" + requestVals.currentFolder + requestVals.file);
158: string destination = HttpContext.Current.Request.MapPath("~" + requestVals.folder + requestVals.file);
159:
160: if (File.Exists(destination))
161: {
162: throw new Exception("File already exists in destination folder (" + destination + ")!");
163: }
164: else
165: {
166: File.Move(source, destination);
167:
168: if (!File.Exists(destination))
169: {
170: throw new Exception("Problem moveing the file to destination folder?");
171: }
172: }
173:
174: transaction.Complete();
175: contxt.AcceptAllChanges();
176: }
177: catch (Exception ex)
178: {
179: folder.err = "An error occured. The operation cannot be completed." + ex.Message;
180: }
181: }
182: }
183: }
184: protected void remove()
185: {
186: using (adminDBEntities contxt = new adminDBEntities())
187: {
188: IEnumerable<Media> medias = contxt.Medias.Where(m => m.ID == requestVals.id);
189: foreach (var media in medias)
190: {
191: contxt.Medias.DeleteObject(media);
192: }
193: contxt.SaveChanges();
194: }
195: }
196: protected void add()
197: {
198: DirectoryInfo di = new DirectoryInfo(HttpContext.Current.Request.MapPath(requestVals.currentFolder));
199: if (di.Exists)
200: {
201: di.CreateSubdirectory(requestVals.file);
202: }
203: }
204: public bool IsReusable
205: {
206: get
207: {
208: return false;
209: }
210: }
211: }
212: }
Another Handler is used to retrieve the files after the page is loaded. I might be incorrect, but I found that the page load faster by using this method:
1: <img width="180" height="135" title="animal8.jpg" class="ui-draggable" id="img_996" style="margin-top: 16px;"
2: src="/fileManager/ThumbHandler.ashx?dmens":{"width":800,"height":600},"max":{"width":180,"height":135},"ext":".jpg","imgName":"/media/animal8.jpg"}"
3: p={"
4: complete="complete" jQuery16209628216109583416="9"/>
The image src attribute calls ThumbHandler.ashx handler with a query string containing a JSON name/value pair. Below is the handler’s code:
1: using System;
2: using System.Collections.Generic;
3: using System.Linq;
4: using System.Web;
5: using System.IO;
6: using System.Web.Script.Serialization;
7: using System.Drawing.Imaging;
8: using System.Drawing;
9: using System.Drawing.Drawing2D;
10: using adminDataContext;
11:
12: namespace ThumbHandler
13: {
14: public struct ScaleImage
15: {
16: public string imgName;
17: public ScaleFactors dmens;
18: public ScaleFactors max;
19: public string ext;
20: }
21: public struct ScaleFactors
22: {
23: public int width;
24: public int height;
25: }
26:
27: public class ThumbHandler : IHttpHandler
28: {
29: ScaleImage imageInfo = new ScaleImage();
30:
31: public void ProcessRequest(HttpContext context)
32: {
33: try
34: {
35: JavaScriptSerializer serializer = new JavaScriptSerializer();
36: string p = context.Request["p"];
37: imageInfo = serializer.Deserialize<ScaleImage>(p);
38:
39: adminDBEntities contxt = new adminDBEntities();
40: int ext = contxt.MediaTypes.Where(m=>m.ext == imageInfo.ext).Select(m => m.ext).Count();
41:
42: if (ext > 0)
43: {
44: Bitmap bmp = thumbs(imageInfo);
45: bmp.Save(context.Response.OutputStream, imgFormat(imageInfo.ext));
46: }
47: }
48: catch (Exception)
49: {
50: }
51:
52: }
53:
54: public bool IsReusable
55: {
56: get
57: {
58: return false;
59: }
60: }
61:
62: public Bitmap thumbs(ScaleImage img)
63: {
64: Bitmap thumbnail;
65: using (System.Drawing.Image image = System.Drawing.Image.FromFile(System.Web.HttpContext.Current.Server.MapPath("~" + img.imgName)))
66: {
67:
68: ScaleFactors sf = scaleImage(image);
69:
70: //Bitmap bmp = new Bitmap(sf.width, sf.height);
71: //Graphics gr = Graphics.FromImage(bmp);
72: //gr.SmoothingMode = SmoothingMode.HighQuality;
73: //gr.CompositingQuality = CompositingQuality.HighQuality;
74: //gr.InterpolationMode = InterpolationMode.High;
75: //Rectangle rectDestination = new Rectangle(0, 0, sf.width, sf.height);
76: //gr.DrawImage(image, rectDestination, 0, 0, image.Width, image.Height, GraphicsUnit.Pixel);
77: //bmp.Save();
78:
79: //a holder for the result
80: thumbnail = new Bitmap(sf.width, sf.height);
81: //use a graphics object to draw the resized image into the bitmap
82: using (Graphics graphics = Graphics.FromImage(thumbnail))
83: {
84: //set the resize quality modes to high quality
85: graphics.CompositingQuality = CompositingQuality.HighQuality;
86: graphics.InterpolationMode = InterpolationMode.HighQualityBicubic;
87: graphics.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
88: graphics.PixelOffsetMode = PixelOffsetMode.HighQuality;
89: //draw the image into the target bitmap
90: Rectangle rectDestination = new Rectangle(0, 0, sf.width, sf.height);
91: graphics.DrawImage(image, 0, 0, thumbnail.Width, thumbnail.Height);
92: }
93: //return the resulting bitmap
94: }
95: return thumbnail;
96:
97: //System.Drawing.Image thumbnailImage = image.GetThumbnailImage(sf.width, sf.height, new System.Drawing.Image.GetThumbnailImageAbort(ThumbnailCallback), IntPtr.Zero);
98:
99: //// make a memory stream to work with the image bytes
100: //MemoryStream imageStream = new MemoryStream();
101:
102: //// put the image into the memory stream
103: //ImageFormat imgFormat;
104:
105:
106: //thumbnailImage.Save(imageStream, imgFormat);
107:
108: // make byte array the same size as the image
109: //byte[] imageContent = new Byte[imageStream.Length];
110:
111: // rewind the memory stream
112: //imageStream.Position = 0;
113:
114: // load the byte array with the image
115: //imageStream.Read(imageContent, 0, (int)imageStream.Length);
116:
117: //return imageContent;
118: }
119:
120: public ScaleFactors scaleImage(Image img)
121: {
122: ScaleFactors sf;
123:
124: sf.width = img.Width;
125: sf.height = img.Height;
126:
127: int deltaWidth = sf.width - imageInfo.max.width;
128: int deltaHeight = sf.height - imageInfo.max.height;
129: double scaleFactor;
130:
131: if (deltaHeight > deltaWidth)
132: {
133: scaleFactor = (double)imageInfo.max.height / (double)sf.height;
134: }
135: else
136: {
137: scaleFactor = (double)imageInfo.max.width / (double)sf.width;
138: }
139:
140: sf.width = (int)(scaleFactor * sf.width);
141: sf.height = (int)(scaleFactor * sf.height);
142:
143: return sf;
144: }
145:
146: public ImageFormat imgFormat(string ext)
147: {
148: ImageFormat imgformat;
149:
150: switch (ext)
151: {
152: case ".gif":
153: imgformat = ImageFormat.Gif;
154: break;
155: case ".bmp":
156: imgformat = ImageFormat.Bmp;
157: break;
158: case ".tiff":
159: imgformat = ImageFormat.Tiff;
160: break;
161: case ".png":
162: imgformat = ImageFormat.Png;
163: break;
164: case ".icon":
165: imgformat = ImageFormat.Icon;
166: break;
167: default:
168: imgformat = ImageFormat.Jpeg;
169: break;
170: }
171:
172: return imgformat;
173:
174: }
175: public bool ThumbnailCallback()
176: {
177: return true;
178: }
179: }
180: }
CSS and JavaScript is listed below:
1: /// <reference path="jquery-1.5-vsdoc.js" />
2:
3: var fileManager = {
4: startPos: 0
5: , xhr: null
6: , root: ""
7: , holdBGColor: ""
8: , basePath: ""
9: , scrollTop: 0
10: , timeOut: null
11: , wiatImg: null
12: , actions: { IMGS: 0, DIRS: 1, BOTH: 2, MOVE: 3, REMOVE: 4, ADD: 5 }
13: , max: { w: 180, h: 167 }
14: , dataVals: { currentFolder: "" }
15: , dirs: []
16: , request: function () {
17:
18: $("abbr#waitResult").addClass("waitResult");
19:
20: if (fileManager.xhr !== null) {
21: fileManager.xhr.abort();
22: }
23:
24: fileManager.xhr = $.ajax({
25: type: "POST",
26: url: "fileManagerHandler.ashx",
27: data: { p: JSON.stringify(fileManager.dataVals) },
28: dataType: "json",
29: complete: fileManager.handleAsyncComplete,
30: success: fileManager.handleAsyncRequest,
31: error: fileManager.handleAsyncError
32: });
33: }
34: , handleAsyncRequest: function (data) {
35:
36: if (typeof data === "undefined" || data === null || !(data.hasOwnProperty("files") || data.hasOwnProperty("directories"))) {
37: return;
38: }
39:
40: var i, obj = $("#fileMngerImgDsply");
41: obj.empty();
42: if (fileManager.dataVals.action !== fileManager.actions.DIRS && fileManager.dataVals.action !== fileManager.actions.ADD) {
43: if (data.files !== null) {
44: if (data.files.length > 0) {
45: for (i = 0; i < data.files.length; i++) {
46: var img = $(fileManager.displayImgs(data.files[i]));
47:
48: obj.append(img);
49:
50: var imgDsply = img.find(".imgDsply");
51: imgDsply.find("img").css({ "margin-top": (imgDsply.height() - imgDsply.find("img").height()) / 2 });
52:
53: }
54: } else {
55: obj.append("<h2><img src='images/empty.png' alt='Empty Folder' /><div>Empty</div></h2>");
56: }
57: }
58: }
59:
60: if (data.directories !== null) {
61: obj = $("#fileMngerDir");
62:
63: var uObj = obj.find("img[title='" + fileManager.dataVals.currentFolder + "']");
64:
65: if (uObj.length !== 0) {
66: obj = uObj.parent();
67: obj.find("p").remove();
68:
69: fileManager.writeDirs(data.directories, obj);
70:
71: uObj.trigger("click");
72: $("#fileMngerFooter input[type='text']").val("");
73: } else {
74: obj.find("p").remove();
75: fileManager.writeDirs(data.directories, obj);
76: }
77: }
78:
79: }
80: , handleAsyncComplete: function () {
81: fileManager.hideFlyoutCMDs();
82: $("#fileMngerImgDsply").scrollTop(fileManager.scrollTop);
83: $("abbr#waitResult").removeClass("waitResult");
84: }
85: , handleAsyncError: function (xhr, status, e) {
86: if (e !== "abort") {
87: fileManager.hideFlyoutCMDs();
88: $("abbr#waitResult").removeClass("waitResult");
89: $("#fileMngerImgDsply").empty().append("<h2>Error occured while retrieving files. Please retry your request.</h2>");
90: alert(e);
91: }
92: }
93: , displayImgs: function (dt) {
94: var imgBox = document.createElement("div");
95: imgBox.className = "imgBox";
96:
97: var div = document.createElement("div");
98: div.className = "imgDsply";
99:
100: var img = fileManager.writeImg(dt);
101: div.appendChild(img);
102:
103: imgBox.appendChild(div);
104:
105: div = document.createElement("div");
106: div.className = "captionImgDsply";
107: div.innerHTML = "<b>" + dt.name + "</b><br />" + dt.w + "x" + dt.h;
108: imgBox.appendChild(div);
109:
110: $(img).draggable({
111: helper: "clone",
112: opacity: "0.25"
113: });
114: $(imgBox).mouseenter(function () {
115: fileManager.flyoutCMDs(dt, $(this))
116: });
117: return imgBox;
118: }
119: , writeImg: function (data) {
120: var root = fileManager.root + "fileManager/";
121: var ext = $.trim(data.ext);
122: var chgFile = false;
123: var d = fileManager.calcDimensions(data.w, data.h);
124:
125: if (fileManager.fileExts.indexOf(ext) !== -1) {
126: chgFile = true;
127: data.w = 128;
128: data.h = 128;
129: d.w = 128;
130: d.h = 128;
131: }
132:
133: if (data.w < fileManager.max.w && data.h < fileManager.max.h) {
134: d.w = data.w;
135: d.h = data.h;
136: }
137: var qStr = {
138: dmens: { width: data.w, height: data.h },
139: max: { width: d.w, height: d.h },
140: ext: ext
141: }
142:
143: if (chgFile) {
144: qStr.imgName = root + "images/fileicons/" + ext.replace(".", "") + ".png";
145: } else {
146: qStr.imgName = data.path + data.name;
147: }
148:
149: var img = document.createElement("img");
150: img.id = "img_" + data.id;
151: img.src = root + "ThumbHandler.ashx?p=" + JSON.stringify(qStr);
152: img.title = data.name;
153: img.width = d.w;
154: img.height = d.h;
155:
156: img.onclick = function () { fileManager.bigImg({ name: data.name, ext: data.ext, w: data.w, h: data.h }); return false; };
157: return img;
158: }
159: , writeDirs: function (oDir, obj) {
160: var div, img, elem, i;
161: for (i = 0; i < oDir.subDir.length; i++) {
162:
163: elem = $("<p>");
164:
165: $("<img>")
166: .attr({ "src": fileManager.root + "fileManager/images/folder_close.png", "alt": "Directory Collapsed", "title": oDir.subDir[i].path })
167: .droppable({
168: tolerance: "pointer",
169: greedy: true,
170: drop: function (e, ui) {
171: var file = ui.draggable.attr("title");
172: var folder = $(this).attr("title");
173: if (confirm("Are you sure you want to move " + file + " to " + folder)) {
174: var Id = ui.draggable.attr("id");
175: var id = Id.substring(Id.lastIndexOf("_") + 1);
176: fileManager.dataVals.action = fileManager.actions.MOVE;
177: fileManager.dataVals.file = file;
178: fileManager.dataVals.folder = folder;
179: fileManager.dataVals.id = id;
180: fileManager.request();
181: }
182: }
183: }).appendTo(elem);
184:
185: $("<span>").attr("title", oDir.subDir[i].name).hover(function () {
186: fileManager.holdBGColor = $(this).css("background-color");
187: $(this).css("background-color", "#ddd");
188: }, function () {
189: $(this).css("background-color", fileManager.holdBGColor);
190: }).append(oDir.subDir[i].name).appendTo(elem);
191:
192: obj.append(elem);
193:
194: if (oDir.subDir[i].subDir.length !== 0) {
195: fileManager.writeDirs(oDir.subDir[i], elem);
196: }
197: }
198: }
199: , folderClick: function (e) {
200: var obj = $(e.target); //Clicked on folder image.
201:
202: //Test if clicked item is an folder image.
203: //Image elements have a src attribute, and if not then return.
204: var attr = obj.attr("src");
205: if (typeof attr === "undefined" || attr === false) {
206: return false;
207: }
208:
209: var parent = obj.parent();
210: fileManager.toggleFolders(parent);
211:
212: //Was there a control click or command click was raised
213: if (e.metaKey) {
214: parent.find("img:first").attr("src", fileManager.root + "fileManager/images/folder_open.png").end()
215: .find("p").hide();
216: } else {
217: parent.children("p").show();
218: obj.attr("src", fileManager.root + "fileManager/images/folder_open.png");
219: }
220:
221: fileManager.refreshPath(obj.attr("title"), parent);
222:
223: e.stopPropagation();
224: }
225: , refreshPath: function (path, parent) {
226: $("#fileMngerHead div").html(parent.find("span").html() + " Folder"); //Set Header as title of folder
227:
228: //No need to retrieve new data when clicked on same folder.
229: if (fileManager.dataVals.currentFolder === path) {
230: return false;
231: }
232:
233: $("#fileMngerImgDsply").empty().append("<h2><img src='images/uploading.gif' alt='Wait While Loading...' />Retrieving Files...</h2>");
234:
235: fileManager.dataVals.currentFolder = path; //Store current folder path
236:
237: fileManager.breadCrumbsClick(path); //Write header crumbs to current location
238:
239: //Request image data of current folder
240: fileManager.dataVals.action = fileManager.actions.IMGS;
241: fileManager.request();
242: }
243: , toggleFolders: function (obj) {
244:
245: //Close all folders and open any Grand Parents.
246: $("#fileMngerDir img").attr("src", fileManager.root + "fileManager/images/folder_close.png");
247: obj.parents("p").find("img:first").attr("src", fileManager.root + "fileManager/images/folder_open.png");
248:
249: }
250: , breadCrumbsClick: function (path) {
251: var headBox = $("#fileMngerHead span").html("");
252: var sPath = fileManager.root + fileManager.basePath;
253: var p = path.replace(sPath, "").split("/");
254:
255: $.each(p, function (i, value) {
256: if (value !== "") {
257: sPath += value + "/";
258: var path = sPath;
259:
260: $("<img>").attr({ "src": "images/seperator.png", "class": "bcSeperator", "alt": "Bread Crumb Seperator" }).appendTo(headBox);
261:
262: $("<a>").attr({ "href": "#" })
263: .text(value)
264: .click(function (e) {
265: $("#fileMngerDir img[title='" + path + "']").trigger("click");
266: e.stopPropagation();
267: })
268: .appendTo(headBox);
269: }
270: });
271: }
272: , hideFlyoutCMDs: function () {
273: $("#flyoutCMDs").hide();
274: }
275: , calcDimensions: function (w, h) {
276: var p, d = {};
277: if (w > h) {
278: p = h / w;
279: d.w = fileManager.max.w;
280: d.h = Math.floor(fileManager.max.w * p);
281: if (d.h > fileManager.max.h) {
282: d.h = fileManager.max.h;
283: d.w = parseInt(d.h * w / h);
284: }
285: } else {
286: p = w / h;
287: d.h = fileManager.max.h;
288: d.w = Math.floor(d.h * p);
289: if (d.w > fileManager.max.w) {
290: d.w = fileManager.max.w;
291: d.h = parseInt(d.w * h / w);
292: }
293: }
294: return d;
295: }
296: , flyoutCMDs: function (details, imgBox) {
297: try {
298: var img = $(imgBox).find("img");
299: var dt = $.parseJSON(img.attr("src").replace(fileManager.root + "fileManager/ThumbHandler.ashx?p=", ""));
300: var cm = $("#flyoutCMDs img:first");
301: var parent = cm.parent();
302:
303: var sId = img.attr("id");
304: var title = { id: sId.substring(sId.lastIndexOf("_") + 1), imgName: dt.imgName, width: dt.dmens.width, height: dt.dmens.height };
305:
306: title.action = "Remove";
307: cm.attr("title", JSON.stringify(title));
308: title.action = "SV";
309: cm.next().attr("title", JSON.stringify(title));
310:
311: parent.show();
312: var position = imgBox.position();
313: parent.css({ "top": position.top + 12, "left": position.left + 12 });
314: } catch (e) {
315:
316: }
317: }
318: , removeImg: function (e) {
319: try {
320: var t = $.parseJSON($(e.target).attr("title"));
321: var ext = t.imgName.substring(t.imgName.lastIndexOf("."));
322: var name = t.imgName.substring(t.imgName.lastIndexOf("/") + 1);
323:
324: if (t.action === "Remove") {
325: if (confirm("Are you sure you want to remove " + name + "?")) {
326: fileManager.scrollTop = $("#fileMngerImgDsply").scrollTop();
327: fileManager.dataVals.action = fileManager.actions.REMOVE;
328: fileManager.dataVals.file = name;
329: fileManager.dataVals.id = t.id;
330: fileManager.request();
331: }
332: } else {
333: var isType = typeof fileManager_Select;
334: if (isType !== "undefined" && isType === "function") {
335:
336: } else {
337: fileManager.bigImg({ name: name, ext: ext, w: t.width, h: t.height });
338: }
339: }
340: } catch (ex) {
341:
342: }
343: e.stopPropagation();
344: }
345: , bigImg: function (dt) {
346: var parentBox = $("#fileMngerContents");
347: var divBox = $("<div>").addClass("bigImg").css("width", parentBox.width());
348: divBox.appendTo(parentBox);
349:
350: var hVals = { w: fileManager.max.w, h: fileManager.max.h };
351: fileManager.max.w = divBox.width();
352: fileManager.max.h = divBox.height();
353:
354: var d = fileManager.calcDimensions(dt.w, dt.h);
355: divBox.css("padding-top", Math.floor((divBox.height() - d.h) / 2));
356:
357: var qStr = { imgName: fileManager.root + fileManager.dataVals.currentFolder + dt.name, dmens: { width: dt.w, height: dt.h }, max: { width: d.w, height: d.h }, ext: dt.ext };
358:
359: var img = $("<img>").attr({
360: "src": fileManager.root + "fileManager/ThumbHandler.ashx?p=" + JSON.stringify(qStr),
361: "title": dt.name,
362: "width": d.w,
363: "height": d.h
364: });
365:
366: divBox.append(img);
367:
368: fileManager.max.w = hVals.w;
369: fileManager.max.h = hVals.h;
370:
371: $(document).click(function (e) {
372: if ($(e.target).parents("div.imgBox").length === 0) {
373: $(".bigImg").remove();
374: $(document).unbind("click");
375: }
376: });
377:
378: }
379: , goHome: function (e) {
380:
381: $("#fileMngerDir img").attr("src", fileManager.root + "fileManager/images/folder_close.png");
382:
383: if (e.metaKey) {
384: $("#fileMngerDir > p p").hide();
385: }
386: //$("#fileMngerDir img[title='" + path + "']");
387: var path = fileManager.root + fileManager.basePath;
388: if (path === fileManager.dataVals.currentFolder) {
389: return;
390: }
391:
392: $("#fileMngerImgDsply").empty().append("<h2><img src='images/uploading.gif' alt='Wait While Loading...' />Retrieving Files...</h2>");
393:
394: $("#fileMngerHead span").html("");
395: fileManager.dataVals.currentFolder = path;
396: fileManager.dataVals.action = fileManager.actions.IMGS;
397: fileManager.request();
398:
399: $("#fileMngerHead div").html("Home Folder");
400: e.stopPropagation();
401: }
402: , newDir: function (e) {
403: var obj = $(e.target);
404:
405: var attr = obj.attr("src");
406: if (typeof attr === "undefined" || attr === false) {
407: return false;
408: }
409: var txt = $("#fileMngerFooter input[type='text']").val();
410: stipTxt = txt.replace(/^[^a-z0-9_ -]+$/ig, "");
411: if (stipTxt !== "") {
412: fileManager.dataVals.action = fileManager.actions.ADD;
413: fileManager.dataVals.file = txt;
414: fileManager.request();
415: } else {
416: alert("Invalid directory name.");
417: }
418: e.stopPropagation();
419: }
420: , init: function (root, basePath) {
421: if (typeof root === "undefined" || root === "") {
422: alert("Missing to include root path within aspx page");
423: return;
424: }
425: if (typeof basePath === "undefined" || basePath === "") {
426: alert("Missing to include media path within aspx page");
427: return;
428: }
429:
430: basePath = basePath + "/";
431: root = root + "/";
432:
433: fileManager.basePath = basePath.replace(/\/\//g, "/");
434: fileManager.root = root.replace(/\/\//g, "/");
435: fileManager.dataVals.currentFolder = fileManager.root + fileManager.basePath;
436:
437: fileManager.waitImg = document.createElement("img");
438: fileManager.waitImg.src = fileManager.root + "fileManager/images/wait.gif";
439:
440: $("#fileMngerDir").click(fileManager.folderClick);
441: $("#fileMngerImgDsply").scroll(fileManager.hideFlyoutCMDs)
442: .mouseleave(function () { fileManager.timeOut = setTimeout(fileManager.hideFlyoutCMDs, 300); });
443: $("#flyoutCMDs").click(fileManager.removeImg)
444: .mouseenter(function () { clearTimeout(fileManager.timeOut); })
445: $("#imgHome").attr("title", fileManager.dataVals.currentFolder).click(fileManager.goHome);
446: $("#fileMngerFooter img").click(fileManager.newDir);
447:
448: fileManager.dataVals.action = fileManager.actions.BOTH;
449: fileManager.request();
450: }
451: , fileUploaded: function () {
452: fileManager.dataVals.action = fileManager.actions.IMGS;
453: fileManager.request();
454: }
455: , fileExts: ".avi, .chm, .css, .dll, .doc, .docx, .f4v, .fla, .flv, .htm, .html, .ini, .jar, .js, .lasso, .mdb, .mov, .mp3, .mpg, .pdf, .php, .ppt, .py, .rb, .real, .reg, .rtf, .sql, .swf, .txt, .vbs, .wav, .wma, .wmv, .xls, .xml, .xsl, .zip"
456: , imgExts: ".bmp, .gif, .jpeg, .jpg, .png"
457: };
1: body
2: {
3: position: relative;
4: margin: 0;
5: padding: 0;
6: border: 0;
7: color: #333;
8: letter-spacing: .07em; /* font-family: "Myriad Pro" , Arial, Helvetica, sans-serif; */
9: font-family: "Trebuchet MS" , Arial, Helvetica, sans-serif;
10: font-size: 65.5%;
11: }
12: a, a:link, a:visited, a:active, a:hover
13: {
14: text-decoration: none;
15: color: #333;
16: }
17: img
18: {
19: display: block;
20: }
21: h2
22: {
23: margin-left:24px;
24: }
25: h2 img
26: {
27: display:inline-block;
28: margin-right:6px;
29: }
30: h2 div
31: {
32: text-align:center;
33: width: 128px;
34: }
35: /*
36: Main Framing
37: */
38: #fileMngerBox
39: {
40: margin: 0 auto;
41: max-width: 95%;
42: height: 600px;
43: font-size: 1em;
44: margin: 12px auto 0;
45: }
46: /*
47: Head Section
48: =========================== */
49: #fileMngerHead
50: {
51: padding: 12px;
52: font-size: 1.1em;
53: font-weight: bold;
54: background-image: url(../images/headGradient.jpg);
55: background-repeat: repeat-x;
56: overflow: hidden;
57: }
58: #fileMngerHead div
59: {
60: text-align: right;
61: font-size: 1.6em;
62: margin-right: 24px;
63: }
64: #fileMngerHead span
65: {
66: display: inline-block;
67: font-size: 1.1em;
68: }
69: #fileMngerHead img
70: {
71: margin-bottom: -3px;
72: display: inline-block;
73: width: 32px;
74: height: 32px;
75: }
76: #fileMngerHead img.bcSeperator
77: {
78: width: 1px;
79: height: 16px;
80: margin: 0px 12px -3px;
81: }
82: /*
83: Content Section
84: =========================== */
85: #fileMngerContents
86: {
87: position: relative;
88: height: 80%;
89: overflow: hidden;
90: }
91: #fileMngerContents > div
92: {
93: float: left;
94: height: 100%;
95: }
96: /*
97: Directory Display
98: =========================== */
99: #fileMngerDirBox
100: {
101: width: 28%;
102: background-color: #eee;
103: }
104: #fileMngerDir
105: {
106: height: 100%;
107: overflow: scroll;
108: font-size: 1.1em;
109: }
110: #fileMngerDir a
111: {
112: color: #333;
113: text-decoration: none;
114: }
115: #fileMngerDir img
116: {
117: float: left;
118: width: 25px;
119: height: 25px;
120: margin-right: 4px;
121: }
122: #fileMngerDir p
123: {
124: width: 300%;
125: margin: 4px 0px 0px 12px;
126: }
127: #fileMngerDir > p p
128: {
129: display: none;
130: margin-left: 24px;
131: }
132: #fileMngerDir > p span
133: {
134: padding: 4px 0px 4px 8px;
135: display: block;
136: width: 85%;
137: }
138: /*
139: Image Display
140: =========================== */
141: #fileMngerImgDsply
142: {
143: width: 72%;
144: background-color: #ddd;
145: overflow: auto;
146: }
147: #fileMngerImgDsply .imgBox
148: {
149: float: left;
150: height: 250px;
151: width: 200px;
152: padding: 8px 4px 0px;
153: }
154: #fileMngerImgDsply .imgBox > div
155: {
156: text-align: center;
157: margin: 0 auto;
158: }
159: #fileMngerImgDsply .imgBox .imgDsply
160: {
161: height: 167px;
162: overflow: hidden;
163: background-color: #000;
164: }
165: #fileMngerImgDsply .imgBox > div img
166: {
167: margin: 0 auto;
168: }
169: #fileMngerImgDsply .imgBox .captionImgDsply
170: {
171: margin-top: 16px;
172: padding: 0 8px;
173: word-wrap: break-word;
174: }
175: /*
176: Footer Section
177: =========================== */
178: #fileMngerFooter
179: {
180: background-color: #bbb;
181: padding: 18px;
182: overflow: hidden;
183: }
184: #fileMngerFooter div
185: {
186: float: left;
187: font-weight: bold;
188: width: 50%;
189: }
190: #fileMngerFooter .rightAlign
191: {
192: text-align: right;
193: }
194: #fileMngerFooter .rightAlign > span
195: {
196: display: inline-block;
197: position: relative;
198: }
199: #fileMngerFooter input[type=text]
200: {
201: width: 200px;
202: }
203: #fileMngerFooter img
204: {
205: width: 16px;
206: height: 16px;
207: margin-bottom: -3px;
208: display: inline-block;
209: }
210: /*
211: Display Big Image
212: =========================== */
213: #fileMngerBox .bigImg
214: {
215: position: absolute;
216: top: 0px;
217: left: 0px;
218: background-color: #000;
219: color: #fff;
220: }
221: #fileMngerBox .bigImg img
222: {
223: margin: 0 auto;
224: }
225: /*
226: Popup Context Menu
227: =========================== */
228: #flyoutCMDs
229: {
230: position: absolute;
231: display: none;
232: top: 0px;
233: left: 0px;
234: width: 100px;
235: height: 24px;
236: background-image: url(../images/navBar.png);
237: }
238: #flyoutCMDs img
239: {
240: width: 12px;
241: height: 12px;
242: padding-top: 6px;
243: cursor: pointer;
244: }
245: #flyoutCMDs img.fRight
246: {
247: float: right;
248: padding-right: 20px;
249: }
250: #flyoutCMDs img.fLeft
251: {
252: float: left;
253: padding-left: 20px;
254: }
255: #waitBox
256: {
257: width: 200px;
258: height:167px;
259: margin: 8px 4px 0px;
260: background-color: #ccc;
261: }
262: #waitBox div
263: {
264: padding-top:50px;
265: }
266: #waitBox img
267: {
268: width: 32px;
269: height: 32px;
270: margin:0 auto;
271: }
272: abbr
273: {
274: display:none;
275: }
276: abbr.waitResult
277: {
278: display: inline-block;
279: margin-left: 12px;
280: }
No comments:
Post a Comment