Unable to drag and drop files produced by Umbraco due to missing MIME type

[nikcio]

Which exact UI Library version are you using? For example: 1.0.1 - don't just write v1.

1.9.0

Bug summary

You can't drag and drop UDT files on the uui-file-dropzone because they don't have a MIME type.

Related to: umbraco/Umbraco.CMS.Backoffice#2258

Specifics

I've pulled a snippet here from Dev tools where the issue appears:

Call stack is:

Uncaught (in promise) TypeError: entry.createReader is not a function
    at UUIFileDropzoneElement._mkdir (@umbraco-ui_uui.js?v=62ffc2fe:7595:26)
    at UUIFileDropzoneElement._getAllEntries (@umbraco-ui_uui.js?v=62ffc2fe:7573:40)
    at UUIFileDropzoneElement._onDrop (@umbraco-ui_uui.js?v=62ffc2fe:7654:43)

As code lines:
UUIFileDropzoneElement._getAllEntries

const structure = await this._mkdir(dir);

UUIFileDropzoneElement._mkdir

const reader = entry.createReader();

Full snippet:

async _getAllEntries(dataTransferItemList) {
    const queue = [...dataTransferItemList];
    const folders = [];
    const files = [];
    for (const entry of queue) {
      if ((entry == null ? void 0 : entry.kind) !== "file") continue;
      if (entry.type) {
        const file = entry.getAsFile();
        if (!file) continue;
        if (this._isAccepted(file)) {
          files.push(file);
        }
      } else if (!this.disallowFolderUpload && this.multiple) {
        const dir = this._getEntry(entry);
        if (dir) {
          const structure = await this._mkdir(dir);
          folders.push(structure);
        }
      }
    }
    return { files, folders };
  }
  /**
   * Get the directory entry from a DataTransferItem.
   * @remark Supports both WebKit and non-WebKit browsers.
   */
  _getEntry(entry) {
    let dir = null;
    if ("webkitGetAsEntry" in entry) {
      dir = entry.webkitGetAsEntry();
    } else if ("getAsEntry" in entry) {
      dir = entry.getAsEntry();
    }
    return dir;
  }
  // Make directory structure
  async _mkdir(entry) {
    const reader = entry.createReader();
    const folders = [];
    const files = [];
    const readEntries = (reader2) => {
      return new Promise((resolve, reject) => {
        reader2.readEntries(async (entries) => {
          if (!entries.length) {
            resolve();
            return;
          }
          for (const en of entries) {
            if (en.isFile) {
              const file = await this._getAsFile(en);
              if (this._isAccepted(file)) {
                files.push(file);
              }
            } else if (en.isDirectory) {
              const directory = await this._mkdir(
                en
              );
              folders.push(directory);
            }
          }
          await readEntries(reader2);
          resolve();
        }, reject);
      });
    };
    await readEntries(reader);
    const result = { folderName: entry.name, folders, files };
    return result;
  }

Steps to reproduce

In Umbraco backoffice:

1. Create a media document type
2. Export this media type to a UDT file
3. Now try to import it via drag and drop
4. Look in the devtools console

Expected result / actual result

To be able to upload the file.

[iOvergaard]

This should be fixed with #895 which will be included in Umbraco 15.0.0.