A file drop box can be usfull for businesses that require a way for clients to upload files.
This can be created in a secure folder which requires a username and password to access it.
This example uses several jQuery plugins to create an easy to use file upload system. Files can be uploaded by either dragging them onto the box or using the "browse" button.
The files start to upload immediately and, if there are several, they will form a queue. The files are stacked in a list which shows the file name, file size, loading state and loading progress.
To make this project as simple as possible, all the required files and the upload folder are enclosed in a "Client Area" folder which can be uploaded to the server "as is".
The folder is password protected on the server. How this is achieved will depend on the facilities offered by the hosting service. Companies like Host Excellence use Webshell for file management so setting up password protection is a breeze using the wizard.
The example on this page uses the External File New Window widget. This opens the HTML file inside a small, custom sized browser window after the user has successfully entered the correct username and password.
Try out the example below but entering…
Drag a file onto it to see how it works. Try dragging several onto it to see how the file queue and uploading sequence works.
Don't worry about the files. This is a dummy setup for the demo and your files won't be going anywhere!