Project Description
QtFile is a web based file browser, which intends to provide a friendly interface for your users to manage their own files and folders on your web site.

It provides a powerful, reliable and easy web file management with lots of cool features:
  • Membership based, every user has their own files, folders and privileges;
  • Easy theming, the default theme is based on jQuery UI Theme Framework, which can be simply customized by rolling your theme;
  • Ajax everything;
  • Restrict upload files by size, extensions and your criterias;
  • File details and image preview;
  • File type specified icons;
  • And much more coming soon...

QtFile Snapshot

QtFile SnapshotQtFile Snapshot

Try it now.

Browser compliant::
  • JS works under IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+ and Chrome;
  • The default theme has been tested under IE 7.0+, FF 3.0, Safari 4 and Chrome 2.

  • Download the latest release of QtFile from CodePlex;
  • Copy dist/bin/QtFile.dll and ASP.NET MVC Futures (for rendering file manager) to bin/ directory of your MVC application;
  • Copy all files under dist/views/ to Views directory of your MVC application;
  • Configure QtFile in web.config:
    • Define a configuration section for QtFile under <configSections/> element:
        <!-- Config section for qtfile -->
        <section name="qtfile" type="QtFile.Configuration.QtFileConfig, QtFile"/>
  • Add your settings:
		Configuration for QtFile.
		defaultQuota: disk space quota in bytes, required;
		defaultMaxSizePerFile: maximum allowed size for single upload file in bytes, required;
		defaultMaxFolders: maximum number of folders for a user, required;
		defaultMaxFiles: maximum number of files for a user, required.
	<qtfile defaultQuota="10485760" defaultMaxSizePerFile="1048576"
		defaultMaxFolders="10" defaultMaxFiles="20">
		<!-- Extensions allowed for upload -->
			<add extension=".jpg" />
			<add extension=".png" />
			<add extension=".bmp" />
			<add extension=".gif" />
  • For user specified settings, please refer to the web.config of samples.
  • Get your customized UI Theme and copy dist/css/qtfile/ and dist/js/jquery.qtfile.js to your MVC application;
  • In the page containing the file manager, add reference to the style sheets, and JS as well;
	<!-- Add your custom jquery-ui css here -->
	<link href="your_path/jquery-ui-1.7.custom.css" rel="stylesheet" type="text/css" />
	<!-- Default theme, based on the above juqery-ui styles -->
	<link href="your_path/qtfile/default/default.css" rel="stylesheet" type="text/css" />
	<!-- Reference to jquery -->
	<script type="text/javascript" src="your_path/jquery-1.3.2.js"></script>
	<!-- Reference to QtFile script -->
	<script type="text/javascript" src="your_path/jquery.qtfile.js"></script>
  • Render the file manager, and there you go.
	<!-- Render QtFile file manager -->
	<% Html.RenderAction<QtFile.Controllers.UserFileController>(c => c.FileManager(null)); %>
QtFile Snapshot

P.S. Every thing needed to setup QtFile can be found in reference/ directory of the release.

Last edited Mar 23, 2009 at 5:26 PM by fszlin, version 6