EverWeb Codebox

File Upload Drop Box Loading

Client File Upload
This screenshot shows the file info when it is dropped onto the container.

File Upload Drop Box Uploaded

Client File Upload
The loader has turned full circle and the file has been uploaded.

File Upload

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…
Username: everweb
Password: codebox
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!

Click HERE to upload your files.

Instructions

Go to the Project File Download page to get the Client Area folder.
Upload this to the root folder on the server.
Drag the External File New Window onto the page and create the download link.
Set the width and height to 400px.
Enter the file relative path to the drop box. If the page with the link is at the top level, the path will be…
client-area/dropbox.html
If the page with the link is in a directory, the path will be…
../client-area/dropbox.html
Contact your hosting service tech support for info on how to password protect the folder.

How To Create Several Client Areas & Access The Files.

If it is necessary to create folders for individual clients, give the "client-area" folder a unique name for each one such as…
john-smith-graphics, fanny-mae-photos etc.
Create an upload link for each client and change the folder name in the filepath from "client-area" to this folder name.
Create a different username and password for each folder and send it to the client.

Since it is necessary to access the client's upload folder via FTP to download the contents, it's a good idea to place an "Email Me" button next to the link for opening the dropbox window so that the client can easily send an email to announce the new file upload.
This can be simply created in an HTML Snippet using the code shown below...

<p style="font:15px verdana, sans-serif;">Please <a href="mailto:info@my-website.com?subject=File Upload&body=Please check my client folder for a recent upload">Email Me</a> after completing your upload!</p>

Please Email Me after completing your upload!