429: Workspace: uploading big files

Task-Url: https://support.d4science.org/issues/429

Updated css
Added ProgressBar
Added UploaderProgressBarView

git-svn-id: https://svn.d4science.research-infrastructures.eu/gcube/trunk/portlets/widgets/workspace-uploader@119634 82a268e6-3cf1-43bd-a215-b396298e98cf

src/main/java/org/gcube/portlets/widgets/workspaceuploader/client/events/CancelUploadEvent.java

@@ -1,9 +1,9 @@
 package org.gcube.portlets.widgets.workspaceuploader.client.events;
 
+import org.gcube.portlets.widgets.workspaceuploader.client.uploader.UploaderProgressView;
 import org.gcube.portlets.widgets.workspaceuploader.shared.WorkspaceUploaderItem;
 
 import com.google.gwt.event.shared.GwtEvent;
-import com.google.gwt.user.client.ui.HorizontalPanel;
 
 
 /**
@@ -14,7 +14,7 @@ import com.google.gwt.user.client.ui.HorizontalPanel;
  */
 public class CancelUploadEvent extends GwtEvent<CancelUploadEventHandler> {
 	public static Type<CancelUploadEventHandler> TYPE = new Type<CancelUploadEventHandler>();
-	private HorizontalPanel hp;
+	private UploaderProgressView uploaderProgressView;
 	private String fileName;
 	private WorkspaceUploaderItem uploader;
 
@@ -22,16 +22,16 @@ public class CancelUploadEvent extends GwtEvent<CancelUploadEventHandler> {
 	/**
 	 * @return the hp
 	 */
-	public HorizontalPanel getHp() {
+	public UploaderProgressView getProgessView() {
-		return hp;
+		return uploaderProgressView;
 	}
 
 	/**
 	 * Instantiates a new cancel upload event.
 	 */
-	public CancelUploadEvent(WorkspaceUploaderItem uploader, HorizontalPanel hp, String fileName) {
+	public CancelUploadEvent(WorkspaceUploaderItem uploader, UploaderProgressView uploaderProgressView, String fileName) {
 		this.uploader = uploader;
-		this.hp = hp;
+		this.uploaderProgressView = uploaderProgressView;
 		this.fileName = fileName;
 	}
 

src/main/java/org/gcube/portlets/widgets/workspaceuploader/client/resource/FileUpload.css

@@ -0,0 +1,78 @@
+@external progressContainer, progressBarContainer, FileSubmit, bar-container, progress, blue, myBackground;
+
+.progressContainer {
+    text-align: center;
+    width: 100%;
+    margin: 0px;
+}
+
+.progressBarContainer {
+    text-align: center;
+    width: 100%;
+    margin: 10px 0 0 -3px;
+    
+}
+
+/* Progress Bar Styles */
+
+.bar-container {
+	font: 13px/20px 'Lucida Grande', Tahoma, Verdana, sans-serif;
+	color: #404040;
+	margin: 0px auto;
+	width: 382px;
+}
+
+.bar-container > div {
+	margin: 2px;
+}
+
+.progress {
+	height: 25px;
+	border-radius: 6px;
+}
+
+.progress > span {
+	position: relative;
+	float: left;
+	margin: 0 -1px;
+	min-width: 30px;
+	height: 18px;
+	line-height: 16px;
+	text-align: right;
+	background-color: #DDD;
+	border: 1px solid;
+	border-color: #FFF;
+	border-radius: 6px;
+}
+
+.progress>span>span {
+	padding: 0 8px;
+	font-size: 11px;
+	font-weight: bold;
+	color: #404040;
+	color: rgba(0, 0, 0, 0.7);
+	text-shadow: 0 1px rgba(255, 255, 255, 0.4);
+}
+
+@sprite .myBackground>span:before  {
+	gwt-image: "progressTexture"; 
+	other: repeat-x;
+	content: '';
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	z-index: 1;
+	height: 18px;
+	border-radius: 6px;
+} 
+
+.progress .blue {
+	background: #5aaadb;
+	border-color: #7bbbe2;
+	background-image: -webkit-linear-gradient(top, #aed5ed, #7bbbe2 70%, #5aaadb);
+	background-image: -moz-linear-gradient(top, #aed5ed, #7bbbe2 70%, #5aaadb);
+	background-image: -o-linear-gradient(top, #aed5ed, #7bbbe2 70%, #5aaadb);
+	background-image: linear-gradient(to bottom, #aed5ed, #7bbbe2 70%, #5aaadb);
+}

src/main/java/org/gcube/portlets/widgets/workspaceuploader/client/resource/PanelFileUpload.css

@@ -0,0 +1,78 @@
+@external progressContainer, progressBarContainer, FileSubmit, bar-container, progress, blue, myBackground;
+
+.progressContainer {
+    text-align: center;
+    width: 100%;
+    margin: 0px;
+}
+
+.progressBarContainer {
+    text-align: center;
+    width: 100%;
+    margin: 10px 0 0 -3px;
+    
+}
+
+/* Progress Bar Styles */
+
+.bar-container {
+	font: 13px/20px 'Lucida Grande', Tahoma, Verdana, sans-serif;
+	color: #404040;
+	margin: 1px;
+	width: 600px;
+}
+
+.bar-container > div {
+	margin: 2px;
+}
+
+.progress {
+	height: 25px;
+	border-radius: 6px;
+}
+
+.progress > span {
+	position: relative;
+	float: left;
+	margin: 0 -1px;
+	min-width: 30px;
+	height: 18px;
+	line-height: 16px;
+	text-align: right;
+	background-color: #DDD;
+	border: 1px solid;
+	border-color: #FFF;
+	border-radius: 6px;
+}
+
+.progress>span>span {
+	padding: 0 8px;
+	font-size: 11px;
+	font-weight: bold;
+	color: #404040;
+	color: rgba(0, 0, 0, 0.7);
+	text-shadow: 0 1px rgba(255, 255, 255, 0.4);
+}
+
+@sprite .myBackground>span:before  {
+	gwt-image: "progressTexture"; 
+	other: repeat-x;
+	content: '';
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	z-index: 1;
+	height: 18px;
+	border-radius: 6px;
+} 
+
+.progress .blue {
+	background: #5aaadb;
+	border-color: #7bbbe2;
+	background-image: -webkit-linear-gradient(top, #aed5ed, #7bbbe2 70%, #5aaadb);
+	background-image: -moz-linear-gradient(top, #aed5ed, #7bbbe2 70%, #5aaadb);
+	background-image: -o-linear-gradient(top, #aed5ed, #7bbbe2 70%, #5aaadb);
+	background-image: linear-gradient(to bottom, #aed5ed, #7bbbe2 70%, #5aaadb);
+}

src/main/java/org/gcube/portlets/widgets/workspaceuploader/client/resource/ProgressBarCssAndImages.java

@@ -0,0 +1,31 @@
+package org.gcube.portlets.widgets.workspaceuploader.client.resource;
+
+import com.google.gwt.core.client.GWT;
+import com.google.gwt.resources.client.ClientBundle;
+import com.google.gwt.resources.client.CssResource;
+import com.google.gwt.resources.client.ImageResource;
+import com.google.gwt.resources.client.ImageResource.ImageOptions;
+import com.google.gwt.resources.client.ImageResource.RepeatStyle;
+
+public interface ProgressBarCssAndImages extends ClientBundle {
+
+	public static final ProgressBarCssAndImages INSTANCE = GWT
+			.create(ProgressBarCssAndImages.class);
+
+	@Source("FileUpload.css")
+	public CssResource css();
+
+	@Source("PanelFileUpload.css")
+	public CssResource panelCss();
+
+	@Source("ok.png")
+	ImageResource ok();
+
+	@ImageOptions(repeatStyle = RepeatStyle.Horizontal)
+	@Source("progress.png")
+	ImageResource progressTexture();
+
+	interface MyCssResource extends CssResource {
+		String myBackground();
+	}
+}

src/main/java/org/gcube/portlets/widgets/workspaceuploader/client/resource/WorkspaceUploaderIcons.java

@@ -35,7 +35,7 @@ public interface WorkspaceUploaderIcons extends ClientBundle {
 	 *
 	 * @return the image resource
 	 */
-	@Source("completed.gif")
+	@Source("ok.png")
 	ImageResource completed();
 
 	/**

src/main/java/org/gcube/portlets/widgets/workspaceuploader/client/uploader/DialogUpload.java

@@ -34,7 +34,6 @@ import com.google.gwt.user.client.ui.HasHorizontalAlignment;
 import com.google.gwt.user.client.ui.HasVerticalAlignment;
 import com.google.gwt.user.client.ui.Hidden;
 import com.google.gwt.user.client.ui.HorizontalPanel;
-import com.google.gwt.user.client.ui.Label;
 import com.google.gwt.user.client.ui.VerticalPanel;
 
 

src/main/java/org/gcube/portlets/widgets/workspaceuploader/client/uploader/MonitorPanel.java

@@ -6,16 +6,12 @@ package org.gcube.portlets.widgets.workspaceuploader.client.uploader;
 import java.util.HashMap;
 import java.util.Map;
 
-import org.gcube.portlets.widgets.workspaceuploader.client.StringUtil;
+import org.gcube.portlets.widgets.workspaceuploader.client.resource.ProgressBarCssAndImages;
-import org.gcube.portlets.widgets.workspaceuploader.client.events.CancelUploadEvent;
-import org.gcube.portlets.widgets.workspaceuploader.client.resource.WorkspaceUploaderResources;
 import org.gcube.portlets.widgets.workspaceuploader.shared.WorkspaceUploaderItem;
 import org.gcube.portlets.widgets.workspaceuploader.shared.WorkspaceUploaderItem.UPLOAD_STATUS;
 
 import com.google.gwt.core.shared.GWT;
 import com.google.gwt.dom.client.Style.Unit;
-import com.google.gwt.event.dom.client.ClickEvent;
-import com.google.gwt.event.dom.client.ClickHandler;
 import com.google.gwt.event.logical.shared.CloseEvent;
 import com.google.gwt.event.logical.shared.CloseHandler;
 import com.google.gwt.event.shared.HandlerManager;
@@ -23,7 +19,6 @@ import com.google.gwt.user.client.Window;
 import com.google.gwt.user.client.Window.ClosingEvent;
 import com.google.gwt.user.client.ui.HTML;
 import com.google.gwt.user.client.ui.HorizontalPanel;
-import com.google.gwt.user.client.ui.Image;
 import com.google.gwt.user.client.ui.ScrollPanel;
 import com.google.gwt.user.client.ui.VerticalPanel;
 
@@ -41,9 +36,13 @@ public class MonitorPanel extends ScrollPanel{
 	private Map<String, WorkspaceUploaderItem> mapUploading = new HashMap<String, WorkspaceUploaderItem>();
 //	private Map<String, Timer> mapTimer = new HashMap<String, Timer>();
 //	private Map<String, DialogBox> mapDialog= new HashMap<String, DialogBox>();
-	private Map<String, HorizontalPanel> mapPanels = new HashMap<String, HorizontalPanel>();
+	private Map<String, UploaderProgressView> mapPanels = new HashMap<String, UploaderProgressView>();
 	private HandlerManager eventBus;
 	private HorizontalPanel hpNoUploads = new HorizontalPanel();
+	
+	static {
+		ProgressBarCssAndImages.INSTANCE.css().ensureInjected();
+	}
 	/**
 	 * Instantiates a new monitor panel.
 	 *
@@ -85,13 +84,10 @@ public class MonitorPanel extends ScrollPanel{
 		mapUploading.put(uploader.getClientUploadKey(), uploader);
 		
 		if(mapPanels.get(uploader.getClientUploadKey())!=null){
-			HorizontalPanel hp = mapPanels.get(uploader.getClientUploadKey());
+			UploaderProgressView upv = mapPanels.get(uploader.getClientUploadKey());
-			updateInfo(hp, uploader);
+			upv.update(uploader);
 		}else{
-			HorizontalPanel hp = new HorizontalPanel();
+			GWT.log("Skip update, uploader: "+uploader.getClientUploadKey() +" "+uploader.getFile().toString()+", not found!");
-			updateInfo(hp, uploader);
-			mapPanels.put(uploader.getClientUploadKey(), hp);
-			verticalPanel.add(hp);
 		}
 	}
 	
@@ -104,23 +100,11 @@ public class MonitorPanel extends ScrollPanel{
 	public void newWorkspaceUploder(WorkspaceUploaderItem uploader, final String fileName){
 		removeNoUploads();
 		mapUploading.put(uploader.getClientUploadKey(), uploader);
-		
+		UploaderProgressView upv = new UploaderProgressView(uploader, fileName, eventBus);
-		HorizontalPanel hp = new HorizontalPanel();
+		mapPanels.put(uploader.getClientUploadKey(), upv);
-		HTML html = new HTML();
+		VerticalPanel upvPanel = upv.getPanel();
-		String text = "<div><img src='"+WorkspaceUploaderResources.getImageLoading().getUrl()+"'>";
+		upvPanel.addStyleName("upladerMargin");
-		String msg = StringUtil.ellipsize("Uploading "+fileName, MAX_CHARS, 0);
+		verticalPanel.add(upvPanel);
-		text+="<span style='margin-left:5px; vertical-align: top;'>"+msg+"</span>";
-		text+="</div>";
-		
-		html.setHTML(text);
-		html.setTitle("Uploading "+fileName);
-		hp.add(html);
-		
-		//TODO *************************************************REMOVE THIS
-//		hp.add(handleCancelUplad(uploader, hp));
-		
-		mapPanels.put(uploader.getClientUploadKey(), hp);
-		verticalPanel.add(hp);
 	}
 	
 
@@ -128,10 +112,10 @@ public class MonitorPanel extends ScrollPanel{
 	 * Handle cancel upload.
 	 *
 	 * @param uploader the uploader
-	 * @param hp the hp
+	 * @param vp the hp
 	 * @return the image
 	 */
-	private Image handleCancelUpload(final WorkspaceUploaderItem uploader, final HorizontalPanel hp){
+	/*private Image handleCancelUpload(final WorkspaceUploaderItem uploader, final VerticalPanel vp){
 
 		Image cancel = WorkspaceUploaderResources.getImageCancel();
 		cancel.setTitle("Cancel upload");
@@ -143,74 +127,74 @@ public class MonitorPanel extends ScrollPanel{
 				GWT.log("Click cancel");
 				String fileName = uploader.getFile()!=null? uploader.getFile().getFileName(): "";
 				if(Window.confirm("Confirm cancel uploading "+fileName+"?")){
-					hp.clear();
+					vp.clear();
 					HTML html = new HTML();
-					hp.add(html);
+					vp.add(html);
 					String text = "<div><img src='"+WorkspaceUploaderResources.getImageCancel().getUrl()+"'>";
 					String msg = StringUtil.ellipsize("Aborting upload: "+fileName, MAX_CHARS, 0);
 					text+="<span style='margin-left:5px; vertical-align: top;'>"+msg+"</span></div>";
 					html.setHTML(text);
-					eventBus.fireEvent(new CancelUploadEvent(uploader, hp, fileName));
+					eventBus.fireEvent(new CancelUploadEvent(uploader, vp, fileName));
 				}
 			}
 		});
 		return cancel;
-	}
+	}*/
 	
-	/**
+//	/**
-	 * Update info.
+//	 * Update info.
-	 *
+//	 *
-	 * @param hp the hp
+//	 * @param vp the hp
-	 * @param uploader the uploader
+//	 * @param uploader the uploader
-	 */
+//	 */
-	private void updateInfo(HorizontalPanel hp, WorkspaceUploaderItem uploader){
+//	private void updateInfo(VerticalPanel vp, WorkspaceUploaderItem uploader){
-		hp.clear();
+//		vp.clear();
-		HTML html = new HTML();
+//		HTML html = new HTML();
-		hp.add(html);
+//		vp.add(html);
-		String text;
+//		String text;
-		switch(uploader.getUploadStatus()){
+//		switch(uploader.getUploadStatus()){
-		case COMPLETED:
+//		case COMPLETED:
-			text = "<div><img src='"+WorkspaceUploaderResources.getImageCompleted().getUrl()+"'>";
+//			text = "<div><img src='"+WorkspaceUploaderResources.getImageCompleted().getUrl()+"'>";
-			text+="<span style='margin-left:5px; vertical-align: top;'>"+StringUtil.ellipsize(uploader.getFile().getFileName()+" uploaded successfully!", MAX_CHARS, 0)+"</span></div>";
+//			text+="<span style='margin-left:5px; vertical-align: top;'>"+StringUtil.ellipsize(uploader.getFile().getFileName()+" uploaded successfully!", MAX_CHARS, 0)+"</span></div>";
-//			GWT.log(text);
+////			GWT.log(text);
-			html.setHTML(text);
+//			html.setHTML(text);
-			html.setTitle(uploader.getStatusDescription());
+//			html.setTitle(uploader.getStatusDescription());
-			break;
+//			break;
-		case FAILED:
+//		case FAILED:
-			text = "<div><img src='"+WorkspaceUploaderResources.getImageFailed().getUrl()+"'>";
+//			text = "<div><img src='"+WorkspaceUploaderResources.getImageFailed().getUrl()+"'>";
-			text+="<span style='margin-left:5px; vertical-align: top;'>"+StringUtil.ellipsize(uploader.getStatusDescription(), MAX_CHARS, 0)+"</span></div>";
+//			text+="<span style='margin-left:5px; vertical-align: top;'>"+StringUtil.ellipsize(uploader.getStatusDescription(), MAX_CHARS, 0)+"</span></div>";
-//			GWT.log(text);
+////			GWT.log(text);
-			html.setHTML(text);
+//			html.setHTML(text);
-			html.setTitle(uploader.getStatusDescription());
+//			html.setTitle(uploader.getStatusDescription());
-			break;
+//			break;
-		case IN_PROGRESS:
+//		case IN_PROGRESS:
-			text = "<div><img src='"+WorkspaceUploaderResources.getImageUpload().getUrl()+"'>";
+//			text = "<div><img src='"+WorkspaceUploaderResources.getImageUpload().getUrl()+"'>";
-			String msg = StringUtil.ellipsize(uploader.getUploadProgress().getLastEvent().getReadPercentage()+"% "+uploader.getFile().getFileName(), MAX_CHARS, 0);
+//			String msg = StringUtil.ellipsize(uploader.getUploadProgress().getLastEvent().getReadPercentage()+"% "+uploader.getFile().getFileName(), MAX_CHARS, 0);
-			text+="<span style='margin-left:5px; vertical-align: top;'>"+msg+"</span>";
+//			text+="<span style='margin-left:5px; vertical-align: top;'>"+msg+"</span>";
-			text+="</div>";
+//			text+="</div>";
-//			GWT.log(text);
+////			GWT.log(text);
-			html.setHTML(text);
+//			html.setHTML(text);
-			html.setTitle(uploader.getStatusDescription());
+//			html.setTitle(uploader.getStatusDescription());
-			if(uploader.getUploadProgress().getLastEvent().getReadPercentage()!=100)
+//			if(uploader.getUploadProgress().getLastEvent().getReadPercentage()!=100)
-				hp.add(handleCancelUpload(uploader, hp));
+//				vp.add(handleCancelUpload(uploader, vp));
-			break; 
+//			break; 
-		case WAIT:
+//		case WAIT:
-			text = "<div><img src='"+WorkspaceUploaderResources.getImageLoading().getUrl()+"'>";
+//			text = "<div><img src='"+WorkspaceUploaderResources.getImageLoading().getUrl()+"'>";
-			
+//			
-			String descr = "";
+//			String descr = "";
-			if(uploader.getFile()!=null && uploader.getFile().getFileName()!=null)
+//			if(uploader.getFile()!=null && uploader.getFile().getFileName()!=null)
-				descr = uploader.getFile().getFileName();
+//				descr = uploader.getFile().getFileName();
-			else
+//			else
-				descr = uploader.getStatusDescription();
+//				descr = uploader.getStatusDescription();
-			
+//			
-			text+="<span style='margin-left:5px; vertical-align: top;'>"+descr+"</span>";
+//			text+="<span style='margin-left:5px; vertical-align: top;'>"+descr+"</span>";
-			text+="</div>";
+//			text+="</div>";
-//			GWT.log(text);
+////			GWT.log(text);
-			html.setHTML(text);
+//			html.setHTML(text);
-//			hp.add(handleCancelUplad(uploader, hp));
+////			hp.add(handleCancelUplad(uploader, hp));
-			break;
+//			break;
-		}
+//		}
-	}
+//	}
 	
 	/**
 	 * Adds the close handler.

src/main/java/org/gcube/portlets/widgets/workspaceuploader/client/uploader/UploaderMonitor.java

@@ -30,7 +30,7 @@ import com.google.gwt.user.client.Timer;
 import com.google.gwt.user.client.Window;
 import com.google.gwt.user.client.rpc.AsyncCallback;
 import com.google.gwt.user.client.ui.HTML;
-import com.google.gwt.user.client.ui.HorizontalPanel;
+import com.google.gwt.user.client.ui.VerticalPanel;
 
 /**
  * The Class UploaderMonitor.
@@ -101,11 +101,12 @@ public class UploaderMonitor {
 								return;
 								}	
 							case OK: {
-								HorizontalPanel hp = deleteTimerEvent.getHp();
+								UploaderProgressView upv = deleteTimerEvent.getProgessView();
-								if(hp!=null){
+								VerticalPanel vp = upv.getPanel();
-									hp.clear();
+								if(vp!=null){
+									vp.clear();
 									HTML html = new HTML();
-									hp.add(html);
+									vp.add(html);
 									String text = "<div><img src='"+WorkspaceUploaderResources.getImageCancelRed().getUrl()+"'>";
 									text+="<span style='margin-left:5px; vertical-align: top;'>Upload "+deleteTimerEvent.getFileName()+ " aborted</span></div>";
 									html.setHTML(text);

src/main/java/org/gcube/portlets/widgets/workspaceuploader/client/uploader/UploaderProgressView.java

@@ -0,0 +1,172 @@
+/**
+ * 
+ */
+package org.gcube.portlets.widgets.workspaceuploader.client.uploader;
+
+import org.gcube.portlets.widgets.workspaceuploader.client.StringUtil;
+import org.gcube.portlets.widgets.workspaceuploader.client.events.CancelUploadEvent;
+import org.gcube.portlets.widgets.workspaceuploader.client.resource.WorkspaceUploaderResources;
+import org.gcube.portlets.widgets.workspaceuploader.client.uploader.bar.ProgressBar;
+import org.gcube.portlets.widgets.workspaceuploader.shared.WorkspaceUploaderItem;
+
+import com.google.gwt.core.shared.GWT;
+import com.google.gwt.event.dom.client.ClickEvent;
+import com.google.gwt.event.dom.client.ClickHandler;
+import com.google.gwt.event.shared.HandlerManager;
+import com.google.gwt.user.client.Window;
+import com.google.gwt.user.client.ui.HTML;
+import com.google.gwt.user.client.ui.HorizontalPanel;
+import com.google.gwt.user.client.ui.Image;
+import com.google.gwt.user.client.ui.VerticalPanel;
+
+
+/**
+ * The Class UploaderProgressView.
+ *
+ * @author Francesco Mangiacrapa francesco.mangiacrapa@isti.cnr.it
+ * Oct 12, 2015
+ */
+public class UploaderProgressView {
+	
+	private VerticalPanel vp = new VerticalPanel();
+	private static final int MAX_CHARS = 50;
+	private HorizontalPanel hp = new HorizontalPanel();
+	private HTML html = new HTML();
+	private ProgressBar bar = new ProgressBar();
+	private HandlerManager eventBus;
+	
+	/**
+	 * Instantiates a new uploader progress view.
+	 *
+	 * @param uploader the uploader
+	 * @param fileName the file name
+	 * @param eventBus the event bus
+	 */
+	public UploaderProgressView(WorkspaceUploaderItem uploader, final String fileName, HandlerManager eventBus) {
+		this.eventBus = eventBus;
+		
+		String text = "<div><img src='"+WorkspaceUploaderResources.getImageLoading().getUrl()+"'>";
+		String msg = StringUtil.ellipsize("Uploading "+fileName, MAX_CHARS, 0);
+		text+="<span style='margin-left:5px; vertical-align: top;'>"+msg+"</span>";
+		text+="</div>";
+		
+		html.setHTML(text);
+		html.setTitle("Uploading "+fileName);
+		hp.add(html);
+		
+		bar.update(0);
+		
+		vp.add(hp);
+		vp.add(bar);
+	}
+	
+	/**
+	 * Update.
+	 *
+	 * @param uploader the uploader
+	 */
+	public void update(WorkspaceUploaderItem uploader){
+
+		String text;
+		switch(uploader.getUploadStatus()){
+		case COMPLETED:
+			text = "<div><img src='"+WorkspaceUploaderResources.getImageCompleted().getUrl()+"'>";
+			text+="<span style='margin-left:5px; vertical-align: top;'>"+StringUtil.ellipsize(uploader.getFile().getFileName()+" uploaded successfully!", MAX_CHARS, 0)+"</span></div>";
+//			GWT.log(text);
+			html.setHTML(text);
+			html.setTitle(uploader.getStatusDescription());
+			bar.update(uploader.getUploadProgress().getLastEvent().getReadPercentage());
+			try{
+				vp.remove(bar);
+			}catch (Exception e) {
+				// TODO: handle exception
+			}
+			break;
+		case FAILED:
+			text = "<div><img src='"+WorkspaceUploaderResources.getImageFailed().getUrl()+"'>";
+			text+="<span style='margin-left:5px; vertical-align: top;'>"+StringUtil.ellipsize(uploader.getStatusDescription(), MAX_CHARS, 0)+"</span></div>";
+//			GWT.log(text);
+			html.setHTML(text);
+			html.setTitle(uploader.getStatusDescription());
+			bar.update(uploader.getUploadProgress().getLastEvent().getReadPercentage());
+			break;
+		case IN_PROGRESS:
+			text = "<div><img src='"+WorkspaceUploaderResources.getImageUpload().getUrl()+"'>";
+			String msg = StringUtil.ellipsize(uploader.getUploadProgress().getLastEvent().getReadPercentage()+"% "+uploader.getFile().getFileName(), MAX_CHARS, 0);
+			text+="<span style='margin-left:5px; vertical-align: top;'>"+msg+"</span>";
+			text+="</div>";
+//			GWT.log(text);
+			html.setHTML(text);
+			html.setTitle(uploader.getStatusDescription());
+			if(uploader.getUploadProgress().getLastEvent().getReadPercentage()!=100)
+				hp.add(handleCancelUpload(uploader));
+			bar.update(uploader.getUploadProgress().getLastEvent().getReadPercentage());
+			break; 
+		case WAIT:
+			text = "<div><img src='"+WorkspaceUploaderResources.getImageLoading().getUrl()+"'>";
+			
+			String descr = "";
+			if(uploader.getFile()!=null && uploader.getFile().getFileName()!=null)
+				descr = uploader.getFile().getFileName();
+			else
+				descr = uploader.getStatusDescription();
+			
+			text+="<span style='margin-left:5px; vertical-align: top;'>"+descr+"</span>";
+			text+="</div>";
+//			GWT.log(text);
+			html.setHTML(text);
+			
+			if(uploader.getUploadProgress().getLastEvent()!=null)
+				bar.update(uploader.getUploadProgress().getLastEvent().getReadPercentage());
+			else
+				bar.update(0);
+			
+			break;
+		default:
+			break;
+		}
+	}
+	
+	/**
+	 * Handle cancel upload.
+	 *
+	 * @param uploader the uploader
+	 * @return the image
+	 */
+	private Image handleCancelUpload(final WorkspaceUploaderItem uploader){
+
+		Image cancel = WorkspaceUploaderResources.getImageCancel();
+		cancel.setTitle("Cancel upload");
+		cancel.addStyleName("cancel-upload");
+		cancel.addClickHandler(new ClickHandler() {
+			
+			@Override
+			public void onClick(ClickEvent event) {
+				GWT.log("Click cancel");
+				String fileName = uploader.getFile()!=null? uploader.getFile().getFileName(): "";
+				if(Window.confirm("Confirm cancel uploading "+fileName+"?")){
+					hp.clear();
+					HTML html = new HTML();
+					hp.add(html);
+					String text = "<div><img src='"+WorkspaceUploaderResources.getImageCancel().getUrl()+"'>";
+					String msg = StringUtil.ellipsize("Aborting upload: "+fileName, MAX_CHARS, 0);
+					text+="<span style='margin-left:5px; vertical-align: top;'>"+msg+"</span></div>";
+					html.setHTML(text);
+					eventBus.fireEvent(new CancelUploadEvent(uploader, UploaderProgressView.this, fileName));
+				}
+			}
+		});
+		return cancel;
+	}
+	
+
+	/**
+	 * Gets the panel.
+	 *
+	 * @return the panel
+	 */
+	public VerticalPanel getPanel() {
+		return vp;
+	}
+
+}

src/main/java/org/gcube/portlets/widgets/workspaceuploader/client/uploader/bar/ProgressBar.java

@@ -0,0 +1,36 @@
+package org.gcube.portlets.widgets.workspaceuploader.client.uploader.bar;
+
+import com.google.gwt.core.client.GWT;
+import com.google.gwt.uibinder.client.UiBinder;
+import com.google.gwt.uibinder.client.UiField;
+import com.google.gwt.user.client.ui.Composite;
+import com.google.gwt.user.client.ui.HTML;
+import com.google.gwt.user.client.ui.Widget;
+
+public class ProgressBar extends Composite {
+
+	private static final double COMPLETE_PERECENTAGE = 100d;
+	private static final double START_PERECENTAGE = 0d;
+
+	private static ProgressBarUiBinder uiBinder = GWT
+.create(ProgressBarUiBinder.class);
+
+	interface ProgressBarUiBinder extends UiBinder<Widget, ProgressBar> { }
+
+	@UiField HTML progressBarContainer;
+
+	public ProgressBar() {
+		initWidget(uiBinder.createAndBindUi(this));
+	}
+
+	public void update(int percentage) {		
+		if (percentage > 100)
+			percentage = 100;
+		if (percentage < START_PERECENTAGE || percentage > COMPLETE_PERECENTAGE) {
+			throw new IllegalArgumentException("invalid value for percentage " + percentage);
+		} else { //cannot use DOM getElemById cus the second time you open the popup it fails		
+			progressBarContainer.getElement().setAttribute("style", "width: "+percentage+"%");
+			progressBarContainer.getElement().getFirstChildElement().getFirstChildElement().setInnerText(percentage+"%");
+		}
+	}
+}

src/main/java/org/gcube/portlets/widgets/workspaceuploader/client/uploader/bar/ProgressBar.ui.xml

@@ -0,0 +1,13 @@
+<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
+<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
+	xmlns:g="urn:import:com.google.gwt.user.client.ui">
+	<g:HTMLPanel>
+		<div class="bar-container">
+			<g:HTML styleName="progress myBackground" ui:field='progressBarContainer' >
+				<span class="blue" style="width: 100%;">
+					<span id="upload-percent-number">0%</span>
+				</span>
+			</g:HTML>
+		</div>
+	</g:HTMLPanel>
+</ui:UiBinder> 

src/main/java/org/gcube/portlets/widgets/workspaceuploader/public/workspaceuploader.css

@@ -104,6 +104,10 @@ h1 {
 		sans-serif;
 }
 
+.upladerMargin{
+	margin-bottom: 3px;
+}
+
 /* .baloonGoTop :HOVER { */
 /* 	cursor: pointer; */
 /* 	color: #FFF; */