Skip to content
This repository
Browse code

Adding FS caching

  • Loading branch information...
commit d24cba4d97aaf6a87173844840e43c93db679b32 1 parent a823c04
Eric Bidelman authored September 04, 2012
127  gdocs/js/app.js
@@ -18,25 +18,98 @@ Author: Eric Bidelman (ericbidelman@chromium.org)
18 18
 
19 19
 var gdocs = new GDocs();
20 20
 
  21
+// FILESYSTEM SUPPORT ----------------------------------------------------------
  22
+var fs = null;
  23
+var FOLDERNAME = 'test';
  24
+
  25
+function writeFile(blob) {
  26
+  if (!fs) {
  27
+    return;
  28
+  }
  29
+
  30
+  fs.root.getDirectory(FOLDERNAME, {create: true}, function(dirEntry) {
  31
+    dirEntry.getFile(blob.name, {create: true, exclusive: false}, function(fileEntry) {
  32
+      // Create a FileWriter object for our FileEntry, and write out blob.
  33
+      fileEntry.createWriter(function(fileWriter) {
  34
+        fileWriter.onerror = onError;
  35
+        fileWriter.onwriteend = function(e) {
  36
+          console.log('Write completed.');
  37
+        };
  38
+        fileWriter.write(blob);
  39
+      }, onError);
  40
+    }, onError);
  41
+  }, onError);
  42
+}
  43
+// -----------------------------------------------------------------------------
  44
+
21 45
 function upload(blob) {
22 46
   gdocs.upload(blob, function() {
23  
-    //...
  47
+    console.log('Upload complete');
24 48
   });
25 49
 }
26 50
 
27 51
 function onError(e) {
28  
-  console.error(e);
  52
+  console.log(e);
29 53
 }
30 54
 
  55
