UploadMgr contrib and drop event

classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

UploadMgr contrib and drop event

zaucker
Hi,

some of my users discovered somehow, that the UploadMgr contrib does
"support" a file drag/drop on the Upload button. At least with Chromser,
with either QX 3.5.x and 5.0.

However, the same doesn't seem to work with IE (tested with IE11). Instead,
the browser default action (opening the file) is called.

I couldn't find anything in the UploadMgr source explicetely supporting the
drop event. Thus two questions:

- Can I change IE's behaviour somehow to match the Chrome behaviour?

- Is it possible to somehow call UploadMgr programmatically from a native
   HTML5 drop handler?

Thanks (for UploadMgr and any hints),
Ftitz

--
Oetiker+Partner AG tel: +41 62 775 9903 (direct)
Fritz Zaucker                        +41 62 775 9900 (switch board)
Aarweg 15                            +41 79 675 0630 (mobile)
CH-4600 Olten                   fax: +41 62 775 9905
Schweiz                         web: www.oetiker.ch

------------------------------------------------------------------------------
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: UploadMgr contrib and drop event

John Spackman-3
Hi Fritz

Sorry for the delay in getting back to you; UploadMgr does not explicitly
support deag & drop for files, so this only works on Chrome because there
is actually a transparent <input type=file> on top of the upload widget
and Chrome adds that functionality automatically.

It should be possible to add the drag and drop support for later versions
of IE (probably IE10+), I don¹t have time to look at it right now but if
you want to do it yourself I¹m happy to review and accept changes.

It would require adding support for the ³drop² DOM event (not the qooxdoo
event) and fetching the list of files from the event handler; once that
works, there would need to be a change to the addFile & _createFile API in
AbstractHandler and XhrHandler to allow a list of files to be provided
without an <input>.

Regards
John

On 03/08/2015 20:58, "Fritz Zaucker" <[hidden email]> wrote:

>Hi,
>
>some of my users discovered somehow, that the UploadMgr contrib does
>"support" a file drag/drop on the Upload button. At least with Chromser,
>with either QX 3.5.x and 5.0.
>
>However, the same doesn't seem to work with IE (tested with IE11).
>Instead,
>the browser default action (opening the file) is called.
>
>I couldn't find anything in the UploadMgr source explicetely supporting
>the
>drop event. Thus two questions:
>
>- Can I change IE's behaviour somehow to match the Chrome behaviour?
>
>- Is it possible to somehow call UploadMgr programmatically from a native
>   HTML5 drop handler?
>
>Thanks (for UploadMgr and any hints),
>Ftitz
>
>--
>Oetiker+Partner AG tel: +41 62 775 9903 (direct)
>Fritz Zaucker                        +41 62 775 9900 (switch board)
>Aarweg 15                            +41 79 675 0630 (mobile)
>CH-4600 Olten                   fax: +41 62 775 9905
>Schweiz                         web: www.oetiker.ch
>
>--------------------------------------------------------------------------
>----
>_______________________________________________
>qooxdoo-devel mailing list
>[hidden email]
>https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel




------------------------------------------------------------------------------
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: UploadMgr contrib and drop event

fritz
Hi John

On Wed, 5 Aug 2015, John Spackman wrote:

> Sorry for the delay in getting back to you; UploadMgr does not explicitly
> support drag & drop for files, so this only works on Chrome because there
> is actually a transparent <input type=file> on top of the upload widget
> and Chrome adds that functionality automatically.

I see, just suspected something like that.

> It should be possible to add the drag and drop support for later versions
> of IE (probably IE10+), I don¹t have time to look at it right now but if
> you want to do it yourself I¹m happy to review and accept changes.
>
> It would require adding support for the ³drop² DOM event (not the qooxdoo
> event) and fetching the list of files from the event handler; once that
> works, there would need to be a change to the addFile & _createFile API in
> AbstractHandler and XhrHandler to allow a list of files to be provided
> without an <input>.

I managed to get it to work in my application without changes to your
contrib like that:

  this.__addFilehander = function() {
   // my handler showing progess, etc
  }

  this.__addDocButton = new com.zenesis.qx.upload.UploadToolbarButton("Upload"), "icon/16/actions/list-add.png");
         this.__uploader = new com.zenesis.qx.upload.UploadMgr(addDocButton, 'upload');
         this.__uploader.addListener("addFile", this.__addFileHandler, this);

         this.__dropFileHandler = function() {
             var uploaderHandler = this.__uploader.getUploadHandler();
             var bgColor = this.getBackgroundColor();
             var that = this;
             var element = this.getContentElement().getDomElement();
             element.ondrop = function(e) {
                 e.stopPropagation();
                 e.preventDefault();
                 that.setBackgroundColor(bgColor);

                 var files = e.dataTransfer.files;
// Here is the trick: just pass a map instead of the input element, as the
// contrib only uses the files property of the input element.
                 uploaderHandler.addFile({files: files} , that.__addDocButton);
                 uploaderHandler.beginUploads();
             };
             element.ondragenter = function(e) {
                 that.setBackgroundColor('blue');
                 return false;
             };
             element.ondragleave = function(e) {
                 that.setBackgroundColor(bgColor);
                 return false;
             };
             element.ondragover = function(e) {
                 that.setBackgroundColor('blue');
                 return false;
             };
         };

         this.addListener('appear', this.__dropFileHandler, this);

I am actually adding the drop support not only to the upload button (which
would also be possible, of course), but to widget containing the button.

Cheers,
Fritz

--
Oetiker+Partner AG              tel: +41 62 775 9903 (direct)
Fritz Zaucker                        +41 62 775 9900 (switch board)
Aarweg 15                            +41 79 675 0630 (mobile)
CH-4600 Olten                   fax: +41 62 775 9905
Schweiz                         web: www.oetiker.ch
------------------------------------------------------------------------------

_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel