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.
This is awesome. I've been looking for something similar. Quickly add a bit more functionality (photo resize, link it to twitter, add comments, etc...) before other sites copy your idea.
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).
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.
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/
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.
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.
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.
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).
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.
- 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
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").
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 :)
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?
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.
Bah, instead of running my own app instance, do you mind if I make a Chrome extension on top of it, and you can push the code you like back into the running version?
Meta-question: if a Chrome extension uses significant server-side resources, should one ask the site host first? (legally, I think the answer is "no")
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?
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?
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.
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.
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.
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.)
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).
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.
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.
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).
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.
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.
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.
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.
I'd also pay, with one pony request: the ability to brand the experience so that I had my company's logo in the bottom right (for example) and URL mapping (perhaps just to a subdomain).
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.
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.
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