File Uploader Drag & Drop Doesn't Work

[dave-wood]

Description

With the File Uploader, it seems as though only selecting a file with the cds-file-uploader-button works. If you try dragging a file into a cds-file-uploader-drop-container then the cds-file-uploader-drop-container-changed event that gets triggered contains an empty event.detail.addedFiles object, whereas the cds-file-uploader-button-changed event does include the file if you select it via the button method.

Please also note that the documentation is a bit of a mess in this regard. It includes a close </cds-file-drop-container> tag but no matching open tag - and I believe that's the wrong tag name too. Then further down in the docs it describes it as <cds-file-uploader-drop-container> which I think is the correct name for the tag.

> <cds-file-uploader
>   label-description="Only .jpg and .png files. 500kb max file size"
>   label-title="Account photo"
> >
>   <cds-file-uploader-button accept="image/jpeg image/png" multiple>
>     Drag and drop files here or click to upload
>   </cds-file-drop-container>
> </cds-file-uploader>

Component(s) impacted

cds-file-uploader

Browser

Firefox

Carbon for IBM.com version

v2.2.0

Severity

Severity 3 = The problem is visible or noticeable to users but does not impede the usability or functionality. Affects minor functionality, has a workaround.

Application/website

Various tools for UK Labs

Package

@carbon/web-components

CodeSandbox example

https://codesandbox.io/p/devbox/angry-tdd-tcdd7y?file=%2Fsrc%2Findex.js&workspaceId=86f8ed98-9d3f-4673-98d9-cf7b51318032

Open the console and then try uploading a file from both drag and drop and then by clicking the button, and you can see the array is empty with drag and drop but not empty when using the button.

Steps to reproduce the issue (if applicable)

No response

Release date (if applicable)

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate issues

[jdsheehan]

For example, in the following, if I click and select a file from the browser then event.detail.addedFiles is populated with a File object, but if I drag the file into the dialogue event.detail.addedFiles remains empty.

import { LitElement, html } from "lit";

import "@carbon/web-components/es/components/file-uploader/index.js";

export class PlansUpload extends LitElement {
  constructor() {
    super();
  }

  fileUploaderDropChanged(event) {
    console.log("event detail addedFiles: ", event.detail.addedFiles);

    let fileData = event.detail.addedFiles[0];
    let data = new FormData();
    data.append("uploadFile", fileData);
    data.append("_xsrf", document.getElementsByName("_xsrf")[0].value);

    return fetch("/api/upload", {
      credentials: "same-origin",
      method: "POST",
      body: data,
    })
      .then((rsp) => rsp.json())
      .then((rsp) => {
        if (rsp.error) {
          console.log("failed to upload document");
        } else {
          console.log("Document uploaded and is being processed");
        }
      });
  }

  render() {
    return html`
      <cds-file-uploader id="carbonFileUploader" label-description="Only PDF files." label-title="Example document">
        <cds-file-uploader-drop-container
          accept="application/pdf"
          @cds-file-uploader-drop-container-changed=${this.fileUploaderDropChanged}
          name="uploadFile"
        >
          Drag and drop files here or click to select from file browser.
        </cds-file-uploader-drop-container>
      </cds-file-uploader>
    `;
  }
}

customElements.define("plans-upload", PlansUpload);