Handle empty results and errors for images loaded via FileReader interface.

blueimp · blueimp · commit 8e7c998acf9e · 2012-11-13T15:19:07.000+01:00
diff --git a/index.html b/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!--
 /*
- * JavaScript Load Image Demo 1.2.1
+ * JavaScript Load Image Demo 1.2.3
  * https://github.com/blueimp/JavaScript-Load-Image
  *
  * Copyright 2011, Sebastian Tschan
@@ -70,27 +70,39 @@ <h2>Result</h2>
     </div>
 </div>
 <script src="load-image.min.js"></script>
-<!-- jQuery and Bootstrap JS are not required, but included for the demo -->
+<!-- jQuery is not required, but included for the demo -->
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
-<script src="http://blueimp.github.com/cdn/js/bootstrap.min.js"></script>
 <script>
-/*global jQuery, window, document */
+/*global jQuery, window, document, HTMLCanvasElement */
 (function ($) {
     'use strict';
     var result = $('#result'),
         load = function (e) {
             e = e.originalEvent;
             e.preventDefault();
-            window.loadImage(
-                (e.dataTransfer || e.target).files[0],
-                function (img) {
-                    result.children().replaceWith(img);
-                },
-                {
-                    maxWidth: result.children().outerWidth(),
-                    canvas: true
-                }
-            );
+            if (!window.loadImage(
+                    (e.dataTransfer || e.target).files[0],
+                    function (img) {
+                        if (!(img.src || img instanceof HTMLCanvasElement)) {
+                            img = $(
+                                '<span class="label label-important">Error</span>' +
+                                    ' <span>Loading image file failed</span>'
+                            );
+                        }
+                        result.children().replaceWith(img);
+                    },
+                    {
+                        maxWidth: result.children().outerWidth(),
+                        canvas: true
+                    }
+                )) {
+                result.children().replaceWith(
+                    $(
+                        '<span class="label label-important">Error</span>' +
+                            ' <span>Your browser does not support the URL or FileReader API.</span>'
+                    )
+                );
+            }
         };
     $(document)
         .on('dragover', function (e) {
diff --git a/load-image.js b/load-image.js
@@ -1,5 +1,5 @@
 /*
- * JavaScript Load Image 1.2.2
+ * JavaScript Load Image 1.2.3
  * https://github.com/blueimp/JavaScript-Load-Image
  *
  * Copyright 2011, Sebastian Tschan
@@ -46,8 +46,13 @@
                 img.src = url;
                 return img;
             }
-            return loadImage.readFile(file, function (url) {
-                img.src = url;
+            return loadImage.readFile(file, function (e) {
+                var target = e.target;
+                if (target && target.result) {
+                    img.src = target.result;
+                } else {
+                    callback(e);
+                }
             });
         },
         // The check for URL.revokeObjectURL fixes an issue with Opera 12,
@@ -205,13 +210,12 @@
     };
 
     // Loads a given File object via FileReader interface,
-    // invokes the callback with a data url:
+    // invokes the callback with the event object (load or error).
+    // The result can be read via event.target.result:
     loadImage.readFile = function (file, callback) {
         if (window.FileReader && FileReader.prototype.readAsDataURL) {
             var fileReader = new FileReader();
-            fileReader.onload = function (e) {
-                callback(e.target.result);
-            };
+            fileReader.onload = fileReader.onerror = callback;
             fileReader.readAsDataURL(file);
             return fileReader;
         }
diff --git a/load-image.min.js b/load-image.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "blueimp-load-image",
-    "version": "1.2.1",
+    "version": "1.2.3",
     "title": "JavaScript Load Image",
     "description": "JavaScript Load Image is a function to load images provided as File or Blob objects or via URL. It returns an optionally scaled HTML img or canvas element.",
     "keywords": [

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "blueimp-load-image",`
`3`		`- "version": "1.2.1",`
	`3`	`+ "version": "1.2.3",`
`4`	`4`	`"title": "JavaScript Load Image",`
`5`	`5`	`"description": "JavaScript Load Image is a function to load images provided as File or Blob objects or via URL. It returns an optionally scaled HTML img or canvas element.",`
`6`	`6`	`"keywords": [`