Page MenuHomePhabricator

Editing via the web interface, "Drag and drop a file here" does not accept files in "Add a new file or open an existing file"
Closed, ResolvedPublic

Description

This problem may not be a bug from the wikimedia, but report it because it happened here.

Click the 'ADD/OPEN/UPLOAD' in a commit, try to drag and drop a file to upload it, the Microsoft Edge (beta 88) browser will open it, no indicator to accept it.

Dialog is simply not accepting a drag'n drop event. The Browse button does open a file dialog and lets one upload a file.

gerrit_add_file_dialog.png (350×810 px, 20 KB)

Event Timeline

Thanks for reporting this. For the future, please follow https://www.mediawiki.org/wiki/How_to_report_a_bug . It took me a while to understand that this is probably about editing via the web-interface.

Aklapper renamed this task from "Drag and drop a file here" not work in "Add a new file or open an existing file" to Editing via the web interface, "Drag and drop a file here" does not work in "Add a new file or open an existing file" with Microsoft Edge.Feb 13 2021, 2:37 PM
Aklapper renamed this task from Editing via the web interface, "Drag and drop a file here" does not work in "Add a new file or open an existing file" with Microsoft Edge to Editing via the web interface, "Drag and drop a file here" does not accept files in "Add a new file or open an existing file".Feb 13 2021, 2:41 PM

Or maybe it isn't? Looks like I can also get that dialog by going to https://gerrit.wikimedia.org/r/c/labs/tools/crosswatch/+/663148,edit and then clicking ADD/OPEN/UPLOAD.

I can reproduce with Firefox 85 on Linux.

在T274699#6828171中,@Aklapper写道:

Thanks for reporting this. For the future, please follow https://www.mediawiki.org/wiki/How_to_report_a_bug . It took me a while to understand that this is probably about editing via the web-interface.

Okay, this is because I'm just more familiar with the menu on the left side of the avatar (it only provide the ‘create task’) rather than the create tasks submenus, and it seems that I cannot change the type

在T274699#6828216中,@Travelexperts写道:

That link is not working Aklapper?

That link is work for me.

hashar subscribed.

Same on Firefox 78. From a very quick look at Gerrit source code:

polygerrit-ui/app/elements/edit/gr-edit-controls/gr-edit-controls_html.js
<div id="dragDropArea" on-drop="_handleDragAndDropUpload">
  <p>Drag and drop a file here</p>
  <p>or</p>

The function is defined in:

polygerrit-ui/app/elements/edit/gr-edit-controls/gr-edit-controls.js
  _handleDragAndDropUpload(event) {
    // We prevent the default clicking.
    event.preventDefault();
    event.stopPropagation();

    this._fileUpload(event);
  }

  _handleFileUploadChanged(event) {
    this._fileUpload(event);
  }

...

  _fileUpload(event) {
    const e = event.target.files || event.dataTransfer.files;
    for (const file of e) {
      if (!file) continue;

      let path = this._path;
      if (!path) {
        path = file.name;
      }

      const fr = new FileReader();
      fr.file = file;
      fr.onload = fileLoadEvent => {
        if (!fileLoadEvent) return;
        const fileData = fileLoadEvent.target.result;
        this._handleUploadConfirm(path, fileData);
      };
      fr.readAsDataURL(file);
    }
  }

But in Firefox when I look at the dragDropArea div, the drop event has:

function(t) {
  e[n] ? e[n](t, t.detail) : console.warn("listener method `" + n + "` not defined")
}

With Chromium 88, the drop event seems to point to the proper code, but when I drag a file to the area, the icon does not change and the event is not captured. Chromium just open the file in a new tab.

The issue should be filed to Upstream https://bugs.chromium.org/p/gerrit/issues/list unless someone with knowledge about browser drag'n drop and javascript can investigate deeper and fix it. Beside that there is little we can do.

@YFdyh000 that bug is similar to the other you have reported T274729 . Gerrit does have some dialogs in the web pages to act on repositories, but overall I don't think those features are well tested nor do I think they are vastly used. The Create a change button is very hard to discover for example.

在T274699#6836393中,@hashar写道:

@YFdyh000 that bug is similar to the other you have reported T274729 . Gerrit does have some dialogs in the web pages to act on repositories, but overall I don't think those features are well tested nor do I think they are vastly used. The Create a change button is very hard to discover for example.

This may be a digression. I understand that the web interface may not be the preferred, but because I have tried many times but failed with TortoiseGit, ssh key and some unfamiliar commands for Gerrit, so I prefer to use this WYSIWYG and successful interface. I understand git commands and they work well on Github. :(

The patch is included in Gerrit 3.3.5 which is the version we are running right now.

I have also spotted https://gerrit-review.googlesource.com/c/gerrit/+/313702 Remove contenteditable="false" from within dragDropArea which might be related and is in 3.3.6.

I have deployed Gerrit 3.3.6 and I have been able to drag'n drop a file using Firefox 78.