An unobtrusive intranet ASP.NET MVC application for logically tagging, organizing and searching network files in one centralized location with a fast and simple interface
Me and some friends have a network set up where we share movies and music.
This is a Windows domain network and we all simply share our folders as 'shares' across the network.
The problem is that there are so many different files and they are all spread out, there was no way to browse them all at once in any sort of convenient way.
That is where the idea for forganizer came up, it is simply a tagging and search interface for multiple shared drives (or just your local ones if you want).
Since I hadn't really made any MVC projects yet, I decided to do this one in ASP.NET MVC, a great new technology.
Also, this was my first attempt at many new programming techniques I hadn't really used in the past such as Unit Testing, Inversion of Control (Dependency Injection) and Mocking, all very useful!
I want to say right up front, this is for a Windows network, and will work best with... err... IE7+, because it works best with your file explorer - some features like folder opening and downloads may not work with other browsers.
You can always check out my source code
if you want to see how something was done, here I am just going to explain what the program does from a user point of view.
Once forganizer is installed (just run Content/setup.sql
and publish the rest to a website, making sure you have MVC installed and all that good stuff) you will see this:
Now you need to add some files to the system, here is the directory we are going to add for the demo.
Notice that there are some files in the top folder, and also some folders that go down (quite a few nested folders actually).
adding some files
To add new files in, simply click on the 'manage' tab on the upper right.
The default page for manage is 'add files' so you simply enter the network path in the 'from folder' field and click 'run it'.
Notice that it only uploaded 8 files, those are the files in the root. If you check the 'recursive' checkbox, if will go ahead and run through all of the files regardless of depth:
The system will never add a file more than once, so feel free to run the same folders over and over, in fact, that is how you enter new files that have been put on the shares - I think later I will implement and auto-updater.
Now if we were to will in more of the textboxes the system would be more selective.
Say I wanted to exclude all of the .txt files I have, I would just fill '.txt' in the 'exclude extensions' blank.
Similarly, if I am only interested in video files, I would just put '.avi .mpg .mpeg' in the 'include only these extensions' field - it's really pretty self-explanatory.
now you are up and running
Click on the 'search' tab or on 'forganizer' and you will see that you now have a tidy list of files.
Also, you will notice that on the right side, all of the file extensions that were in your folders are now represented in the extensions cloud, sized by the relation of file count - in my example, there are many more .cs files than anything else:
Each file has download, open folder and delete links next to it. They all do what you think they would, except delete does not actually delete a file, just the reference in forganizer.
If you delete a reference, then later restore it, it will still hold all the tags you previously assigned to it.
tag some stuff
As of right now, this doesn't do us much good, they are searchable by file extension (just click on the file extension on the right), but you could do that in Explorer.
We want to add some tags, so click on 'manage' again, and then on 'mass tag adding' on the right side menu.
In this example, I am adding the tag 'Testing' to all the files in the directory \\network_drive\share\folder\forganizer\Forganizer.Tests.
Now go back to the search, and you can see that many of the files have been tagged:
The 'mass tag delete' and 'mass tag edit' work just the same as above (actually runs the same exact code).
Notice that I also manually added the 'wallpaper' tags to a couple .jpg files - that was done simply by typing 'wallpaper' in the small textbox by each file and clicking '+tags' or pressing enter.
You will also see that now there is a cloud tag on the right showing the tags that are in the present search.
Now you can make some categories to make searching easier.
Categories are just groups of file extensions, I am going to make a 'programming' category that includes .js and .cs files:
the manual tagging interface
Now going back to the main search, you will see that a 'programming' category is now in the sidebar.
In the following picture, you can see that I have clicked on the 'WebUI' tag and the '.js' file extension.
Now all I see is the .js files that are tagged with 'WebUI', it's just that simple! Also take note of the intuitive urls achieved with MVC.
Those MS tags are now inserted.
Now if you want to delete a tag, simply hover over it and a [delete] link will show up:
Click it and the tag is removed:
Pretty basic stuff and simple to figure out and use. This same add/delete interface is used for categories as well.
Now what if someone went and deleted some files, since forganizer does not actually constantly monitor the files, it will be out of date.
That is why I built a cleanup feature - say I delete these files:
I can just go to manage -> file cleanup and click the big button:
And you are all cleaned up.
One great feature on this is if any file is deleted, either manually or by the cleanup tool, its tags will be preserved;
if that file is ever re-added, or restored, it will still have all the meta-data that it always had.
some more stuff
I went ahead and added the 'WebUI' tag to all the files in the \\network_drive\share\folder\forganizer\forganizer.WebUI folder,
and 'DomainModel' to all files in the \\network_drive\share\folder\forganizer\forganizer.Tests folder,
and finally 'forganizer' to all the files in the \\\network_drive\share\folder\forganizer\forganizer folder, so I can easily discern all of those files.
I also added a 'visual_studio' category that include .csproj, .sln and .suo extensions, as well as a documents and images category.
So now I want to find all the Visual Studio related files in forganizer; all I need to do is click on 'visual_studio' in the categories, and 'forganizer' in the tags section and I get the files I am interested in:
Think of it now as "showing all the .csproj, .sln and .suo files with the forganizer tag"
Notice that in the upper right, 'and' has a box around it, you can also choose 'or' and it will be a broader search.
Say I clicked the 'or' link and then clicked the 'wallpaper' tag and 'images' as well, now forganizer would be showing
"showing all the .csproj, .sln, .suo, .png, .jpg and .jpeg files with the forganizer tag OR the wallpaper tag"
You will also see that each cloud (tags/extensions/categories) will be broken into 2 parts, the active (green) links and the inactive (grey) links.
The active links are files that are showing in the search right now, the inactive ones are things you can add to the search that will broaden it; if you have 'and' picked in the tag section, you will not see and inactive tags, as that wouldn't make sense.
remember, this is all unobtrusive
This never actually does anything with the files, deleting only deleted the reference, the files will still be there! This is just a layer on top to help sort/search.
I hope this is interesting to someone out there, if not, it was great to help learn MVC and some other great technologies.