Alexander Haneng
Feb 14, 2012
  7392
(4 votes)

EPiFastUpload: Cross browser drag and drop file upload in EPiServer CMS 6

A cross browser solution to uploading multiple files has been high on my wish list for many years now. And now I can finally present the solution (although as an early beta).

 

The problem

The problem with the built in multiple file upload in EPiServer is that in only works in Internet Explorer. Oh and it has to be 32-bit… and you need to install an Active X control…  Argh…

 

Plupload to the rescue!

The people who made TinyMCE (the WYSWIG editor in EPiServer CMS) has also made a great open source tool called Plupload. It uses all kinds of fancy tricks (HTML5, Flash, Google Gears etc.) to provide multiple file upload in all kinds of browsers.

 

A long story short

To make a long story short it all started with Ruwen Jin who created ​Aurumio.EPiServer.Integration.PlupLoad, an EPiServer module that integrated Plupload. Sadly it was poorly documented and had a few problems (especially with chunked uploads). Sveinung Myrlid at EPiServer Norway took the best parts of the module and made Plupload work with EPiServer Relate. We happened to meet at lunch one day and we started discussing how cool it would be to get this working 100% in EPiServer CMS.  My colleague Sigve Fast and I got some code and some important pointers from Sveinung, and soon we had a PoC. After a bit of clean up and refactoring we ended up with EPiFastUpload!

 

What does it do?

image

 

When you install the module you will get an extra button next to the normal “file upload” button:

image

 

When you click the new upload button a dialog box opens. Here you can drag and drop files from your computer and click the “Start Upload” button. After the upload has finished click the OK button and the File Manager file list is refreshed showing you the new files.

 

image

 

Update:

EPiFastUpload is now stable and in version 1.0.

 

 

Download

You can download the latest version from the EPiCode page or from EPiServer Nuget

 

 

Posted by

Feb 14, 2012

Comments

Magnus Rahl
Magnus Rahl Feb 14, 2012 11:11 AM

Nice!

Mads Storm Hansen
Mads Storm Hansen Feb 14, 2012 01:51 PM

This will make a lot of people very happy :-)

Feb 14, 2012 03:12 PM

Nicely done!

Joshua Folkerts
Joshua Folkerts Feb 15, 2012 05:25 AM

Fantastic! Nice Work

Hampus Persson
Hampus Persson Feb 15, 2012 11:44 AM

Really good work! Thanks

Feb 15, 2012 07:37 PM

Another best seller! /me like!

Feb 17, 2012 05:36 PM

Very nice!!!

tym.lawrence@netcat.com.au
tym.lawrence@netcat.com.au Feb 25, 2012 01:28 PM

I'd be keen to see this become a production quality code release, as bulk uploading is an often requested feature on non-IE browsers.

Mar 9, 2012 03:15 PM

EPiFastUpload 1.0 released today. Get it from the EPiFastUpload page on EPiCode or from the EPiServer Nuget feed.

Lise Engmo Eggum
Lise Engmo Eggum Aug 6, 2012 02:37 PM

This looks great! Do you know if it'll work with cms 7?

Please login to comment.
Latest blogs
Optimizely SendGrid SMTP host is deprecated

SendGrid is a services for sending email that is included in Optimizely DXP. Previously smtp.episerver.net was the recommended SMTP server to use,...

Tomas Hensrud Gulla | Dec 4, 2022 | Syndicated blog

Hosting Optimizely CMS 12 on Docker Engine

Since Optimizely CMS can now be deployed as a Docker container, here is a demonstration of building, running and scaling an Optimizely CMS 12 site ...

Stefan Holm Olsen | Dec 4, 2022 | Syndicated blog

How to use CacheTagHelper with content areas in Optimizely CMS 12

I might be going out on a limb here - if you have a better solution, feel very free to share it!  Upgrading your Optimizely web application from .N...

Andreas J | Dec 2, 2022

The 1001st Piece in your 1000 Piece Puzzle: .NET Default Interface Functions

I was recently working with a client who wanted a reasonably large subsystem added to Optimizely that would add automated management to their...

Greg J | Nov 28, 2022 | Syndicated blog