add notification if image upload fails

src/js/Constants.js

@@ -57,8 +57,8 @@ var Constants = {
       SAVE : 'save'
     }
   },
-  IMAGE_SERVICE_UPLOAD_URL : 'http://piskel-imgstore-a.appspot.com/__/upload',
+  IMAGE_SERVICE_UPLOAD_URL : 'http://localhost:12080/__/upload',
-  IMAGE_SERVICE_GET_URL : 'http://piskel-imgstore-a.appspot.com/img/',
+  IMAGE_SERVICE_GET_URL : 'http://localhost:12080/img/',
 
   ZOOMED_OUT_BACKGROUND_COLOR : '#A0A0A0',
 

src/js/controller/NotificationController.js

@@ -23,10 +23,15 @@
     message.innerHTML = messageInfo.content;
     message.innerHTML = message.innerHTML + "<div title='Close message' class='close'>x</div>";
     document.body.appendChild(message);
-    $(message).find(".close").click($.proxy(this.removeMessage_, this));
+
-    if(messageInfo.behavior) {
+    message.querySelector('.close').addEventListener('click', this.removeMessage_.bind(this));
+    if (messageInfo.behavior) {
       messageInfo.behavior(message);
     }
+
+    if (messageInfo.hideDelay) {
+      window.setTimeout(this.removeMessage_.bind(this), messageInfo.hideDelay);
+    }
   };
 
   /**

src/js/controller/settings/GifExportController.js

@@ -44,25 +44,30 @@
     var zoom = this.getSelectedZoom_(),
         fps = this.piskelController.getFPS();
 
-    this.renderAsImageDataAnimatedGIF(zoom, fps, this.onGifRenderingCompleted_.bind(this));
+    this.renderAsImageDataAnimatedGIF(zoom, fps, this.uploadImageData_.bind(this));
   };
 
   ns.GifExportController.prototype.onDownloadButtonClick_ = function (evt) {
-    var fileName = this.piskelController.getPiskel().getDescriptor().name + '.gif';
     var zoom = this.getSelectedZoom_(),
         fps = this.piskelController.getFPS();
 
-    this.renderAsImageDataAnimatedGIF(zoom, fps, function (imageData) {
+    this.renderAsImageDataAnimatedGIF(zoom, fps, this.downloadImageData_.bind(this));
+  };
+
+  ns.GifExportController.prototype.downloadImageData_ = function (imageData) {
+    var fileName = this.piskelController.getPiskel().getDescriptor().name + '.gif';
     pskl.utils.BlobUtils.dataToBlob(imageData, "image/gif", function(blob) {
       pskl.utils.FileUtils.downloadAsFile(blob, fileName);
     });
-    }.bind(this));
   };
 
-  ns.GifExportController.prototype.onGifRenderingCompleted_ = function (imageData) {
+  ns.GifExportController.prototype.uploadImageData_ = function (imageData) {
     this.updatePreview_(imageData);
     this.previewContainerEl.classList.add("preview-upload-ongoing");
-    pskl.app.imageUploadService.upload(imageData, this.onImageUploadCompleted_.bind(this));
+
+    console.log(imageData.length);
+
+    pskl.app.imageUploadService.upload(imageData, this.onImageUploadCompleted_.bind(this), this.onImageUploadFailed_.bind(this));
   };
 
   ns.GifExportController.prototype.onImageUploadCompleted_ = function (imageUrl) {
@@ -71,6 +76,15 @@
     this.previewContainerEl.classList.remove("preview-upload-ongoing");
   };
 
+  ns.GifExportController.prototype.onImageUploadFailed_ = function (event, xhr) {
+    if (xhr.status === 500) {
+      $.publish(Events.SHOW_NOTIFICATION, [{
+        "content": "Upload failed : " + xhr.responseText,
+        "hideDelay" : 5000
+      }]);
+    }
+  };
+
   ns.GifExportController.prototype.updatePreview_ = function (src) {
     this.previewContainerEl.innerHTML = "<div><img style='max-width:32px;' src='"+src+"'/></div>";
   };
@@ -104,10 +118,10 @@
     var colorCount = pskl.app.currentColorsService.getCurrentColors().length;
     var preserveColors = colorCount < MAX_GIF_COLORS;
     var gif = new window.GIF({
-      workers: 2,
+      workers: 5,
       quality: 1,
-      width: this.piskelController.getWidth()*zoom,
+      width: this.piskelController.getWidth() * zoom,
-      height: this.piskelController.getHeight()*zoom,
+      height: this.piskelController.getHeight() * zoom,
       preserveColors : preserveColors
     });
 

src/js/utils/Xhr.js

@@ -37,7 +37,7 @@
       };
 
       xhr.onerror = function(e) {
-        error(e);
+        error(e, this);
       };
 
       return xhr;