The primary purpose of Droplet is to make a directory (folder) on your web server behave like a public 'dropbox'. Without requiring any specialist software, website users can use their normal web browser to drag and drop (or select) files in Droplet. Some clever code within Droplet will validate and upload these files to the designated directory. From here you can automatically reuse the files in your website (like within ProGallery or Playlister). Alternatively you can download the files using your preferred FTP software or website file manager.

Droplet is built on the popular Dropzone.js plugin. We coded a smart PHP backend which will process file uploads efficiently. The PHP backend will also make the file names web safe (swapping spaces and tabs for hyphens) and provides some extended options for choosing how uploaded files are renamed. End users cannot view the contents of your uploads directory, nor can they delete files files - it's purely a one-way dropbox system.

Important: Droplet requires a minimum of RapidWeaver 6 / Stacks 3 and a web server running PHP 5.6 or later with the file_uploads function enabled. This stack will not install or work properly with older versions of Stacks or RapidWeaver.

Example

Here is an example of Droplet. To test it, try dragging and dropping a file onto the drop zone or selecting a file on your computer. This example is using the default settings (file types and upload limits are fully-customisable in the stack settings).

Upload Files

Drag and drop files here or click to select files on your computer.
Only JPG, PNG and GIF files less-than 2MB are supported.

Setup

To get Droplet working on your website, follow these instructions carefully:
  1. Once installed into RapidWeaver and Stacks, open your stacks library. Drag and drop a copy of Droplet into your webpage
  2. If you don't already have a directory on your web server to store uploaded files within, go-ahead and create one now in your FTP software
  3. Customise any of the messages or style settings presented in the Droplet settings. Information about directory paths is shown below
  4. Export or publish your website to a web server with PHP support (Droplet is also compatible with MAMP if you wish to test it offline first)
  5. Test the uploading of files to your server, to make sure everything works as expected (the files should appear inside your designated directory).

You should only include a maximum of one Droplet stack per-page. It's wise not to mix Droplet stacks with other complicated stacks (like animation stacks) as these may change the layering of the dropzone and prevent users adding files. Droplet cannot be integrated with other form stacks or addons - it is a standalone file uploader.

The Disable Uploads option disables all file uploads. Droplet will still look and function as normal, but no files will actually get uploaded. This is a useful setting if you are testing Droplet (as per our live example above) or you need to temporarily disable file uploads. Obviously it is worth putting a message somewhere on the Droplet page to tell your users that uploads have been disabled! If you want to disable uploads at an exact time, simply place Droplet inside one of our free Expiry stacks.

Browser Compatibility

Droplet is compatible with all newer web browsers, including IE10, IE11, Edge, Safari, Chrome, Opera and Firefox. Android support is excellent on all newer smartphones and tablets. iOS support is restricted to iOS 8.0.1 and above, when Apple added support for limited file browsing. No support is offered for older versions of Internet Explorer or iOS.

Does your web server support PHP and file uploads?

Droplet uses PHP to process the uploading of files, server-side. This stack will only function on a web server that is running PHP 5.6 or greater. Additionally you may need to check that your web server supports the uploading of files (some hosting companies disable this option). The easiest way to check is to login to your hosting account via FTP and open the php.ini file. Check that file_uploads = On exists. If you cannot find the php.ini file or encounter other problems with PHP, contact your web hosting company for support.

Directory Path

You can easily change the location files are uploaded to, by changing the Directory Path setting, in the Droplet options. You should always use a relative path and link to a directory that is stored within the same domain name that Droplet is running on. Use ../ to denote each step back-up to your root domain (from the page hosting Droplet) and then specify the path down to the directory e.g. ../../../files/user-submitted-files/. If for example your page hosting Droplet is at http://example.com/events/share-pictures/ and your uploads directory is at http://example.com/files/user-uploads/, then you would enter ../../files/user-uploads/ as the relative directory path. You can use a directory that already contains files.

File Naming

You'll notice in the Droplet settings that File Naming can be adjusted. This gives you greater control over how uploaded files are managed.
  • Convert to web safe is the default setting. This will preserve file names as they are, but will replace tabs or spaces with a hyphen (-). This is the best setting to use if you need to reuse the filenames in other stacks (like Playlister or ProGallery). If a file is uploaded that conflicts a file of the same name, then the oldest file is deleted and replaced with the new file.
  • Convert to web safe and date stamp does the same as above, except the time of the upload is prepended to the file name. The time is measured in the number of seconds since the Unix Epoch (January 1 1970 00:00:00 GMT). This file naming option removes the risk of newer files overwriting older files.
  • Randomised will completely rename the uploaded file and give it a unique name / number.

Security

Security is our number one priority. The ability for strangers to upload files to your web server obviously increases the risk that Droplet or similar plugins could be used maliciously to compromise your websites or data. We have taken steps to reinforce the security of Droplet and follow established / recommend best practices for file uploads. For example, the location of your uploads folder is never disclosed in the source code and uploads only work if Javascript is enabled within a users web browser.

Additionally there are some important things you should action when using Droplet in your own projects:
  • Use the Accepted Files option to specify exactly what file types are permitted to be uploaded. Typically you should only list common image file types, documents and .zip compressed files. Never allow executable files, Flash, scripting or other code to be uploaded.
  • Adjust the Max. Files setting to restrict how many files a user can upload. This will help thwart DoS attacks, and block a sudden spike of file uploads.
  • Set a Max. File Size limit. This will prevent users uploading huge files (like video) which might cause problems. Most web servers already set a file upload limit of 2MB and this is the default we use in Droplet too. Ask your web hosting company if you are unsure what the upload limit is currently set to on your server.
  • Does your uploads folder need full read / write permissions? If the files being uploaded do not need to be viewed by anyone else or reused again in the website (like within a slideshow), then you can disable read permissions in your FTP software, on the uploads directory. Upload directories certainly do not need execute permissions either.
  • If you don't care for how the uploaded files are named, set the File Naming option in Droplet to Randomised, for maximum security. This action will change file names to a long randomised number. A potential hacker would be unable to put executable code in the file name, and would be unable to execute any scripts uploaded (because they would not be able to see or know what the files have been renamed to).
  • Install CloudFlare to encrypt your website and block potential risks. CloudFlare does a good job of blocking IP addresses from computers that are known to be going-around and hacking websites.
  • If the Droplet stack does not need to be on a public-facing page, put it on a hidden page or behind a password protected directory. Even our Lookup stack can be used for this job.
  • Ensure that your web hosting account has backups and virus scanning enabled.
 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.
Bookmark or share this page
Baidu 百度
Blogger
Delicious
Digg
Facebook
Google+
LinkedIn
LiveJournal
MySpace
Одноклассники
Reddit
Renren 人人网
StumbleUpon
Tumblr
Twitter
ВКонтакте
Weibo 微博
XING
Contact Us
Email This Page
Print This Page
PS: This bookmarking and sharing popup is powered using our brilliant SocialPopup stack!

Cookies

Like a lot of websites, Stacks4Stacks uses cookies to help enhance your browsing experience and handle things like purchases. We take your privacy seriously, and welcome you to freely opt-out of nonessential cookies at any time by reviewing your preferences on this page.