This is a completed demo of a drag-and-drop upload box. This particular one integrates with Amazon's S3 web service. Feel free to use it, and I would appreciate it if you linked your work to this repo or my portfolio:
perrymerrity.com
:]
This demo contains the following features:
- Browseer is blocked from opening up the image when dropped anywhere (including outsidee of the dropzone becuase it was annoying me and because good UX).
- On
dragoveran overlay with an animated gif appears (also because good UX). - On
dropthe broswer gets the image data and stores the local file as a thumbnail. - Thumbnails have a checkered background to look pretty.
- Thumbnails can be removed
- Currently only accepts JP[E]G and PNG image file types. Anything else will be rejected.
- Files over 2MB will also be rejected.
You can find a demo here (coming soon)
I removed my personal S3 credentials for obvious reasons. This is also tailored to how my system handles the signature and policy required to post to S3. If you want to stick wtih the original functionality you'll need to do the following:
- Tweak the AJAX call to retrieve your policy/signature
- Add your
AWSAccessKeyIdto the variables3Keyins3.jseither in the script or dynamically (mine was just directly in the script). - Update the URL referencing the S3 bucket you will be uploading to. It is at the end of each function
uploadDragToS3anduploadToS3. - Finally, look at the
conditionsobject and update the fieldbucketto match the one you will be uploading to
Currently unaware of any bugs, but I will update this as I come across any. Feel free to submit issues and I'll update it.
It took a LOT to build this. If you just want to use this as a basis, but still need help here's what I found useful: