

Review my weekend HTML5 project: DropMocks - gmurphy
http://www.dropmocks.com/
I had an itch to scratch around making it easy to share sets of images with other designers and thought that I could use the new drag and drop file support to solve it. DropMocks was the result after a quick weekend of hacking.<p>It's built on an App Engine backend, and the uploader relies on the PushState and the File API from HTML5, so it only currently works in Chrome 6 and Firefox 4*; supporting other browsers would be the first post-hack step if I were to take it further.<p>An example gallery can be found here: http://www.dropmocks.com/mSER
======
gmurphy
I didn't realize submission text would be eaten for external links, so here it
is:

I had an itch to scratch around making it easy to share sets of images with
other designers and thought that I could use the new drag and drop file
support to solve it. DropMocks was the result after a quick weekend of
hacking.

It's built on a simple Python App Engine backend, and the uploader relies on
the PushState, File, and FileReader APIs (I realize that some of these aren't
strictly HTML5), so uploads currently only work in Chrome 6+ and Firefox 3.6+;
supporting other browsers would be the first post-hack step if I were to take
it further.

An example gallery can be found here, it should be viewable in all modern
browsers: <http://www.dropmocks.com/mSER>

~~~
dabent
Zod approves: <http://www.dropmocks.com/mpUa>

Seriously, what a great project. If this is just a weekend project and a start
for HTML5, I can't wait to see (and build) what's next.

~~~
theoden
Nice project. Sharing some great images here:

<http://www.dropmocks.com/mtfA>

------
Sephr
Why are you browser sniffing when you can easily do feature detection for the
HTML5 File API (`"FileReader" in self`) and Drag and Drop API (`"ondrag" in
document`)?

The only time browser sniffing is ever appropriate is when you _excluding_ a
specific browser due to a bug, and there is no unobtrusive way to do so (e.g.
a console.log bug that can't be tested without calling console.log() at least
once).

~~~
gmurphy
You're right - it would've been very easy to replace the browser detect with a
feature detect once I knew what features I'd have settled on, at the time
though compatibility was a distant second to proving the concept, so I lazily
didn't bother.

I have spent many years of my life working on a browser that is frequently
hurt by agent detection, so I'm well aware of the issues with the approach I
took; and while I do think that there are a broad range of circumstances where
it is appropriate, this is probably not one of them, so I accept your
criticism and and pout into my bowl of ice-cream :)

Edit: I added your suggested code and am running through the tests now,
thanks.

~~~
po
Also you may want to check out Modernizr if you are going to be bleeding edge:

<http://www.modernizr.com/>

------
wccrawford
Wow, I have to say, that's pretty nice. It doesn't like me trying to drag
images around that are already there. I expected it to let me re-order them.

But for a 'weekend' project, that's pretty impressive.

~~~
sachinag
I was able to re-order mine. The UX isn't obvious that you can, but it works
just the way I thought it would by drag-and-drop.

~~~
wccrawford
When I try to drag existing images, I get an error that (long string of
characters) is not a valid image.

------
daleharvey
didnt pass my browser sniffer, firefox 3.6 on ubuntu, but I know that supports
drag and drop uploads, I wrote an image uploader the other week
<http://dropup.net/>

~~~
gmurphy
That's strange - my Firefox 3.6.6 on Ubuntu works with it OK. I wonder if the
browser detect script I'm using is having issues, as another poster said that
Chromium was failing, where it doesn't on my machines :\

Cool domain name; wish I'd thought of something that short.

------
TamDenholm
I love this, the drag especially, i've never seen the "just drag" file upload
thing before without flash/java. It'd be really nice to see a drag file upload
replace the typical file form input.

Excellent job.

~~~
patrickaljord
Gmail had it for almost a year.

~~~
bd
Gmail uses Flash (Adblock shows block Flash thingie).

\----

Edit: upon further inspection, it seems Gmail indeed does use Flash [1], just
for a different part of the upload process (progress bar?).

