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

Geoff Barlow 559 4
DNN-Connect 433 6
Peter Donker 5275 31
Christopher Hammond 706 2
Olivier Jooris 426 1
Daniel Mettler 12129 88
Clint Patterson 1 1
Jos Richters 65 1
James Rosewell 337 2
Will Strohl 1558 27
Ernst Peter Tamminga 444 4
Barry Waluszko 3004 2
Declan Ward 553 1
Gifford Watkins 728 9
Torsten Weggen 2962 3