Improve error handling

kpdecker · May 31, 2010 · 43c59b9 · 43c59b9
1 parent 6bde8cf
commit 43c59b9
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 7 deletions.
diff --git a/border-image-generator.js b/border-image-generator.js
@@ -181,6 +181,8 @@ $(document).ready(function() {
 
         editorEl.width(width).height(height);
         editorEl.show();
+
+        $(".errorMsg").hide();
         validImage = true;
 
         sliders.filter(":odd").slider("option", "max", natWidth);
@@ -190,16 +192,32 @@ $(document).ready(function() {
         updateCSS();
         updateHash();
     });
-    imageEl.error(function() {
+
+    function errorHandler(code) {
+        var msg;
+        if (code === FileError.NOT_FOUND_ERR) {
+            msg = "Unable to find image. This may be due to an incorrect path name or a local file that has not been properly loaded.";
+        } else if (code) {
+            msg = "Failed to load image. Error code: " + code;
+        } else {
+            msg = "Unknown error occured loading image " + ImageList.getDisplayName();
+        }
+
+        // Only show the message if the user as attempted to load an image
+        if (ImageList.getCurEntry()) {
+            $(".errorMsg").html("*** " + msg).show();
+        }
+
         editorEl.hide();
         validImage = false;
 
         updateCSS();
-    });
+    }
+    imageEl.error(function() { errorHandler(); });
     pathToImage.change(function(event) {
         // Clear the frame size so Opera can scale the editor down if the new image is smaller than the last
         editorEl.width("auto").height("auto");
-        ImageList.load(pathToImage.val());
+        ImageList.load(pathToImage.val(), errorHandler);
     });
 
     function setFlag(name, value) {
@@ -240,12 +258,12 @@ $(document).ready(function() {
             var dataTransfer = event.originalEvent.dataTransfer,
                 file = dataTransfer.files[0];
 
-            ImageList.load(file);
+            ImageList.load(file, errorHandler);
         });
         $("#localImage").bind("change", function(event) {
             var file = this.files[0];
 
-            ImageList.load(file);
+            ImageList.load(file, errorHandler);
         });
     } else {
         $("body").addClass("no-local");
@@ -266,7 +284,7 @@ $(document).ready(function() {
 
         if (ImageList.getCurEntry() !== state.src) {
             // The other values will update when the image loads
-            ImageList.load(state.src);
+            ImageList.load(state.src, errorHandler);
         } else if (prevScale !== state.scaleFactor) {
             imageEl.load();
         } else {

diff --git a/css/border-image-generator.css b/css/border-image-generator.css
@@ -107,6 +107,11 @@
     display: inline-block;
 }
 
+.errorMsg {
+    color: red;
+    padding: 10px;
+}
+
 .no-local .localDependent {
     display: none;
 }
diff --git a/image-list.js b/image-list.js
@@ -66,11 +66,18 @@ var ImageList;
             image = el;
         },
 
-        load: function(file) {
+        load: function(file, onError) {
+            // the file from the session store if that is the case
             if (typeof file === "string") {
                 var match = /^page-store:\/\/(.*)$/.exec(file);
                 if (this.isLocalSupported() && match) {
                     curEntry = localDataBinding.getImage(match[1]);
+                    if (!curEntry) {
+                        // We could not find the cache data. This could be due to a refresh in the local case,
+                        // or due to someone attempting to paste a URL that uses a local reference.
+                        onError && onError(FileError.NOT_FOUND_ERR);
+                        return;
+                    }
                     curEntry.entryId = "page-store://" + match[1];
                 } else {
                     curEntry = { entryId: file, src: file, displayName: file };
@@ -84,7 +91,12 @@ var ImageList;
                     curEntry.entryId = "page-store://" + entryId;
                     image.src = ImageList.getSrc();
                 };
+                reader.onerror = function(event) {
+                    onError && onError(reader.error);
+                };
                 reader.readAsDataURL(file);
+            } else {
+                onError && onError(FileError.NOT_READABLE_ERR);
             }
         },
     };

diff --git a/index.html b/index.html
@@ -16,6 +16,7 @@
     <h1>Border Image Generator</h1>
     <div>
         <h2>Editor</h2>
+        <div class="errorMsg"></div>
         <div id="editorEl" style="display: none">
             <img id="imageEl">
             <!-- Note that we expect this ordering -->