Added drag'n'drop file upload in the file list area
[pithos-web-client] / src / gr / grnet / pithos / web / client / FileUploadDialog.java
1 /*
2  * Copyright 2011-2012 GRNET S.A. All rights reserved.
3  *
4  * Redistribution and use in source and binary forms, with or
5  * without modification, are permitted provided that the following
6  * conditions are met:
7  *
8  *   1. Redistributions of source code must retain the above
9  *      copyright notice, this list of conditions and the following
10  *      disclaimer.
11  *
12  *   2. Redistributions in binary form must reproduce the above
13  *      copyright notice, this list of conditions and the following
14  *      disclaimer in the documentation and/or other materials
15  *      provided with the distribution.
16  *
17  * THIS SOFTWARE IS PROVIDED BY GRNET S.A. ``AS IS'' AND ANY EXPRESS
18  * OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
19  * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
20  * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL GRNET S.A OR
21  * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
22  * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
23  * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF
24  * USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
25  * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT
26  * LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN
27  * ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
28  * POSSIBILITY OF SUCH DAMAGE.
29  *
30  * The views and conclusions contained in the software and
31  * documentation are those of the authors and should not be
32  * interpreted as representing official policies, either expressed
33  * or implied, of GRNET S.A.
34  */
35 package gr.grnet.pithos.web.client;
36
37 import gr.grnet.pithos.web.client.foldertree.Folder;
38
39 import com.google.gwt.core.client.Scheduler;
40 import com.google.gwt.dom.client.NativeEvent;
41 import com.google.gwt.event.dom.client.ClickEvent;
42 import com.google.gwt.event.dom.client.ClickHandler;
43 import com.google.gwt.event.dom.client.KeyCodes;
44 import com.google.gwt.user.client.Command;
45 import com.google.gwt.user.client.Event.NativePreviewEvent;
46 import com.google.gwt.user.client.ui.Anchor;
47 import com.google.gwt.user.client.ui.Button;
48 import com.google.gwt.user.client.ui.DialogBox;
49 import com.google.gwt.user.client.ui.FileUpload;
50 import com.google.gwt.user.client.ui.FlowPanel;
51 import com.google.gwt.user.client.ui.FormPanel;
52 import com.google.gwt.user.client.ui.Grid;
53 import com.google.gwt.user.client.ui.HasHorizontalAlignment;
54 import com.google.gwt.user.client.ui.Hidden;
55 import com.google.gwt.user.client.ui.HorizontalPanel;
56 import com.google.gwt.user.client.ui.Label;
57 import com.google.gwt.user.client.ui.VerticalPanel;
58
59 /**
60  * The 'File upload' dialog box implementation.
61  */
62 public class FileUploadDialog extends DialogBox {
63
64     public static final boolean DONE = true;
65
66     Anchor close;
67     
68         /**
69          * The Form element that performs the file upload.
70          */
71     protected final FormPanel form = new FormPanel();
72
73         private final FileUpload upload = new FileUpload();
74
75         private final Label filenameLabel = new Label();
76
77     private final Label foldernameLabel = new Label();
78
79     private Button submit;
80
81         protected Folder folder;
82
83     protected Pithos app;
84     
85     private boolean inProgress = false;
86
87         /**
88          * The widget's constructor.
89          */
90         public FileUploadDialog(Pithos _app) {
91                 app = _app;
92                 close = new Anchor("close");
93                 close.addStyleName("close");
94                 close.addClickHandler(new ClickHandler() {
95                         
96                         @Override
97                         public void onClick(ClickEvent event) {
98                                 close();
99                         }
100                 });
101                 // Set the dialog's caption.
102                 setText("File upload");
103                 setAnimationEnabled(true);
104 //              setGlassEnabled(true);
105                 setStyleName("pithos-DialogBox");
106                 setVisible(false);
107                 
108                 // Since we're going to add a FileUpload widget, we'll need to set the
109                 // form to use the POST method, and multipart MIME encoding.
110                 form.setEncoding(FormPanel.ENCODING_MULTIPART);
111                 form.setMethod(FormPanel.METHOD_POST);
112
113                 // Create a panel to hold all of the form widgets.
114                 VerticalPanel panel = new VerticalPanel();
115                 panel.setWidth("470px");
116                 panel.add(close);
117                 form.setWidget(panel);
118
119                 VerticalPanel inner = new VerticalPanel();
120                 inner.addStyleName("inner");
121
122         final Hidden auth = new Hidden("X-Auth-Token");
123         inner.add(auth);
124                 upload.setName("X-Object-Data");
125                 upload.setVisible(false);
126                 filenameLabel.setText("");
127                 filenameLabel.setVisible(false);
128                 filenameLabel.setStyleName("props-labels");
129                 HorizontalPanel fileUploadPanel = new HorizontalPanel();
130                 fileUploadPanel.setVisible(false);
131                 fileUploadPanel.add(filenameLabel);
132                 fileUploadPanel.add(upload);
133                 Grid generalTable = new Grid(2, 2);
134                 generalTable.setText(0, 0, "Folder");
135         generalTable.setWidget(0, 1, foldernameLabel);
136                 generalTable.setWidget(1, 1, fileUploadPanel);
137                 generalTable.getCellFormatter().setStyleName(0, 0, "props-labels");
138         generalTable.getCellFormatter().setStyleName(0, 1, "props-values");
139         generalTable.getCellFormatter().setVisible(1, 0, false);
140                 generalTable.setCellSpacing(4);
141
142                 inner.add(generalTable);
143
144                 FlowPanel uploader = new FlowPanel();
145                 uploader.getElement().setId("uploader");
146                 inner.add(uploader);
147                 
148                 panel.add(inner);
149                 panel.setCellHorizontalAlignment(inner, HasHorizontalAlignment.ALIGN_CENTER);
150                 
151                 setWidget(form);
152                 
153                 Scheduler.get().scheduleDeferred(new Scheduler.ScheduledCommand() {
154                         
155                         @Override
156                         public void execute() {
157                                 center();
158                                 close();
159                         }
160                 });
161         }
162
163         private void refreshFolder() {
164                 if (app.getSelectedTree().equals(app.getFolderTreeView()))
165                         app.updateFolder(folder, true, new Command() {
166                                 
167                                 @Override
168                                 public void execute() {
169                                         app.updateStatistics();
170                                 }
171                         }, true);
172                 else
173                         app.updateOtherSharedFolder(folder, true);
174         }
175         
176         native void setupUpload(FileUploadDialog dlg, Pithos app, String token) /*-{
177                 var uploader = $wnd.$('#uploader').pluploadQueue();
178                 var createUploader = function() {
179                         $wnd.$("#uploader").pluploadQueue({
180                                 // General settings
181                                 runtimes : 'html5, flash, gears, silverlight, browserplus, html4',
182                                 unique_names : true,
183                 
184                                 // Flash settings
185                                 flash_swf_url : 'plupload/js/plupload.flash.swf',
186                 
187                                 // Silverlight settings
188                                 silverlight_xap_url : 'plupload/js/plupload.silverlight.xap',
189                                 
190                                 multiple_queues: true,
191                                 
192                                 preinit: {
193                                         Init: function(up, info) {
194                                                 if ($wnd.console && $wnd.console.log)
195                                                         $wnd.console.log("Init fired");
196                                                 up.settings.file_data_name = "X-Object-Data";                           
197                                         }
198                                         
199                                 },
200                                 
201                                 init: {
202                                         FilesAdded: function(up, files) {
203                                                 var api = app.@gr.grnet.pithos.web.client.Pithos::getApiPath()();
204                                                 var folder = app.@gr.grnet.pithos.web.client.Pithos::getUploadFolder()();
205                                                 var owner = folder.@gr.grnet.pithos.web.client.foldertree.Folder::getOwner()();
206                                                 var uri = folder.@gr.grnet.pithos.web.client.foldertree.Folder::getUri()();
207                                                 var path = api + owner + uri;
208                                                 for (var j=0; j<files.length; j++)
209                                                         files[j].url = path + "/" + files[j].name + "?X-Auth-Token=" + encodeURIComponent(token);
210                                                 dlg.@gr.grnet.pithos.web.client.FileUploadDialog::setInProgress(Z)(true);
211                                                 up.start();
212                                                 app.@gr.grnet.pithos.web.client.Pithos::showUploadIndicator()();
213                                         },
214                                         
215                                         FilesRemoved: function(up, files) {
216                                                 if (up.files.length == 0)
217                                                         dlg.@gr.grnet.pithos.web.client.FileUploadDialog::setInProgress(Z)(false);
218                                                 else
219                                                         dlg.@gr.grnet.pithos.web.client.FileUploadDialog::setInProgress(Z)(true);
220                                         },
221                                         
222                                         BeforeUpload: function(up, file) {
223                                                 if ($wnd.console && $wnd.console.log)
224                                                         $wnd.console.log('About to upload ' + file.url);
225                                                 up.settings.url = file.url;
226                                         },
227                                         
228                                         FileUploaded: function(up, file, response) {
229                                                 if ($wnd.console && $wnd.console.log) {
230                                                         $wnd.console.log('File ' + file.name + ' uploaded');
231                                                         $wnd.console.log('Response: ' + response);
232                                                 }
233                                                 var folder = app.@gr.grnet.pithos.web.client.Pithos::getUploadFolder()();
234                                                 if (folder == file.folder)
235                                                         app.@gr.grnet.pithos.web.client.Pithos::updateUploadFolder()();
236                                         },
237                                         
238                                         UploadComplete: function(up, files) {
239                                                 if ($wnd.console && $wnd.console.log)
240                                                         $wnd.console.log('All files finished');
241                                                 dlg.@gr.grnet.pithos.web.client.FileUploadDialog::setInProgress(Z)(false);
242                                                 dlg.@gr.grnet.pithos.web.client.FileUploadDialog::hideUploadIndicator()();
243                                         },
244                                         
245                                         Error: function(up, error) {
246                                                 if ($wnd.console && $wnd.console.log)
247                                                         $wnd.console.log("Error occured:" + error);
248                                         }
249                                 }
250                         });
251                         return $wnd.$('#uploader').pluploadQueue();
252                 };
253                 
254                 if ($wnd.console && $wnd.console.log)
255                         $wnd.console.log(uploader);
256                 if (!uploader) {
257                         uploader = createUploader();
258                 }
259                 else {
260                         var dropElm = $wnd.document.getElementById('rightPanel');
261                         $wnd.plupload.removeAllEvents(dropElm, uploader.id);
262                         var removeAll = true;
263                         var files = uploader.files;
264                         if ($wnd.console && $wnd.console.log)
265                                 $wnd.console.log('About to check ' + files.length + ' files');
266                         for (var i=0; i<files.length; i++) {
267                                 var f = files[i];
268                                 if (f.status != $wnd.plupload.DONE && f.status != $wnd.plupload.FAILED) {
269                                         removeAll = false;
270                                         break;
271                                 }
272                         }
273                         if (removeAll) {
274                                 if ($wnd.console && $wnd.console.log)
275                                         $wnd.console.log('About to remove ' + files.length + ' files');
276                                 uploader.destroy();
277                                 uploader = createUploader();
278                                 if ($wnd.console && $wnd.console.log)
279                                         $wnd.console.log(uploader);
280                                 dlg.@gr.grnet.pithos.web.client.FileUploadDialog::setInProgress(Z)(false);
281                         }
282                         else {
283                                 dlg.@gr.grnet.pithos.web.client.FileUploadDialog::setInProgress(Z)(true);
284                         }
285                 }
286         }-*/;
287         
288         native boolean isUploading()/*-{
289                 var uploader = $wnd.$("#uploader").pluploadQueue();
290                 var files = uploader.files;
291                 for (var i=0; i<files.length; i++) {
292                         var f = files[i];
293                         if (f.status == $wnd.plupload.UPLOADING) {
294                                 return true;
295                         }
296                 }
297                 return false;
298         }-*/;
299         
300         @Override
301         protected void onPreviewNativeEvent(NativePreviewEvent event) {
302                 super.onPreviewNativeEvent(event);
303
304                 NativeEvent evt = event.getNativeEvent();
305                 if (evt.getType().equals("keydown"))
306                         // Use the popup's key preview hooks to close the dialog when
307                         // escape is pressed.
308                         switch (evt.getKeyCode()) {
309                                 case KeyCodes.KEY_ESCAPE:
310                                         close();
311                                         break;
312                         }
313         }
314
315         public void setFolder(Folder folder) {
316                 this.folder = folder;
317                 foldernameLabel.setText(folder.getName());
318         }
319
320         @Override
321         public void center() {
322                 app.hideUploadIndicator();
323                 setVisible(true);
324                 setModal(true);
325                 super.center();
326                 setupUpload(this, app, app.getToken());
327                 super.center();
328         }
329         
330         private void hideUploadIndicator() {
331                 app.hideUploadIndicator();
332         }
333         
334         void close() {
335                 setVisible(false);
336                 setModal(false);
337                 if (isUploading())
338                         app.showUploadIndicator();
339                 setGlobalDropArea();
340         }
341         
342         native void setGlobalDropArea() /*-{
343                 var uploader = $wnd.$("#uploader").pluploadQueue();
344                 if (uploader.runtime == 'html5') {
345                         uploader.settings.drop_element = 'rightPanel';
346                         var dropElm = $wnd.document.getElementById(uploader.settings.drop_element);
347                         uploader.trigger('PostInit');
348                 }
349         }-*/;
350
351         private void setInProgress(boolean _inProgress) {
352                 inProgress = _inProgress;
353                 if (inProgress)
354                         close.setText("hide");
355                 else
356                         close.setText("close");
357         }
358 }