Articles tagged 'gears'

Blog Projects

Drag and Drop File Upload With Google Gears

Google Gears is an extension which adds new features to you browser. It lets your browser to interact with the desktop. You can store data locally to an SQLite based database. Browser will also have a worker pool for running JavaScript code on the background.

Update 20091007: I updated the tutorial and demo to support dragging and dropping multiple files for uploading simultaneously.

Below is how you can do basic drag and drop file upload. Gears, PHP and jQuery are needed. If you want to try there is a working demo. All source code for the demo can be found from GitHub.

PHP for Receiving the Files

PHP has easy way of accessing uploaded files using $_FILES array. For demo’s sake I am assuming we should upload only image files. Nothing special here. Just you plain old upload script.

<?php $error_message[0] = "Unknown problem with upload."; $error_message[1] = "Uploaded file too large (load_max_filesize)."; $error_message[2] = "Uploaded file too large (MAX_FILE_SIZE)."; $error_message[3] = "File was only partially uploaded."; $error_message[4] = "Choose a file to upload."; $upload_dir = './tmp/'; $num_files = count($_FILES['user_file']['name']); for ($i=0; $i < $num_files; $i++) { $upload_file = $upload_dir . basename($_FILES['user_file']['name'][$i]); if (!preg_match("/(gif|jpg|jpeg|png)$/",$_FILES['user_file']['name'][$i])) { print "I asked for an image 

Continue reading >>