March 2011 Entries

SlickUpload 6 Beta

We've just released the SlickUpload 6 beta. You can check out the updated SlickUpload 6 demo page or download the SlickUpload 6 beta package.

The main goal of the SlickUpload 6 beta release was to add the WebForms and MVC API, in addition to the MVC API that was released with the SlickUpload 6 alpha. This release meets all of those goals and adds Razor support as well. This means you can use any of the following API's to create, render, and interact with SlickUpload

  • WebForms controls
  • WebForms controls on MVC
  • MVC helpers
  • MVC helpers on Razor
  • Javascript

SlickUpload 6 also fully supports ASP.NET AJAX and ASP.NET MVC AJAX, although there are no such samples as of yet.

We expect a final SlickUpload 6 RTM in the next month or so. In the meantime, we'll be spending lots of time testing, generating reams of documentation and howto's, and revamping krystalware.com to handle all the new content.

If you have any questions or suggestions, don't hesitate to contact me at chrish@krystalware.com.

Multiple Selection and Drag/Drop - SlickUpload 6

When SlickUpload 5 was introduced, no browsers supported multiple selection or file drag/drop natively. The only solution for these was to use an often buggy ActiveX/Flash/Java plugin. Recently, browsers have started implementing multiple file selection with the HTML5 file API standard. Currently, the recent versions of Chrome, Firefox, and Safari all support multiple file selection and file drag/drop.

Implementing multi-select and drag/drop was a big goal of our development effort for SlickUpload 6. To support this, we refactored SlickUpload to upload each file individually, whether it was multi-selected or not. This means that you can do GMail style file-by-file uploads in all browsers. SlickUpload implements multiselection in browsers that support the HTML5 API, with single selection as a fallback. This also means that each file is treated separately when calculating maximum upload size. Before, you could only upload a total of 2GB-4GB (depending on IIS version). Now, you can upload 2GB-4GB per file (depending on IIS version), with an unlimited total upload size.

Multiple file selection
Multiple file selection
File drag/drop
File drag/drop

We also implemented client side file size detection for all browsers. In HTML5 compliant browsers, this uses the file size attributes to immediately display file size. For non-compliant browsers, SlickUpload will ping the server to determine file size. The file isn't uploaded, but the file size is detected. This means you can also validate file size client side before an upload.

GMail style individual file upload
GMail style individual file upload

SlickUpload 6 Configuration

With SlickUpload 6, we've simplified the configuration while making it more powerful. One of our main areas of focus was making it easy to create multiple upload pages with different upload configurations.

First off, we've removed a couple of things:

  • The SlickUpload HttpHandler has been removed. It's now handled by the SlickUpload module.
  • The maxRequestLength and executionTimeout settings have been moved into the SlickUpload configuration. You don't need to use the httpRuntime tag anymore. If you're using IIS7, you do still need to set maxAllowedContentLength on the system.webServer/security/requestFiltering/requestLimits tag.
  • SlickUpload handling is now off by default except for the SlickUpload.axd handler. This means that SlickUpload won't interfere with other normal uploads on your site

Then, we added the concept of upload profiles. An upload profile is a bundle of upload settings, such as file storage location, max upload size, etc. You can then specify the upload profile to use for any SlickUpload upload control. This allows you to easily have multiple pages uploading to different locations, or even to different providers. For example, one page could upload to disk, and one could upload to a SQL database.

Here's an example web.config configured with SlickUpload 6 using all of these features:

<?xml version="1.0"?>
<
configuration>
  <
configSections>
    <
section name="slickUpload" type="Krystalware.SlickUpload.Configuration.SlickUploadSection, Krystalware.SlickUpload" requirePermission="false" />
  </
configSections>
  <
slickUpload>
   
<uploadProfiles defaultProfile="default">
      <
add name="default" maxRequestLength="1020000" executionTimeout="3600">
        <
uploadStreamProvider type="File" location="~/Files" existingAction="Overwrite" />
      </
add>
    </
uploadProfiles>
  </
slickUpload>
  <
system.web>
    <
httpModules>
      <
add name="SlickUploadModule" type="Krystalware.SlickUpload.Web.SlickUploadModule, Krystalware.SlickUpload" />
    </
httpModules>
  </
system.web>
  <
system.webServer>
    <
validation validateIntegratedModeConfiguration="false" />
    <
modules>
      <
add name="SlickUploadModule" type="Krystalware.SlickUpload.Web.SlickUploadModule, Krystalware.SlickUpload" preCondition="managedHandler" />
    </
modules>
  </
system.webServer>

  <!-- Enable large requests to SlickUpload's handler -->
  <
location path="SlickUpload.axd">
    <
system.webServer>
      <
security>
        <
requestFiltering>
          <
requestLimits maxAllowedContentLength="2072576000" />
        </
requestFiltering>
      </security>
    </
system.webServer>
  </
location>
</
configuration>

If you've used SlickUpload before, you'll notice that this is much simpler and easier to configure. If you're new to SlickUpload, enjoy the straightforward configuration.

Note the upload profile above with name="default". This configuration only has one upload profile, so upload controls will use it by default. To add an additional upload profile, you would just copy/paste the <add> tag, configure it as you wish, and name it a different name.