Drag and drop is only supported in Chrome and Firefox [2], so I suppose this
is HTML5.

[1] <https://mail.google.com/mail/uploader/uploaderapi2.swf>

[2] [http://gmailblog.blogspot.com/2010/04/drag-and-drop-
attachme...](http://gmailblog.blogspot.com/2010/04/drag-and-drop-attachments-
onto-messages.html)

~~~
carbon8
I don't think so. Maybe it falls back to flash on some browsers, but it works
just fine on Chrome with flashblock enabled.

------
mgkimsal
pretty slick :)

I created a client-side image shrinker - demo at <http://kimsal.com/shrinker>
\- github at <http://github.com/mgkimsal/jsclientshrinker> Perhaps integrating
this functionality for images that are 'too big' (whatever file size you
decide) would be a nice enhancement? :)

~~~
Blackymetal
definitely i'm gonna try your lib.

~~~
mgkimsal
Cool. Fork on github and send any pull requests. The issues right now are that
it only works with ff3 and chrome. I'd have thought safari would work, but it
doesn't (didn't for me). Some integrated browser detection to offer
transparent reduction for images on compatible browsers would great.

Let me know how it works out for you :)

~~~
boltofblue
I like how it changes the dimension. But converting to PNG is massively
increasing the file size?

"Original file was: 137724 bytes Transmitted size was: 844176 bytes (due to
base64) New file is: 633131 bytes"

