Learn More





DNN Community Blog

The Community Blog is a personal opinion of community members and by no means the official standpoint of DNN Corp or DNN Platform. This is a place to express personal thoughts about DNNPlatform, the community and its ecosystem. Do you have useful information that you would like to share with the DNN Community in a featured article or blog? If so, please contact .

The use of the Community Blog is covered by our Community Blog Guidelines - please read before commenting or posting.

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.


Armand Datema
Looks good I will have to play with this. Will we see mass image upload in the admin for an image type as well?
Armand Datema Friday, September 26, 2014 3:02 AM (link)
Joe Brinkman
Very nice Daniel. Love the Razor series.
Joe Brinkman Friday, September 26, 2014 10:33 AM (link)

Comment Form

Only registered users may post comments.


2sic Daniel Mettler (124)
Aderson Oliveira (15)
Alec Whittington (11)
Alex Shirley (10)
Andrew Nurse (30)
Anthony Glenwright (5)
Antonio Chagoury (28)
Ash Prasad (21)
Ben Schmidt (1)
Benjamin Hermann (25)
Benoit Sarton (9)
Beth Firebaugh (12)
Bill Walker (36)
Bob Kruger (5)
Brian Dukes (2)
Brice Snow (1)
Bruce Chapman (20)
Bryan Andrews (1)
cathal connolly (55)
Charles Nurse (163)
Chris Hammond (203)
Chris Paterra (55)
Clinton Patterson (28)
Cuong Dang (21)
Daniel Bartholomew (2)
Dave Buckner (2)
David Poindexter (3)
David Rodriguez (2)
Doug Howell (11)
Erik van Ballegoij (30)
Ernst Peter Tamminga (74)
Geoff Barlow (6)
Gifford Watkins (3)
Gilles Le Pigocher (3)
Ian Robinson (7)
Israel Martinez (17)
Jan Blomquist (2)
Jan Jonas (3)
Jaspreet Bhatia (1)
Jenni Merrifield (6)
Joe Brinkman (269)
John Mitchell (1)
Jon Henning (14)
Jonathan Sheely (4)
Jordan Coopersmith (1)
Joseph Craig (2)
Kan Ma (1)
Keivan Beigi (3)
Ken Grierson (10)
Kevin Schreiner (6)
Leigh Pointer (31)
Lorraine Young (60)
Malik Khan (1)
Matthias Schlomann (15)
Mauricio Márquez (5)
Michael Doxsey (7)
Michael Tobisch (3)
Michael Washington (202)
Mike Horton (19)
Mitchel Sellers (28)
Nathan Rover (3)
Navin V Nagiah (14)
Néstor Sánchez (31)
Nik Kalyani (14)
Peter Donker (52)
Philip Beadle (135)
Philipp Becker (4)
Richard Dumas (22)
Robert J Collins (5)
Roger Selwyn (8)
Ruben Lopez (1)
Ryan Martinez (1)
Salar Golestanian (4)
Sanjay Mehrotra (9)
Scott McCulloch (1)
Scott S (11)
Scott Wilkinson (3)
Scott Willhite (97)
Sebastian Leupold (80)
Shaun Walker (237)
Shawn Mehaffie (17)
Stefan Cullmann (12)
Stefan Kamphuis (12)
Steve Fabian (31)
Timo Breumelhof (24)
Tony Henrich (3)
Torsten Weggen (2)
Vicenç Masanas (27)
Vincent Nguyen (3)
Vitaly Kozadayev (6)
Will Morgenweck (37)
Will Strohl (163)
William Severance (5)
Try Evoq
For Free
Start Free Trial
a Demo
See Evoq Live
Need More Information?