Convert file upload to mdc (#11906)

src/components/ha-file-upload.ts

@@ -1,6 +1,5 @@
+import { styles } from "@material/mwc-textfield/mwc-textfield.css";
 import { mdiClose } from "@mdi/js";
-import "@polymer/iron-input/iron-input";
-import "@polymer/paper-input/paper-input-container";
 import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
@@ -21,7 +20,7 @@ export class HaFileUpload extends LitElement {
 
   @property() public accept!: string;
 
-  @property() public icon!: string;
+  @property() public icon?: string;
 
   @property() public label!: string;
 
@@ -39,15 +38,7 @@ export class HaFileUpload extends LitElement {
   protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     if (this.autoOpenFileDialog) {
-      this._input?.click();
+      this._openFilePicker();
-    }
-  }
-
-  protected updated(changedProperties: PropertyValues) {
-    if (changedProperties.has("_drag") && !this.uploading) {
-      (
-        this.shadowRoot!.querySelector("paper-input-container") as any
-      )._setFocused(this._drag);
     }
   }
 
@@ -60,51 +51,75 @@ export class HaFileUpload extends LitElement {
             active
           ></ha-circular-progress>`
         : html`
-            <label for="input">
+            <label
-              <paper-input-container
+              for="input"
-                .alwaysFloatLabel=${Boolean(this.value)}
+              class="mdc-text-field mdc-text-field--filled ${classMap({
-                @drop=${this._handleDrop}
+                "mdc-text-field--focused": this._drag,
-                @dragenter=${this._handleDragStart}
+                "mdc-text-field--with-leading-icon": Boolean(this.icon),
-                @dragover=${this._handleDragStart}
+                "mdc-text-field--with-trailing-icon": Boolean(this.value),
-                @dragleave=${this._handleDragEnd}
+              })}"
-                @dragend=${this._handleDragEnd}
+              @drop=${this._handleDrop}
-                class=${classMap({
+              @dragenter=${this._handleDragStart}
-                  dragged: this._drag,
+              @dragover=${this._handleDragStart}
-                })}
+              @dragleave=${this._handleDragEnd}
+              @dragend=${this._handleDragEnd}
+            >
+              <span class="mdc-text-field__ripple"></span>
+              <span
+                class="mdc-floating-label ${this.value || this._drag
+                  ? "mdc-floating-label--float-above"
+                  : ""}"
+                id="label"
+                >${this.label}</span
               >
-                <label for="input" slot="label"> ${this.label} </label>
+              ${this.icon
-                <iron-input slot="input">
+                ? html`<span
-                  <input
+                    class="mdc-text-field__icon mdc-text-field__icon--leading"
-                    id="input"
+                    tabindex="-1"
-                    type="file"
+                  >
-                    class="file"
+                    <ha-icon-button
-                    accept=${this.accept}
+                      @click=${this._openFilePicker}
-                    @change=${this._handleFilePicked}
+                      .path=${this.icon}
-                  />
+                    ></ha-icon-button>
-                  ${this.value}
+                  </span>`
-                </iron-input>
+                : ""}
-                ${this.value
+              <div class="value">${this.value}</div>
-                  ? html`
+              <input
-                      <ha-icon-button
+                id="input"
-                        slot="suffix"
+                type="file"
-                        @click=${this._clearValue}
+                class="mdc-text-field__input file"
-                        .label=${this.hass?.localize("ui.common.close") ||
+                accept=${this.accept}
-                        "close"}
+                @change=${this._handleFilePicked}
-                        .path=${mdiClose}
+                aria-labelledby="label"
-                      ></ha-icon-button>
+              />
-                    `
+              ${this.value
-                  : html`
+                ? html`<span
-                      <ha-icon-button
+                    class="mdc-text-field__icon mdc-text-field__icon--trailing"
-                        slot="suffix"
+                    tabindex="1"
-                        .path=${this.icon}
+                  >
-                      ></ha-icon-button>
+                    <ha-icon-button
-                    `}
+                      slot="suffix"
-              </paper-input-container>
+                      @click=${this._clearValue}
+                      .label=${this.hass?.localize("ui.common.close") ||
+                      "close"}
+                      .path=${mdiClose}
+                    ></ha-icon-button>
+                  </span>`
+                : ""}
+              <span
+                class="mdc-line-ripple ${this._drag
+                  ? "mdc-line-ripple--active"
+                  : ""}"
+              ></span>
             </label>
           `}
     `;
   }
 
+  private _openFilePicker() {
+    this._input?.click();
+  }
+
   private _handleDrop(ev: DragEvent) {
     ev.preventDefault();
     ev.stopPropagation();
@@ -137,40 +152,66 @@ export class HaFileUpload extends LitElement {
   }
 
   static get styles() {
-    return css`
+    return [
-      paper-input-container {
+      styles,
-        position: relative;
+      css`
-        padding: 8px;
+        :host {
-        margin: 0 -8px;
+          display: block;
-      }
+        }
-      paper-input-container.dragged:before {
+        .mdc-text-field--filled {
-        position: var(--layout-fit_-_position);
+          height: auto;
-        top: var(--layout-fit_-_top);
+          padding-top: 16px;
-        right: var(--layout-fit_-_right);
+          cursor: pointer;
-        bottom: var(--layout-fit_-_bottom);
+        }
-        left: var(--layout-fit_-_left);
+        .mdc-text-field--filled.mdc-text-field--with-trailing-icon {
-        background: currentColor;
+          padding-top: 28px;
-        content: "";
+        }
-        opacity: var(--dark-divider-opacity);
+        .mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon {
-        pointer-events: none;
+          color: var(--secondary-text-color);
-        border-radius: 4px;
+        }
-      }
+        .mdc-text-field--filled.mdc-text-field--with-trailing-icon
-      input.file {
+          .mdc-text-field__icon {
-        display: none;
+          align-self: flex-end;
-      }
+        }
-      img {
+        .mdc-text-field__icon--leading {
-        max-width: 125px;
+          margin-bottom: 12px;
-        max-height: 125px;
+        }
-      }
+        .mdc-text-field--filled .mdc-floating-label--float-above {
-      ha-icon-button {
+          transform: scale(0.75);
-        --mdc-icon-button-size: 24px;
+          top: 8px;
-        --mdc-icon-size: 20px;
+        }
-      }
+        .dragged:before {
-      ha-circular-progress {
+          position: var(--layout-fit_-_position);
-        display: block;
+          top: var(--layout-fit_-_top);
-        text-align-last: center;
+          right: var(--layout-fit_-_right);
-      }
+          bottom: var(--layout-fit_-_bottom);
-    `;
+          left: var(--layout-fit_-_left);
+          background: currentColor;
+          content: "";
+          opacity: var(--dark-divider-opacity);
+          pointer-events: none;
+          border-radius: 4px;
+        }
+        .value {
+          width: 100%;
+        }
+        input.file {
+          display: none;
+        }
+        img {
+          max-width: 100%;
+          max-height: 125px;
+        }
+        ha-icon-button {
+          --mdc-icon-button-size: 24px;
+          --mdc-icon-size: 20px;
+        }
+        ha-circular-progress {
+          display: block;
+          text-align-last: center;
+        }
+      `,
+    ];
   }
 }
 

src/panels/config/person/dialog-person-detail.ts

@@ -464,6 +464,9 @@ class DialogPersonDetail extends LitElement {
         ha-textfield {
           display: block;
         }
+        ha-picture-upload {
+          margin-top: 16px;
+        }
         ha-formfield {
           display: block;
           padding: 16px 0;