~~~
mgkimsal
It might be - not sure it's just a PNG issue, or if it's a canvas flaw, or
what. The system could ideally check the before/after sizes, and only send the
smaller one. Good catch (I think I'd seen that once in testing too).

------
jellisnyc
This is really wonderful. Our design studio is constantly posting PS comps for
clients. We spend a significant amount of time outputting JPGs, building
little galleries, loading the files to our servers, then sharing links to the
designs via Basecamp.

Over the years we've come up with a few clever hacks to speed things up. For
example, we keep our designs in svn and can quickly push updates live to our
servers using a commit hook. But this is all sort of complicated, and I'd much
rather use a web-app like this.

Dropmocks is very close to being the perfect tool for our workflow, and I
suspect many other design/photo studios would feel the same way. A few
features that folks like us would want/need: ability to pw protect galleries,
ability to maintain revisions of designs, commenting (by both designer and
client), and a way to export images to PDF.

Not sure if you'd target Dropmocks for businesses (such as ours), or if you'd
like to have it open to the world and ad-supported. If the former, we're the
kind of people that would sign up.

~~~
JarekS2
Dude - you could really check <http://disqourse.com> \- this app is to help
you get customer ping-pong with mockups etc. easy.

------
leif
Excellent work!

Suggestions:

\- tif not recognized as image, probably other formats as well (someone below
said an image without an extension was rejected, maybe you need a smarter file
rejection algorithm)

\- 900k is kinda small, maybe you should compress on-the-fly

\- UI needs work: I want to leave my mouse in one place and just keep clicking
for more images (I know arrow keys work, and that's great, but consistency is
key), no matter the size or where in the list I am (the ends of the list seem
to break this pretty badly), image sizes shouldn't affect placement, jumping
around the list is hard, maybe instead of or in addition to the "inline" list
representation, you could have a scrolling or static list of thumbnails on top
or bottom

\- the blur is too heavy. I already can't see much of the previous or next
images because the one in front is too big, so why are they so occluded? Tone
it down, maybe desaturate them a little too if you feel like less blur
wouldn't take them enough out of the foreground

------
bobf
I would love to see this integrated via an API into other sites, as it is
definitely the fastest/cleanest image uploading & gallery I've seen to date.
Some probably obvious suggestions: different views, display filesize/type info
when mousing over an image, zoom in/zoom out, paid-users could have subdomains
and gallery names instead of dropmocks.com/XXXX, etc. I envy your sweet design
skills and attention to detail in the implementation (left/right/up/down keys
work to go through the gallery, nice!). I would imagine you're aware, but be
warned that trying to profitably monetize an image hosting site will be hard.
Take a look into the guy who started imgur (mrgrim --
<http://www.reddit.com/user/MrGrim>) for useful insights on image hosting
(assuming that's the route you're looking to take, and not a "YouTube Instant
job offer").

------
uuilly
My favorite part is how well you scoped it for a w/e project and still came
out w/ something useful. Very well done.

------
rokhayakebe
I haven't said wow since Etherpad , I believe. Wow.

------
bobx11
I'm on mac chrome... uploading a hundred or so random pics i saved from
reddit/digg... you are going to end up with the most bizarre collection of
pics from everyone uploading their own strange test pictures.
<http://www.dropmocks.com/m1e4> :)

~~~
bobx11
Simple, works with all the pics even if the upload takes a while. How long
until you run out of s3 storage or have to increase the size of your rackspace
cloud server?

------
weixiyen
For those of you who are interested in a future-proof file drop plugin based
on FileReader(), here you go:

<http://github.com/weixiyen/jquery-filedrop>

------
andreyf
Fucking brilliant! I'd love to hack on this... are you using app engine? Is it
open source?

In particular, you know what would make this rock*10^6? facebook/dropbox
integration.

~~~
gmurphy
I would very much like to have this auto-pull from Dropbox folders; it is
something for another weekend.

I just posted the source: <http://github.com/glenmurphy/dropmocks>

~~~
andreyf
Auto-pull, auto-push, etc.

Also, to my phone. When I take a picture on my phone, I want it to sync to a
dropbox folder.

Also, with facebook. I want each of my picture galleries to sync with a mock
(and, optionally, to a dropbox).

Let's say a mock is synced with both dropbox and facebook. Then adding a file
to the folder locally on a machine, it should push to mock, then from mock to
facebook.

------
Groxx
Very nice visually, and _incredibly_ slick workflow, though it renders pretty
slowly at full size. Poking in the code... are you blurring the images in JS
at every level? Since you're using webkit + mozilla + IE specific CSS, why not
use CSS transforms to do the same thing, but with hardware acceleration? I
haven't done it myself, but I'd assume blur is one of the filters possible,
and I know you can do those transitions.

edit: oh, and you might want to make sure the images in the "back" are
(proportionally?) smaller than the ones in front - if you shrink your window a
lot they're actually bigger.

edit 2:

Gets stuck occasionally, though so far only while loading, and doesn't seem to
respond to any interaction. The drop-down still works though, so it appears
it's not just spinning.

Anyone else, and/or any info I can provide to get you info on why?

~~~
gmurphy
Blur is only possible in IE with filter:blur (and I use it if available) -
I've been bugging people to add CSS blur to WebKit :)

~~~
Groxx
Yeah, if it's not in there, it seems like a rather large oversight. Blur is
_ridiculously_ frequently used, and it's so simple to implement.

In any case, gorgeous work :)

------
arfrank
How are you determining which browsers are compatible with it? It seems like
the best way might be to use modernizr: <http://www.modernizr.com/>. Or are
you using more than just the html5 drag and drop API?

~~~
arfrank
Looking at the code you just posted it looks like this is what you did:

// HAMLET HAMLET HAMLET

function isValidBrowser() {

    
    
      var browser = BrowserDetect.browser;
      var version = BrowserDetect.version;
    
      return (
        (browser == 'Chrome' && version >= 6) ||
        (browser == 'Firefox' && version >= 3.6)
      );
    }

~~~
gmurphy
Yep; I realize this is usually taken to be poor form, though I'm no idealist -
I did it while the APIs I was using were in flux (I flipped through a few
upload techniques), and focused on getting it working right in a few before
expanding to the many.

~~~
arfrank
Makes total sense. It looks great by the way.

------
templaedhel
I like this a lot. Works perfect in FF 3.6.3 (as it should) I too expected to
be able to drag them around, It would be nice if I could just arrange them on
the page like some of the css3 polaroid galleries you see. I will defiantly be
using this.

------
joneath
First off good job (love that people are using HTML5/CSS3). I checked out an
album on my iPad since drag and drop is not supported :(. The transitions were
very jerky. If you want to speed this up, switch from regular css3 transforms
to transform3d. This is a less know fact that regular transforms are not
hardware accelerated (iOS, as well as safari 5, tries to render a box that is
hardware accelerated that the transform runs in which creates the
jerk/flashing content), whereas translate3d is hardware accelerated for the
full page. Mileage may very though since translate3d is very memory heavy.

------
Groxx
A thought, before this potentially spreads far and wide:

 _Should_ we be spreading this? Or might doing so tank your server / storage /
bank account? Do you have any limits in place to protect you?

~~~
abraham
It is running on App Engine so to an extent it will be free.
<http://dropmocks.appspot.com/>

------
spicyj
Please add Safari 5 to the browser sniffer. (It works fine if I change the
User-Agent to "Chrome 6", so presumably it should be included in the list of
browsers that you support.)

~~~
gmurphy
Safari 5, at least on Windows, doesn't support the File and FileReader APIs
which are necessary for the drag and drop uploader. If you've seen otherwise,
please let me know (I love the Safari team, and don't want to be unfair to
them).

Nightly WebKit builds may work.

~~~
spicyj
On the Mac, it works fine.

------
reedlaw
What happens if this becomes wildly popular among casual computer users who
want to share pics with their friends? Any plans on how to monetize it?

------
jaredstenquist
I loved it. My only suggestion is making the non-focused images slightly
opaque. I was left wondering if the severely blurred images were loading.

------
simonista
Transitions are pretty jerky for me, but really great idea. Thanks for open
sourcing the code, I'm excited to see where this goes!

------
arfrank
Did you consider using the new GAE API for image serving? I think it requires
objects to be actual blobstore objects rather than in the datastore as a blob
property, but it does dynamic image thumbnails. It does do dynamic resizing of
picture to a bunch of different sizes, but requires a slightly different
workflow to get pictures into the db.

------
JohnnyBrown
Never have I been so forehead-smacking jealous that I didn't think of
something first. kudos.

------
sathyabhat
This is awesome stuff, great job.

However, I dragged an image ( but did not have any extension) - and it
mentioned that the file is not an image.

I know this is a rare case ( heck what are the odds of me selecting me 1 pic
which does not have an extension!) Anyways, good stuff.

------
edanm
Doesn't work for me. I'm running Chrome 6.0 (beta). I also tried Firefox 3.6.
In both cases I get a "browser not supported" message.

EDIT: Seems the issue has been resolved. It's working for me on both browsers
now.

------
nrbafna
Feature Request: Enable me to upload larger images that you could compress-on-
the-go. It beats the entire simplicity of the system if I have to manually
compress the images to upload them.

------
jbm
I'm on Chrome 6 on Ubuntu. It's telling me that my browser isn't supported.

(Reason #101 why I hate browser sniffing, no one ever gets it right).

Beyond that, I wish you the best of luck, it sounds like something I can use.

------
jhrobert
Simplicity wins. Very nice indeed.

Privacy can be an issue if the secret url leaks. Maybe a visit count/log (to
detect leaks) and a (change) option (to get a new url and close the previous
one).

------
js4all
It has a client side memory/resource leak. After viewing some pictures, the
browser takes several hundred megs.

Its listed under GPU Process in Chromium. I guess it is a Chromium problem.

------
bvi
Well, this sucks. I'm not able to try it out, even with the latest version of
Chrome. Any idea?

<http://i.imgur.com/ZYYUi.png>

~~~
gmurphy
Please try again.

Cause: In order to make the open source distribution cleaner, I moved the
app.yaml into the same directory as the other files. It was previously in the
directory above, so my static_dir declaration went from source/files to
./files; the local App Engine development server handled the ./ notation fine,
but the deployed one did not.

------
jaybol
This is really cool, I dropped 66 images in there and it went very
quickly...I'm always jealous of the Weekend project that some people pull off.
Nicely done.

------
cubtastic71
You can forget about IE most of the time, but Safari and other version of
FireFox makes it kinda hard. Good start and hope to see improvements...

------
js4all
I am really impressed. Clean and simple to use. I can't believe that this is a
weekend project.

I am currently studying your code. Thanks for making it available.

~~~
amitvjtimub
These kind of weekend projects make me feel insignificant. But then I see that
author is on Chrome UI team so he is familiar with technology required (App
Engine, Chrome HTML5).

Without that context it is just magic(and even then idea and implementation is
great). But I think there must be something many of us can do in a weekend
that will look like magic. But it was possible because of months/years of
experience.

------
alexcharlie
The images left and right of the current one distract from what should be the
focus. Doesn't work well for sharing small image files.

------
gigawatt
Awesome. Only comment I have is that some way to tell how many images there
are and where you are in the sequence would be useful.

------
gcanyon
Great idea and execution, definitely needs better security. I was able to find
several other galleries just by poking urls

------
BonsaiDen
Firefox 4b7pre is still loading up the image file after I dropped in on the
page, so in fact it doesn't work at all.

------
daok
Very great! Love the easy way to use it without having to log in to try.
Simple approach. Keep working on the idea.

------
olalonde
Amazing, great user experience. One detail though, wouldn't it be nice to have
less blur on the thumbnails?

------
sidyadav
Amazing idea and execution. Great work.

------
tzury
Great Job.

Where to go from now, launching image service (flickr) or making this open
source (e.g. light box) - up to you

------
atomical
My pictures were too big. > 900k.

------
alanh
Love the concept.

Your shadows look very odd with the very horizontal screenshots I dragged in
to test it.

------
barmstrong
Love it! Nice work.

What did you write it in?

------
muon
Like it because of simplicity, I like this more than flickr slideshow.

------
Tichy
Error: image exceeds 900KB

Having to resize images before the upload is a deal breaker.

------
johnnytee
you should use the blobstore api to break the 1MB limit. Also check out the
new high performance image serving service @ <http://j.mp/9UvNyZ>

cool project

------
camwest
I'd like to see read only access on older browsers and the iPad.

------
yatsyk
Great application!

Small feature request: link to particular image with #

------
MathieuGosselin
the biggest ideas are the smallest stuffs like that. This is deadly useful!
Wish you good luck with this idea!

------
eccp
Looks great

------
wmwong
This is really awesome!

------
c0un7d0wn
drag+drop not working on firefox 4. It does work with gmail.

------
alexknight
This is beautiful.

------
waratuman
Dude, that is sick

------
arsh
hi i find it kind of slow...

------
marknutter
Weekend?

------
clistctrl
I'd pay you $24 a year (what i currently give to flikr) if you can compress my
large jpg images into something smaller (currently it seems to be maxed at
900k) another one of my favorite features of Flikr is the ability to view exif
data.

Love the project!

~~~
gmurphy
Would you be OK with resizing? App Engine has a 1MB limit, and I could get
around that by splitting the file on the client, but I could also just do a
resize in JS with canvas/ImageData.

~~~
andymoe
You should probably be using the Blobstore API if you are not already.

[http://code.google.com/appengine/docs/python/blobstore/overv...](http://code.google.com/appengine/docs/python/blobstore/overview.html)

It takes a bit more work but you could store the original file since it has a
2GB limit. You can only fetch 1MB at a time but it should still be doable.

~~~
derekdahmer
Another option is to use boto to pass the upload along to S3 and just store
the link path in app engine.

------
pshirishreddy
does't work on 6.0.472.53 chrome.

~~~
pshirishreddy
using linux flavor - ubuntu 10.04

~~~
wmwong
Also doesn't work for 6.0.472.59 beta on Ubuntu 10.04. I get the browsers
detection error message.

Edit: Works now! Thanks.

