Blog Engine Attachment File Manager

Topics: ASP.NET 2.0, Business Logic Layer, Controls
Jul 6, 2011 at 9:05 AM

I quickly threw an add-on together that you guys may way to test and see if you can implement something like this in your next major release.

I have created a system for better file upload and file \ image management. Here are some screenshots then I will describe what it actually does.

Simply put this is a simple manager that has the following features.

  1. Asyncronous File Upload
    1. With options of attach and continue editing
    2. Upload the file and continue uploading files
    3. Upload and browse to the file
  2. File browsing the respective blog instances files store (currently only filesystem based)
  3. Transverse up and down folder, existing naming conventions are followed
  4. View all files
  5. Click (left) for a context menu for each file, folders require double click to browse (like Windows explorer)
  6. Management options such as
    1. Add to post, this adds to the current location in the tinyMCE editor that you are on (required a small change to the tinyMCE.ascx.cs control)
    2. Rename with ajax style renaming
    3. Delete files (with confirmation)
    4. Imaging Tools
  7. Image tools to do the following
    1. Crop Image
    2. Rotate left & Right
    3. Resize Image done via Javascript and then handled via server script for aspect ratio reasons
    4. Flip horizontall and vertically
  8. Unobtrusive window that can be hidden when you do not want it
  9. Easy slug trail navigation (for folder view)

This add-on requires quite a bit of installtion. The installation package at the bottom has been designed to follow where the items should be put in their respective folders. 

There were two existing files that needed changing

  1. Add-Post.aspx(.cs) this is to add the File Manager to the page, once testing is done should be easy to add to the pages files
  2. tinyMCE.ascx(.cs) required an additional init parameter to make the tinyMCE field focused on start. This was to allow inplace editing of the attachments. meaning they are inserted where the carrot is and not at the bottom. Removing this was causing actually all the content to be removed if a page refresh was done and files attached without activating the tinyMCE editor first (dont ask me why)

The development of this add-on was done to follow the existing ajax solution inside BE.

  1. Use templates (html) that is managed by a Container.setTemplate
  2. Use of aspx pages for webmethods using jquery
  3. Ajax responses use the Json.JsonResponse or Json.JsonResponse<> for uniform behaviour
  4. All application and file paths are built upon existing paths and tools via Utils & Blog instances
  5. Use of existing code for the ajax file upload handler.

I have built and testing this about 4-5 times on fresh installs. I DO NOT RECOMMEND LOADING THIS INTO A LIVE ENVIROMENT BEFORE YOU OFFLINE TEST IT.

Anyway, I have loaded one of my Test blogs at http://test.bloglobe.com (its the only blog on that domain that has privlages for file manager) if you wish to test it out I have created a blogenine user that can only create postings. I will be taking the blog down in a few days so play now.

User \ Pass : blogengine

Here is the download, I hope to hear replies and thoughts.

BlogEngine.NetFileManagerv0.0.zip (444.17 kb)

 

Cheers. Nico

 

Jul 6, 2011 at 9:16 AM

Good. I think that BE team could put this into BE!

How put image into post?

Jul 6, 2011 at 9:41 AM

To use it simply upload your image with one of two options of append to my document and close or append to my document and continue.

For existing files, browse to it through the file manager then left click and select "Append to post"

I am working on a few more enhancements of saving a copy of an image, so you can save copy for cropping resizing etc while maintaining the original. And to attach an image to use the download file handler for links instead of the actual image.

Will upload v0.1 soon

Jul 6, 2011 at 10:12 AM

I tried. It good works...and It's good programmer.

Which technology Do you use?

Coordinator
Jul 6, 2011 at 7:09 PM

This looks pretty good. If all libraries you used open source licensed, we can sure add this to next official release.

Jul 6, 2011 at 11:46 PM

The library's are all open source liscensed. I did use a few outside librarys to manage some pieces I really didnt want to develop

  1. jQuery UI Core & Basic css theme, these are hosted on the Google CDN
  2. jCrop - handles the cropping solution
  3. jeegoocontext - the context menu that is shown when you click on a file
  4. Uploadify - handles the async file upload
    1. also uses swfobject which is open source aswell

 

All icons were picked from open liscence repositories. The rest was developed personally and I can confirm everything was built off open source librar'ys.

biapar. The technologies used are the same technologies utilized throughout the blogengine applications. .Net 4 C#, jQuery javascript, and flash file uploaders.

Cheers

Jul 7, 2011 at 7:02 AM

I love what you have done here. It is a fantastic idea. The only thing I would like to see is support for non-file system storage.

