uwc-file-dragdrop-area code examples, properties, methods, events and Live Demo.
Here is an example of using the File Dragdrop Area in a plain html page, within a submittable form with some basic error handling:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>File DragDrop Area Example</title>
    <link href="https://developer.temenos.com/uux/base.css" rel="stylesheet" />
    <script src="https://developer.temenos.com/uux/unified-ux-web.min.js"></script>
    <style>
      :root {
        --demo-page-spacing: 20px;
      }

      uwc-form {
        display: block;
        max-width: 600px;
      }

      uwc-form > form {
        display: flex;
        flex-direction: column;
        row-gap: var(--demo-page-spacing);
      }

      uwc-form > form > div#buttons {
        display: flex;
        column-gap: var(--demo-page-spacing);
      }

      uwc-form > form > uwc-text-field {
        --uwc-text-field-padding: 0;
      }

      uwc-form > form > uwc-file-dragdrop-area {
        --uwc-fileupload-droparea-width: 100%;
      }

      uwc-form > form > uwc-select {
        --uwc-select-padding: 0;
      }
    </style>
  </head>
  <body onLoad="init()">
    <uwc-form id="docUploadForm">
      <form enctype="multipart/form-data" method="post" action="https://httpbin.org/post" target="_blank">
        <uwc-error-summary></uwc-error-summary>
        <uwc-file-dragdrop-area
          id="uploadArea"
          name="uploadArea"
          uploaderControlName="docsToUpload"
          dropAreaTitle=""
          maxIndividualFileSize="51200"
          accept=".pdf,.txt"
          fileSizeExceededMessage="File is too big"
        ></uwc-file-dragdrop-area>

        <uwc-text-field
          id="filename"
          label="File name"
          textOnly
        ></uwc-text-field>

        <uwc-select name="TemenosTestSelect" id="TemenosTestSelect" label="Document type" required>
          <uwc-list-item value="test1">
            Test1
          </uwc-list-item>
          <uwc-list-item value="test2">
            Test2
          </uwc-list-item>
          <uwc-list-item value="test3">
            Test3 (validation error)
          </uwc-list-item>
          <uwc-list-item value="test4">
            Test4
          </uwc-list-item>
        </uwc-select>

        <div id="buttons">
          <uwc-button
            label="Reset"
            outlined
            type="reset"
            id="resetBtn"
            name="addDocSubmitBtn"
          ></uwc-button>
          <uwc-button
            label="Submit"
            outlined
            type="submit"
            id="addDocSubmitBtn"
            name="addDocSubmitBtn"
          ></uwc-button>
        </div>
      </form>
    </uwc-form>
  </body>
  <script>
    const
      uwcFormElem = document.querySelector("uwc-form"),
      htmlFormElem = uwcFormElem.querySelector("form"),
      uwcErrorSummaryElem = htmlFormElem.querySelector("uwc-error-summary"),
      uwcDragDropAreaElem = htmlFormElem.querySelector("uwc-file-dragdrop-area"),
      uwcFilenameTextField = htmlFormElem.querySelector("uwc-text-field#filename"),
      uwcSelectElem = document.getElementById("TemenosTestSelect"),
      hiddenFileInput = uwcDragDropAreaElem.shadowRoot.querySelector("input[type=\"file\"]"),
      dropAreaErrorMessages = [];

    let clonedFileFileInputElem = undefined;

    function init() {
      uwcFormElem.addEventListener("reset", (e) => {
        console.log(e.type, e);
        uwcErrorSummaryElem.errorObjectDiagnostics = [];
        dropAreaErrorMessages.length = 0;
        uwcDragDropAreaElem.dropAreaErrorMessages = [];
        uwcDragDropAreaElem.style.removeProperty("--uwc-fileupload-droparea-border");
        hiddenFileInput.value = "";
        uwcFilenameTextField.value = "";

        htmlFormElem.querySelectorAll("[fieldInError]").forEach(field => {
          field.removeAttribute("fieldInError");
          (typeof field.setCustomValidity === "function") && field.setCustomValidity("");
        });

        // reset "Please fill out this field" error state on our uwc-select
        uwcSelectElem.required=false;
        uwcSelectElem.updateComplete.then(() => { uwcSelectElem.required = true });
      });

      uwcFormElem.customValidationFn = () => {
        console.log("customValidationFn");

        const errorObjectDiagnostics = [];

        let isDragDropAreaElemInError = false;

        if (dropAreaErrorMessages.length) {
          errorObjectDiagnostics.push({
           "fieldName": "uploadArea",
           "message": "Test validation message on uploadArea component"
          });

          isDragDropAreaElemInError ||= true;
        }

        else if (! uwcDragDropAreaElem.fileLoaderInput.files.length) {
          errorObjectDiagnostics.push({
           "fieldName": "uploadArea",
           "message": "Please add the document file to upload"
          });

          isDragDropAreaElemInError ||= true;
        }

        isDragDropAreaElemInError && uwcDragDropAreaElem.style.setProperty("--uwc-fileupload-droparea-border", "1px solid red");

        if (uwcSelectElem.value === "test3") {
          errorObjectDiagnostics.push({
            "fieldName": "TemenosTestSelect",
            "message": "Custom validation message on Select component",
          });
        }

        uwcErrorSummaryElem.errorObjectDiagnostics = errorObjectDiagnostics;

        return ! errorObjectDiagnostics.length;
      }

      uwcDragDropAreaElem.addEventListener("message", (e) => {
        const { data = "", fileNames } = e.detail || { };

        let message = data;

        if (Array.isArray(fileNames) && fileNames.length)
          message += `: ${fileNames.join(", ")}`;

        dropAreaErrorMessages.push({ message: message });
        uwcDragDropAreaElem.dropAreaErrorMessages = [ ...dropAreaErrorMessages ];
      });

      uwcDragDropAreaElem.addEventListener("filesUpdated", (e) => {
        console.log(e.type, e.detail);
        uwcErrorSummaryElem.errorObjectDiagnostics = uwcErrorSummaryElem.errorObjectDiagnostics.filter(diagnostic => (diagnostic.fieldName !== "uploadArea"));
        dropAreaErrorMessages.length = 0;
        uwcDragDropAreaElem.dropAreaErrorMessages = [];
        uwcDragDropAreaElem.style.removeProperty("--uwc-fileupload-droparea-border");
        uwcFilenameTextField.value = Array.from(hiddenFileInput.files).map(file => file.name).join(", ");
      });

      uwcDragDropAreaElem.setCustomValidity = (msg) => {
        console.log("uwcDragDropAreaElem.setCustomValidity(msg): msg: ", msg);
      }

      uwcDragDropAreaElem.reportValidity = () => {
        console.log("uwcDragDropAreaElem.reportValidity()");
        return true;
      }

      uwcFormElem.addEventListener("submit", (e) => {
        clonedFileFileInputElem && clonedFileFileInputElem.remove();
        clonedFileFileInputElem = hiddenFileInput.cloneNode(true);
        clonedFileFileInputElem.hidden = true;
        htmlFormElem.appendChild(clonedFileFileInputElem);
        uwcFormElem.submit();
      });

      /*!!
      uwcFormElem.addEventListener("submit", (e) => {
        const { isValid, nativeForm } = e.detail || {};

        e.preventDefault();

        if (isValid && nativeForm) {
          const formData = new FormData(nativeForm);

          Array.from(hiddenFileInput.files).forEach(file => {
              formData.append(file.name, file);
          });

          console.log("STH: formData: ", formData);
        }
      });
      !!*/
    }
  </script>
</html>