Find a post...

DNN-Connect Blogs

Learning Razor X - Special Session - Drag-and-drop Upload with blueimp Gallery

As a Q3 special Raphael just published a new gallery App based on blueimp, and we pimped it up with neat features like drag-and-drop file upload (in Razor) and optional metadata. In this post, I'll teach you how to do this too!

The blueimp Gallery

is a simple, elegant, touch-supporting JS-gallery.  It's open-source (so you can look inside) and it's MIT-licensed, so you can do just about anything you want without worrying about licenses or cost. Here some basic screenshots:

...and the lightbox

...and touch support...

...and here is the upload drag-target in edit mode...

Every gallery wants drag-and-drop upload, but many have difficulties getting started. So now it's super easy! 

Let's see it in action: 100-Second-Demo!

...and here you can see a live-demo and try out the touch-capabilities...

Preparation: Install Everything

Install 2sxc and everything just like in Post #2 in learning Razor, but in this case:

  • Make sure you're using at least the version 6.3.3 of 2sxc because it fixes a search-bug
  • Install the blueimp Gallery App for this lesson from the App-Catalog or the forge.

If you need help, just watch the video of post #2 in this series.

Now let's look at the upload code!

This is the heart of the upload part. The rest you'll just have to try out with the App...

now the same code with some extra notes

Your turn!

So just go ahead and give it a try. Install the app, mess around a bit and re-use whatever you can!
...that's the point of open-source :) 

Loving open-source in Switzerland,
Daniel, Raphael and Benjamin 

Daniel Mettler grew up in the jungles of Indonesia and is founder and CEO of 2sic internet solutions in Switzerland and Liechtenstein, an 20-head web specialist with over 600 DNN projects since 1999. He is also chief architect of 2sxc (2SexyContent - see forge), an open source module for creating attractive content and DNN Apps.

Daniel Mettler learned programming with the bible translation computer of his parents, deep in the jungles of Indonesia. Since he was only 12 years old at that time and the BIOS only had a version of BASICA, that's what got him started. With 16 he went back to Switzerland and learned German and basic city-survival skills. Equipped with this know-how he founded 2sic internet solutions in 1999 which was focused on web solutions on the Microsoft platform. After a few self-developed CMSs 2sic switched to DNN in 2003 and has been one of the largest partners (17 employees, 700+ projects) in Europe. Daniel is also the chief architect behind the open source 2sxc, a strong promoter of standardization (boostrap, patterns, AngularJS, checklists, etc.) and loves to eat anything - dead or alive. His motto: if the natives eat it, it game.

Hosting liberally provided by

Philipp Becker 6011 7
Geoff Barlow 542 4
DNN-Connect 431 6
Peter Donker 5092 30
Christopher Hammond 683 2
Olivier Jooris 418 1
Daniel Mettler 12054 88
Clint Patterson 1 1
Jos Richters 65 1
James Rosewell 327 2
Will Strohl 1550 27
Ernst Peter Tamminga 438 4
Barry Waluszko 2801 2
Declan Ward 467 1
Gifford Watkins 722 9
Torsten Weggen 2792 3