diff --git a/package.json b/package.json
index 47bf3b8ec9..f2fe5f1c72 100644
--- a/package.json
+++ b/package.json
@@ -85,6 +85,7 @@
"codemirror": "^5.49.0",
"comlink": "^4.3.0",
"cpx": "^1.5.0",
+ "cropperjs": "^1.5.7",
"deep-clone-simple": "^1.1.1",
"deep-freeze": "^0.0.1",
"es6-object-assign": "^1.1.0",
diff --git a/src/components/ha-picture-upload.ts b/src/components/ha-picture-upload.ts
new file mode 100644
index 0000000000..411984d555
--- /dev/null
+++ b/src/components/ha-picture-upload.ts
@@ -0,0 +1,226 @@
+import "@material/mwc-icon-button/mwc-icon-button";
+import { mdiClose, mdiImagePlus } from "@mdi/js";
+import "@polymer/iron-input/iron-input";
+import "@polymer/paper-input/paper-input-container";
+import {
+ css,
+ customElement,
+ html,
+ internalProperty,
+ LitElement,
+ property,
+ PropertyValues,
+ TemplateResult,
+} from "lit-element";
+import { classMap } from "lit-html/directives/class-map";
+import { fireEvent } from "../common/dom/fire_event";
+import { createImage, generateImageThumbnailUrl } from "../data/image";
+import { HomeAssistant } from "../types";
+import "./ha-circular-progress";
+import "./ha-svg-icon";
+import {
+ showImageCropperDialog,
+ CropOptions,
+} from "../dialogs/image-cropper-dialog/show-image-cropper-dialog";
+
+@customElement("ha-picture-upload")
+export class HaPictureUpload extends LitElement {
+ public hass!: HomeAssistant;
+
+ @property() public value: string | null = null;
+
+ @property() public label?: string;
+
+ @property({ type: Boolean }) public crop = false;
+
+ @property({ attribute: false }) public cropOptions?: CropOptions;
+
+ @property({ type: Number }) public size = 512;
+
+ @internalProperty() private _error = "";
+
+ @internalProperty() private _uploading = false;
+
+ @internalProperty() private _drag = false;
+
+ protected updated(changedProperties: PropertyValues) {
+ if (changedProperties.has("_drag")) {
+ (this.shadowRoot!.querySelector(
+ "paper-input-container"
+ ) as any)._setFocused(this._drag);
+ }
+ }
+
+ public render(): TemplateResult {
+ return html`
+ ${this._uploading
+ ? html``
+ : html`
+ ${this._error ? html`${this._error}
` : ""}
+
+ `}
+ `;
+ }
+
+ private _handleDrop(ev: DragEvent) {
+ ev.preventDefault();
+ ev.stopPropagation();
+ if (ev.dataTransfer?.files) {
+ if (this.crop) {
+ this._cropFile(ev.dataTransfer.files[0]);
+ } else {
+ this._uploadFile(ev.dataTransfer.files[0]);
+ }
+ }
+ this._drag = false;
+ }
+
+ private _handleDragStart(ev: DragEvent) {
+ ev.preventDefault();
+ ev.stopPropagation();
+ this._drag = true;
+ }
+
+ private _handleDragEnd(ev: DragEvent) {
+ ev.preventDefault();
+ ev.stopPropagation();
+ this._drag = false;
+ }
+
+ private async _handleFilePicked(ev) {
+ if (this.crop) {
+ this._cropFile(ev.target.files[0]);
+ } else {
+ this._uploadFile(ev.target.files[0]);
+ }
+ }
+
+ private async _cropFile(file: File) {
+ if (!["image/png", "image/jpeg", "image/gif"].includes(file.type)) {
+ this._error = this.hass.localize(
+ "ui.components.picture-upload.unsupported_format"
+ );
+ return;
+ }
+ showImageCropperDialog(this, {
+ file,
+ options: this.cropOptions || {
+ round: false,
+ aspectRatio: NaN,
+ },
+ croppedCallback: (croppedFile) => {
+ this._uploadFile(croppedFile);
+ },
+ });
+ }
+
+ private async _uploadFile(file: File) {
+ if (!["image/png", "image/jpeg", "image/gif"].includes(file.type)) {
+ this._error = this.hass.localize(
+ "ui.components.picture-upload.unsupported_format"
+ );
+ return;
+ }
+ this._uploading = true;
+ this._error = "";
+ try {
+ const media = await createImage(this.hass, file);
+ this.value = generateImageThumbnailUrl(media.id, this.size);
+ fireEvent(this, "change");
+ } catch (err) {
+ this._error = err.toString();
+ } finally {
+ this._uploading = false;
+ }
+ }
+
+ private _clearPicture(ev: Event) {
+ ev.preventDefault();
+ this.value = null;
+ this._error = "";
+ fireEvent(this, "change");
+ }
+
+ static get styles() {
+ return css`
+ .error {
+ color: var(--error-color);
+ }
+ paper-input-container {
+ position: relative;
+ padding: 8px;
+ margin: 0 -8px;
+ }
+ paper-input-container.dragged:before {
+ position: var(--layout-fit_-_position);
+ top: var(--layout-fit_-_top);
+ 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;
+ }
+ img {
+ max-width: 125px;
+ max-height: 125px;
+ }
+ input.file {
+ display: none;
+ }
+ mwc-icon-button {
+ --mdc-icon-button-size: 24px;
+ --mdc-icon-size: 20px;
+ }
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "ha-picture-upload": HaPictureUpload;
+ }
+}
diff --git a/src/data/image.ts b/src/data/image.ts
new file mode 100644
index 0000000000..b81499f002
--- /dev/null
+++ b/src/data/image.ts
@@ -0,0 +1,54 @@
+import { HomeAssistant } from "../types";
+
+interface Image {
+ filesize: number;
+ name: string;
+ uploaded_at: string; // isoformat date
+ content_type: string;
+ id: string;
+}
+
+export interface ImageMutableParams {
+ name: string;
+}
+
+export const generateImageThumbnailUrl = (mediaId: string, size: number) =>
+ `/api/image/serve/${mediaId}/${size}x${size}`;
+
+export const fetchImages = (hass: HomeAssistant) =>
+ hass.callWS({ type: "image/list" });
+
+export const createImage = async (
+ hass: HomeAssistant,
+ file: File
+): Promise => {
+ const fd = new FormData();
+ fd.append("file", file);
+ const resp = await hass.fetchWithAuth("/api/image/upload", {
+ method: "POST",
+ body: fd,
+ });
+ if (resp.status === 413) {
+ throw new Error("Uploaded image is too large");
+ } else if (resp.status !== 200) {
+ throw new Error("Unknown error");
+ }
+ return await resp.json();
+};
+
+export const updateImage = (
+ hass: HomeAssistant,
+ id: string,
+ updates: Partial
+) =>
+ hass.callWS({
+ type: "image/update",
+ media_id: id,
+ ...updates,
+ });
+
+export const deleteImage = (hass: HomeAssistant, id: string) =>
+ hass.callWS({
+ type: "image/delete",
+ media_id: id,
+ });
diff --git a/src/data/person.ts b/src/data/person.ts
index 00e77a838f..eb3b358729 100644
--- a/src/data/person.ts
+++ b/src/data/person.ts
@@ -5,12 +5,14 @@ export interface Person {
name: string;
user_id?: string;
device_trackers?: string[];
+ picture?: string;
}
export interface PersonMutableParams {
name: string;
user_id: string | null;
device_trackers: string[];
+ picture: string | null;
}
export const fetchPersons = (hass: HomeAssistant) =>
diff --git a/src/dialogs/image-cropper-dialog/image-cropper-dialog.ts b/src/dialogs/image-cropper-dialog/image-cropper-dialog.ts
new file mode 100644
index 0000000000..ed9e3a05aa
--- /dev/null
+++ b/src/dialogs/image-cropper-dialog/image-cropper-dialog.ts
@@ -0,0 +1,136 @@
+import "@material/mwc-button/mwc-button";
+import Cropper from "cropperjs";
+// @ts-ignore
+import cropperCss from "cropperjs/dist/cropper.css";
+import {
+ css,
+ CSSResult,
+ customElement,
+ html,
+ internalProperty,
+ LitElement,
+ property,
+ PropertyValues,
+ query,
+ TemplateResult,
+ unsafeCSS,
+} from "lit-element";
+import "../../components/ha-dialog";
+import { haStyleDialog } from "../../resources/styles";
+import type { HomeAssistant } from "../../types";
+import { HaImageCropperDialogParams } from "./show-image-cropper-dialog";
+import { classMap } from "lit-html/directives/class-map";
+
+@customElement("image-cropper-dialog")
+export class HaImagecropperDialog extends LitElement {
+ @property({ attribute: false }) public hass!: HomeAssistant;
+
+ @internalProperty() private _params?: HaImageCropperDialogParams;
+
+ @internalProperty() private _open = false;
+
+ @query("img") private _image!: HTMLImageElement;
+
+ private _cropper?: Cropper;
+
+ public showDialog(params: HaImageCropperDialogParams): void {
+ this._params = params;
+ this._open = true;
+ }
+
+ public closeDialog() {
+ this._open = false;
+ this._params = undefined;
+ this._cropper?.destroy();
+ }
+
+ protected updated(changedProperties: PropertyValues) {
+ if (!changedProperties.has("_params") || !this._params) {
+ return;
+ }
+ if (!this._cropper) {
+ this._image.src = URL.createObjectURL(this._params.file);
+ this._cropper = new Cropper(this._image, {
+ aspectRatio: this._params.options.aspectRatio,
+ viewMode: 1,
+ dragMode: "move",
+ minCropBoxWidth: 50,
+ ready: () => {
+ URL.revokeObjectURL(this._image!.src);
+ },
+ });
+ } else {
+ this._cropper.replace(URL.createObjectURL(this._params.file));
+ }
+ }
+
+ protected render(): TemplateResult {
+ return html`
+
+
![]()
+