Many people have been asking for sql server based attachment and image support. I created a work item for this (http://blogengine.codeplex.com/workitem/12021) a while ago to document my thoughts on how this might work.

The important thing at this stage is to plan for future change. You may decide not to implement non-file system storage for completely understandable reasons, but please please please make your design flexible for that change. Ideally this would be done using a dependency injection design (SOLID principles). At the very least it should be implemented with the provider model so that it is possible for someone to use/implement a different provider (sql server for example).

I am really looking forward to seeing where this goes :)

Coordinator
Jul 7, 2011 at 11:04 AM

Very slick looking.

Jul 7, 2011 at 12:26 PM

I think that is a very good model to adopt, probably dont need to go down the dependency injection design as the entire application doesnt really use that pattern. However doing a full IoC controller would definitly be beneficial to application. 

For designing the prototype here are a list of shoulds that I can think of.

  1. Should use the provider model, through abstract classes and embedded against the blog instance
  2. Should employ stronger caching options both client\server side (possibly sliding server caching)
  3. Better directory management, IE use an Atomic file store 
  4. Allow for programatically changing the file storage methods dump to file store \ data provider
  5. Reword the current file delivery methods to be index based and not name based to reduce broken link and file moving issues
  6. Create a solid upgrade pattern for future developments.

That being said, its a massive task especially looking at the existing model, and the thousands of blogs already implementing the current file management style.

Considerations

  1. Exsiting models and their current platform load
  2. Reworking existing frameworks
  3. Creating a solid caching framework with sliding intervals
  4. Designing storage patterns and abstract operations
  5. Implementation for new releases
  6. Testing concerns over various enviroments supported by BlogEngine

That all being said it would be a great task to start and really could take file management for BlogEngine to another level. I would be happy to get started with this task however would need to main developers comments and concerns before getting started.

Cheers.

Nico

Coordinator
Jul 7, 2011 at 3:20 PM

If you fork latest code and start working on implementing these ideas, that would be great. I'd just suggest NOT doing it as single giant task, split it in manageable chunks so we can merge them one by one reviewing and testing as it goes.

Jul 8, 2011 at 9:03 AM

Hey rtur,

I have started on this task and have done quite alot in the last couple hours of this large task. I have checked a couple changes (about 21 files changed)

Here is the plan of attack so far.

To start the task I looked at your existing provider model for XML & Db and started focussing on using the same concept in the file manager.

So the application uses the same providers either XML or DB, however you can specify a specific provider for File Management by adding the attribute "fileStoreProvider=<provder>" in the web.config you can use two providers. If this tag does not exist then the default provider is used. You can look into the /Providers/BlogProivderSection.cs file for the additional attribute.

Now in the BlogProvider base class I have added quite a few abstract methods for file management. This (as you know) requires the inherited providers to implement these new methods. That being said I have created two classses (1 per provider) as seperate files /Providers/DbFileSystemProvider.cs & /Provider/XmlProvider/XmlFileSystemProvider.cs. 

Both these classes as you are aware act completly different. The db provder works with two tables (the sql setup script is in the /setup/SQLServer/MSSQLFileStoreTables2.5) and the xml provider basically works in the same method as you currently have implemented. Now to follow your existing model I have added static methods to the BlogService class to work with the active provider. Again the fileSystemProvider is different than your regular provider object.

Now for File Management the FileSystem contains 3 basic classes with various methods an properties.

Directory : Handles directory management

File : Handles file management

Image : handles specific image management.

Additionally I made changes to both the Image & File handler to use the BlogService static methods for retriving files and sending down the HttpResponse. I also added two new re-write methods to help with browser caching; (according to Google) browsers may not cache a file if it contains a query string. Now i am not 100% sure of this but I have allowed for two more rewrite rules such as

/images/2007/3/sample.jpg.jpgx -> evaluates to image.axd?picture=/2007/3/sample.jpx

/files/2007/3/file.txt.axdx -> evaluates to file.axd?file=2007/3/file.txt

Now there is a public property of file and image that give you the rewritten download link. 

This has only really been tested in the primary blog, i will be working on sub blogs later this evening.

Cheers.

 

Jul 8, 2011 at 11:50 AM

Make that 149.. More to come.

Working of the programitcally offloading data from one provider to another programatically. This may be a challenge as the web.config will have to be written to after the completion.

