Support image upload by drag and drop
Change-Id: I0fb2dd66b92f60c17634dfd6dd1437765f7847d8
Signed-off-by: Edwin Kempin <edwin.kempin@sap.com>
diff --git a/src/main/java/com/googlesource/gerrit/plugins/imagare/client/ImageUploadScreen.java b/src/main/java/com/googlesource/gerrit/plugins/imagare/client/ImageUploadScreen.java
index e086af1..6adc46f 100644
--- a/src/main/java/com/googlesource/gerrit/plugins/imagare/client/ImageUploadScreen.java
+++ b/src/main/java/com/googlesource/gerrit/plugins/imagare/client/ImageUploadScreen.java
@@ -33,7 +33,7 @@
setStyleName("imagare-image-upload-screen");
add(new UploadByFileSelection());
- add(new UploadByPastePanel());
+ add(new UploadByDropOrPastePanel());
uploadedPanel = new UploadedImagesPanel();
add(uploadedPanel);
}
diff --git a/src/main/java/com/googlesource/gerrit/plugins/imagare/client/UploadByPastePanel.java b/src/main/java/com/googlesource/gerrit/plugins/imagare/client/UploadByDropOrPastePanel.java
similarity index 74%
rename from src/main/java/com/googlesource/gerrit/plugins/imagare/client/UploadByPastePanel.java
rename to src/main/java/com/googlesource/gerrit/plugins/imagare/client/UploadByDropOrPastePanel.java
index ff03843..f782e17 100644
--- a/src/main/java/com/googlesource/gerrit/plugins/imagare/client/UploadByPastePanel.java
+++ b/src/main/java/com/googlesource/gerrit/plugins/imagare/client/UploadByDropOrPastePanel.java
@@ -17,18 +17,19 @@
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.VerticalPanel;
-public class UploadByPastePanel extends VerticalPanel {
+public class UploadByDropOrPastePanel extends VerticalPanel {
- UploadByPastePanel() {
+ UploadByDropOrPastePanel() {
init0();
setStyleName("imagare-image-upload-panel");
getElement().setAttribute("contenteditable", "true");
getElement().setAttribute("onpaste", "imagarePasteHandler(this, event)");
+ getElement().setAttribute("ondrop", "imagareDropHandler(this, event)");
- Label pasteLabel = new Label("Paste image here with " + (isMac() ? "Cmd+V" : "Ctrl+V") + ".");
- pasteLabel.setStyleName("imagare-paste-label");
- add(pasteLabel);
+ add(new Label("drag and drop image here"));
+ add(new Label("or"));
+ add(new Label("paste image from clipboard with " + (isMac() ? "Cmd+V" : "Ctrl+V")));
}
private static native boolean isMac() /*-{
@@ -99,5 +100,27 @@
elem.innerHTML = savedContent;
@com.googlesource.gerrit.plugins.imagare.client.ImageUploader::uploadImage(Ljava/lang/String;)(imageData);
}
+
+ $wnd.imagareDropHandler = function handleDrop(elem, event) {
+ if (window.chrome) {
+ event.preventDefault();
+ }
+ var savedContent = elem.innerHTML;
+ var f = event.dataTransfer.files[0];
+ if (f) {
+ var r = new FileReader();
+ r.onload = function(e) {
+ elem.innerHTML = savedContent;
+ if (f.type.match('image/.*')) {
+ @com.googlesource.gerrit.plugins.imagare.client.ImageUploader::uploadImage(Ljava/lang/String;Ljava/lang/String;)(e.target.result, f.name);
+ } else {
+ $wnd.Gerrit.showError('no image file');
+ }
+ }
+ r.readAsDataURL(f);
+ } else {
+ $wnd.Gerrit.showError('Failed to load file.');
+ }
+ }
}-*/;
}
diff --git a/src/main/java/com/googlesource/gerrit/plugins/imagare/public/imagare.css b/src/main/java/com/googlesource/gerrit/plugins/imagare/public/imagare.css
index f168a66..75578a5 100644
--- a/src/main/java/com/googlesource/gerrit/plugins/imagare/public/imagare.css
+++ b/src/main/java/com/googlesource/gerrit/plugins/imagare/public/imagare.css
@@ -8,14 +8,15 @@
}
.imagare-image-upload-panel {
- width: 275px;
- height: 100px;
+ width: 350px;
border: 1px solid #B3B2B2;
border-spacing: 5px 5px;
}
-.imagare-paste-label {
+.imagare-image-upload-panel td {
+ text-align: center;
font-size: 18px;
+ margin-bottom: 3px;
}
.imagare-uploaded-images-label {