+// Main Angular controller for app.
31 56
 function DocsController($scope, $http) {
32 57
   $scope.docs = [];
33 58
 
34 59
   $scope.fetchDocs = function() {
35 60
     $scope.docs = []; // Clear out old results.
36 61
 
37  
-    var successCallback = function(resp, status, headers, config) {
  62
+    var informAngular = function(doc, i, totalEntries) {
  63
+      $scope.docs.push(doc);
  64
+
  65
+      // Only want to sort and call $apply() when we have all entries.
  66
+      if (totalEntries - 1 == i) {
  67
+        $scope.docs.sort(Util.sortByDate);
  68
+        $scope.$apply(); // Inform angular that we made changes.
  69
+      }
  70
+    };
  71
+
  72
+    // Response handler that doesn't cache file icons.
  73
+    // var successCallback = function(resp, status, headers, config) {
  74
+    //   var docs = [];
  75
+
  76
+    //   var totalEntries = resp.feed.entry.length;
  77
+
  78
+    //   resp.feed.entry.forEach(function(entry, i) {
  79
+    //     var doc = {
  80
+    //       title: entry.title.$t,
  81
+    //       updatedDate: Util.formatDate(entry.updated.$t),
  82
+    //       updatedDateFull: entry.updated.$t,
  83
+    //       icon: gdocs.getLink(entry.link,
  84
+    //                           'http://schemas.google.com/docs/2007#icon').href,
  85
+    //       alternateLink: gdocs.getLink(entry.link, 'alternate').href,
  86
+    //       size: entry.docs$size ? '( ' + entry.docs$size.$t + ' bytes)' : null
  87
+    //     };
  88
+
  89
+    //     var xhr = new XMLHttpRequest();
  90
+    //     xhr.open('GET', doc.icon, true);
  91
+    //     xhr.responseType = 'blob';
  92
+    //     xhr.onerror = onError;
  93
+    //     xhr.onload = function(e) {
  94
+    //       console.log('Fetched icon via XHR');
  95
+
  96
+    //       doc.icon = window.URL.createObjectURL(this.response);
  97
+
  98
+    //       informAngular(doc, i, totalEntries);
  99
+    //     };
  100
+
  101
+    //     xhr.send();
  102
+
  103
+    //   });
  104
+    // };
  105
+
  106
+
  107
+    // Response handler that caches file icons int he filesystem API.
  108
+    var successCallbackWithFsCaching = function(resp, status, headers, config) {
38 109
       var docs = [];
39 110
 
  111
+      var totalEntries = resp.feed.entry.length;
  112
+
40 113
       resp.feed.entry.forEach(function(entry, i) {
41 114
         var doc = {
42 115
           title: entry.title.$t,
@@ -48,22 +121,36 @@ function DocsController($scope, $http) {
48 121
           size: entry.docs$size ? '( ' + entry.docs$size.$t + ' bytes)' : null
49 122
         };
50 123
 
51  
-        var xhr = new XMLHttpRequest();
52  
-        xhr.open('GET', doc.icon, true);
53  
-        xhr.responseType = 'blob';
54  
-        xhr.onerror = onError;
55  
-        xhr.onload = function(e) {
56  
-          doc.icon = window.URL.createObjectURL(this.response);
  124
+        // 'http://gstatic.google.com/doc_icon_128.png' -> 'doc_icon_128.png'
  125
+        doc.iconFilename = doc.icon.substring(doc.icon.lastIndexOf('/') + 1);
57 126
 
58  
-          $scope.docs.push(doc);
  127
+        var fsURL = fs.root.toURL() + FOLDERNAME + '/' + doc.iconFilename;
  128
+        window.webkitResolveLocalFileSystemURL(fsURL, function(entry) {
  129
+          doc.icon = entry.toURL(); // should be === to fsURL, but whatevs.
59 130
 
60  
-          if (resp.feed.entry.length - 1 == i) {
61  
-            $scope.docs.sort(Util.sortByDate);
62  
-            $scope.$apply(); // Inform angular that we made changes.
63  
-          }
64  
-        };
  131
+          informAngular(doc, i, totalEntries);
  132
+        }, function(e) {
  133
+          // Error: file doesn't exist yet. XHR it in and write it to the FS.
  134
+          var xhr = new XMLHttpRequest();
  135
+          xhr.open('GET', doc.icon, true);
  136
+          xhr.responseType = 'blob';
  137
+          xhr.onerror = onError;
  138
+          xhr.onload = function(e) {
  139
+            console.log('Fetched icon via XHR');
65 140
 
66  
-        xhr.send();
  141
+            var blob = e.target.response;
  142
+            blob.name = doc.iconFilename; // Add icon filename to blob.
  143
+
  144
+            writeFile(blob); // Write is async, but that's ok.
  145
+
  146
+            doc.icon = window.URL.createObjectURL(blob);
  147
+
  148
+            informAngular(doc, i, totalEntries);
  149
+          };
  150
+
  151
+          xhr.send();
  152
+
  153
+        });
67 154
       });
68 155
     };
69 156
 
@@ -75,7 +162,7 @@ function DocsController($scope, $http) {
75 162
       }
76 163
     };
77 164
 
78  
-    $http.get(gdocs.DOCLIST_FEED, config).success(successCallback);
  165
+    $http.get(gdocs.DOCLIST_FEED, config).success(successCallbackWithFsCaching);
79 166
   };
80 167
 
81 168
   gdocs.auth(function() {
@@ -104,4 +191,10 @@ document.addEventListener('DOMContentLoaded', function(e) {
104 191
   closeButton.addEventListener('click', function(e) {
105 192
     window.close();
106 193
   });
  194
+
  195
+  // FILESYSTEM SUPPORT --------------------------------------------------------
  196
+  window.webkitRequestFileSystem(TEMPORARY, 1024 * 1024, function(localFs) {
  197
+    fs = localFs;
  198
+  }, onError);
  199
+  // ---------------------------------------------------------------------------
107 200
 });
4  gdocs/js/gdocs.js
@@ -156,8 +156,8 @@ GDocs.prototype.upload = function(blob, callback) {
156 156
     resumableMediaLink: this.CREATE_SESSION_URI/*,entry: entry*/
157 157
   }, function(response) {
158 158
     var entry = JSON.parse(response).entry;
159  
-    console.log(entry, entry.docs$filename.$t, entry.docs$size.$t);
160  
-    self.getDocumentList();
  159
+console.log(entry, entry.docs$filename.$t, entry.docs$size.$t);
  160
+    self.getDocumentList(null, callback);
161 161
   });
162 162
 };
163 163
 
2  gdocs/js/resumableupload.js
@@ -140,7 +140,7 @@ console.log(headers['Content-Range']);
140 140
 
141 141
 console.log(startByte, startByte + chunkSize_);
142 142
 
143  
-        var chunk = this.file.webkitSlice(
  143
+        var chunk = this.file.slice(
144 144
             startByte, startByte + chunkSize_, this.file.type);
145 145
 
146 146
 console.log(chunk, chunk.size);

0 notes on commit d24cba4

Please sign in to comment.
Something went wrong with that request. Please try again.