For this task looking at the following changes

  1. Add a feature to the Advanced settings to change your FileProvider
  2. Validate the provider is configured correctly
  3. Archive the current provider contents into the filesystem..  (via ISharpLib)
  4. Load the new provider, may have concerns of file overrite. May add that to a confirmation box
  5. Modify the web.config, which will cause a server restart. Could cause issues here
  6. Validate the new provider contains all the files in the archive.

This may be a very labour intensive, as it will have to run against all blog instances (in multiblog)

Any thoughts?

Jul 8, 2011 at 12:19 PM

Looks like you have put a lot of thought into the functionality of this plugin and how it will come together. One thing I would like to highlight is that designs based on the provider model often violate the Interface Segregation Principle. See http://www.davesquared.net/2009/01/introduction-to-solid-principles-of-oo.html for a good explanation. 

For example, the Membership and Role provider base classes provided by Microsoft are classic examples of really badly breaking this principle. If you implement a class based on these providers, you often are required to implement way more methods than you actually require. You may want to keep this in mind when you are designing your provider abstract class(es).

One way to conform to this principle while still providing more functionality is to define a lean provider abstract class with a static class of extension methods that go along side it. This means that you can provide lots of additional functionality, namely overloaded methods, while keeping your provider class simple. This will make it much easier for developing implementations of your provider.

Hope this helps.

Jul 12, 2011 at 3:21 AM

Has anyone had an moment to have a look at the file system management changes that I have pushed over? There has been alot of development down this path and hoping someone has time to have a look. Its really simply to install.

I have tried to provider detailed comments on each commit.

Let me know what you guys think.

Some of the major enhancements.

  1. You can backup your file system. This archives into a zip file and promotes to save to your local machine.
  2. You can programatically change your provider which archives the old data, clears the old provider, changes the web.config to the new provider, clears the new provider and imports the archive. 
  3. Many tasks have now been delegated to the object level and out of the BlogService level
  4. Uploading and modify has been completed
  5. The mini-file manager works with the existing model. As well as the existing upload functions
  6. All handlers now point to the new file system model
  7. Additional rewrite rules to help browser (and dynamic content [server side]) caching
  8. Three providers created
    1. Xml Provider -> same as existing setupd
    2. Database provider => currently only tested on SQL Server 2008
    3. UNC File provider -> Allows for UNC paths, share drives, physical drives, network drives etc
  9. Seperated providers, Blog Provider is no longer tied to the BlogFileSystemProvider. Keeping distinction between the providers responsibilites. Also maintains the integrity of the existing providers (for blog management) that have already been developed
  10. Thouroghly documented abstract classes for creating your own providers.
  11. Ajax file management suite that can be taken forward into a full scale file management suite (in the future).
  12. The base framework for doing Image Thumbnailing. Only the methods exist and the Database table and relationships for holding the thumbnails.
  13. Fully documented strongly typed FileSystem Objects
    1. Directory -> Manages a directory including sub directories, and file contents.
    2. File -> Manages a single file and its attributes
    3. Images -> Inherits File with additional properties and methods. To cast a file to a Image simply use <fileObj>.AsImage which casts it to the new object

There are more changes to come such as the Image Thumbnailing, better image tools. A full scale file manager, custom directory creation, lightbox implementation from the file manager.

Anyway.. Please have a look, been quite a few hours behind this one.

Cheers.. Nico

Coordinator
Jul 12, 2011 at 5:27 AM

It's been merged into main code. I changed file provider to XML and gave it a quick test, all seems to work fine in simple scenarios. I also made few style changes to make it look more like rest of the UI. Obviously need a lot more testing, specially with DB provider and multi-blog etc. but looks good overall, great job.

Jul 29, 2011 at 12:28 AM
Edited Oct 24, 2011 at 7:36 PM

I had just downloaded the lastest change set:

 

03890997cdc9

 

So far what I saw of the file manager is great!!!

Will let you know of any problems if I find any.

 

In the process of updating PageLinkMenu to 2.5.0.9 with release set 03890997cdc9

 

PageLinkMenu is my project to add more CMS features to BlogEngine.Net

once it gets deployable ready will fork it out to hopefully get it into the main code :)

 

If anyone is interested in testing or when it will it be ready send me an email at kbdavis07@yahoo.com

I will add you to the PageLinkMenu mailing list to keep you informed.

Java Blog

Aug 3, 2011 at 3:42 PM

It looks great from the screenshots, I hope it's as good as this asp.net file manager called FileUltimate.

Aug 18, 2011 at 6:42 PM
Edited Aug 18, 2011 at 6:42 PM

It looks great! Terrific job! Is it possible to add multi files upload at once or is it already implement?