Google Gears Desktop API - Working with files

The Google Gears Desktop API allows you to create shortcuts on your desktop (only to a page on the same site, not to another) and work with files. This example shows you how you can filter the file types when choosing files. gears_init.js required.

<!DOCTYPE html>
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 <title>Google Desktop API - Working with files</title>
<script type="text/javascript" src="gears_init.js"></script>
<script type="text/javascript">
var fileformats = {

 // word document
 word: 'application/msword',
 // word 2007 document
 wpml: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',

 // excel spreadsheet
 excel: 'application/vnd.ms-excel',
 // excel 2007 spreadsheet
 ssml: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',

 // powerpoint presentation
 powerpoint: 'application/vnd.ms-powerpoint',
 // powerpoint 2007 presentation
 pml: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
 
 // jpeg
 jpeg: 'image/jpeg',
 
 // png
 png: 'image/png',
 
 // gif
 gif: 'image/gif',
 
 // tiff
 tiff: 'image/tiff'
}


// http://code.google.com/apis/gears/api_desktop.html
var desktop = google.gears.factory.create('beta.desktop');

function officeFiles()
{
 desktop.openFiles(openFilesCallback, {singleFile: false,
  filter: [fileformats.word, fileformats.wpml,
   fileformats.excel, fileformats.ssml,
   fileformats.powerpoint, fileformats.pml]
 });
}

function imageFiles()
{
 desktop.openFiles(openFilesCallback, {singleFile: false,
  filter: [fileformats.jpeg, fileformats.png,
   fileformats.gif, fileformats.tiff]
 });
}


function openFilesCallback(files)
{
 if(files.length == 0)
 {
  alert("No files selected");
 }
 else
 {
  var selectedFiles = [];
  for(var i = 0; i < files.length; i++)
  {
   selectedFiles.push(files[i].name + " (" + files[i].blob.length + " bytes)");
  }
  alert("Selected files: " + selectedFiles);
 }
}
</script>
 </head>
 <body>
  <p><a href="http://code.google.com/apis/gears/api_desktop.html">Google Gears Desktop API</a></p>
  <form action="" method="post">
   <input value="Select Office Files" type="button" id="selectofficefiles">
   <input value="Select Image Files" type="button" id="selectimagefiles">
  </form>
<script type="text/javascript">
var selectofficefiles = document.getElementById("selectofficefiles");
selectofficefiles.onclick = function()
{
 officeFiles();
 return false;
}

var selectimagefiles = document.getElementById("selectimagefiles");
selectimagefiles.onclick = function()
{
 imageFiles();
 return false;
}
</script>
 </body>
</html>

The benefit of using Google Gears is that you can get the file size before uploading the file, so a check can be done beforehand to see if the file is to big (e.g. if(files[i].blob.length > 1048576) alert(files[i].name + " too big (> 1MB)");.

Comments

Post a Comment

Popular posts from this blog

Text Clips for Programmers Notepad 2 (XHTML)

Update (23 June, 2005) : Added DOCTYPEs. More Programmers Notepad 2 text clips. Some tags are not included (b, big, i, small, sub, sup) as these can be replaced with existing tags (em, strong), or styled using CSS. Create a file in the clips sub directory of the Programmers Notepad directory, with the extension .clips (i.e. xhtmltags.clips) and paste in the following code: <?xml version="1.0"?> <clips name="XHTML Tags"> <clip name="------ DOCTYPEs ------"></clip> <clip name="XHTML 1.0 transitional"><![CDATA[<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">|]]></clip> <clip name="XHTML 1.0 strict"><![CDATA[<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">|]]></clip> <clip name="XHTML 1.1...
Read more

Shrink Image (JavaScript)

This function shrinks an image, so its dimensions are no bigger than the maximum dimensions you define. // get new dimensions so it fits within the maximum // o = original dimensions / image, m = maximum dimensions function shrink(o, m) { // r = resized var r = {width: o.width, height: o.height}; // if an image, rather than an object, resize it if(o.nodeName && o.nodeName.toLowerCase() == "img") r = o; if(r.width > m.width) { r.height = r.height * (m.width / r.width); r.width = m.width; if(r.height > m.height) { r.width = r.width * (m.height / r.height); r.height = m.height; } } else if(r.height > m.height) { r.width = r.width * (m.height / r.height); r.height = m.height; } return r; } To use, simply supply the image and the dimensions to constrain it to: var image = document.getElementById("image"); var max = {width: 1024, ...
Read more

Select box manipulation with jQuery

If you read the jQuery mailing list , you may be aware that I have updated my plugins for working with select boxes . Summary of changes: addOption replaces any options with the same value (so think of it as an add/replace options plugin selectOptions selected options in addition to what was already selected, but there is now an option for it not to do this There are two new methods: copyOptions which is for copying options between select boxes ajaxAddOption allows you to add options via AJAX (i.e. could be used for create options dynamically from a server script)
Read more