@devvit/ui-renderer 0.10.21-next-2024-05-13-779908af3.0 → 0.10.21-next-2024-05-14-4a2e1ee87.0

package/client/formbuilder/components/image-field/devvit-image-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"devvit-image-field.d.ts","sourceRoot":"","sources":["../../../../../library/src/client/formbuilder/components/image-field/devvit-image-field.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,iDAAiD,CAAC;AAG/E,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAMxD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAEhD;;;;GAIG;AAEH,MAAM,MAAM,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE1C,qBAAa,oBAAqB,SAAQ,YAAY;;IAMpD,cAAc;IACd,WAAoB,MAAM,mCAEzB;IAED,SAAS,CAAC,YAAY,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,OAAO,CAAC,GAAG,IAAI;IAO1C,qBAAqB,EAAG,cAAc,CAAC;IAIxE,eAAe,EAAE,eAAe,CAE7B;IAE6B,KAAK,EAAE,SAAS,GAAG,SAAS,CAAC;IAE7D,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,QAAQ,EAJL,MAIK,EAEjB;IAID,MAAM,CAAC,EAAE,gBAAgB,CAAC;IA2B1B,iBAAiB,QAAO,IAAI,CAQ1B;IAeO,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAW7C,MAAM;CA0ChB"}
+{"version":3,"file":"devvit-image-field.d.ts","sourceRoot":"","sources":["../../../../../library/src/client/formbuilder/components/image-field/devvit-image-field.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,iDAAiD,CAAC;AAG/E,OAAO,EAAE,eAAe,EAAmC,MAAM,uBAAuB,CAAC;AAMzF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAEhD;;;;GAIG;AAEH,MAAM,MAAM,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE1C,qBAAa,oBAAqB,SAAQ,YAAY;;IAMpD,cAAc;IACd,WAAoB,MAAM,mCAEzB;IAED,SAAS,CAAC,YAAY,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,OAAO,CAAC,GAAG,IAAI;IAO1C,qBAAqB,EAAG,cAAc,CAAC;IAIxE,eAAe,EAAE,eAAe,CAU7B;IAE6B,KAAK,EAAE,SAAS,GAAG,SAAS,CAAC;IAE7D,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,QAAQ,EAJL,MAIK,EAEjB;IAID,MAAM,CAAC,EAAE,gBAAgB,CAAC;IA2B1B,iBAAiB,QAAO,IAAI,CAQ1B;IAeO,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAW7C,MAAM;CA0ChB"}

package/client/formbuilder/components/image-field/devvit-image-field.js

@@ -18,7 +18,7 @@ import { property, query } from 'lit/decorators.js';
 import { msg } from '@lit/localize';
 import { InputElement } from '@reddit/faceplate/base-classes/input-element.js';
 import { DragAndDropController, DragState } from './drag-and-drop-controller.js';
-import { MediaController } from './media-controller.js';
+import { MediaController, UPLOAD_ERROR_VALIDATION_MESSAGE } from './media-controller.js';
 import { renderEmptyState } from './render-empty-state.js';
 import { renderCarousel } from './render-media-carousel.js';
 import { ALLOWED_IMAGE_MIMETYPES } from './validateMedia.js';
@@ -32,7 +32,14 @@ export class DevvitFormImageField extends InputElement {
             void this.mediaController.handleMedia(files);
         }));
         this.mediaController = new MediaController(this, {
-            setValidation: (message) => __classPrivateFieldGet(this, _DevvitFormImageField_instances, "m", _DevvitFormImageField_handleError).call(this, message),
+            setValidation: (message) => {
+                // ingore media upload errors for non-required fields
+                if (message === UPLOAD_ERROR_VALIDATION_MESSAGE && this.field && !this.field.required) {
+                    __classPrivateFieldGet(this, _DevvitFormImageField_instances, "m", _DevvitFormImageField_handleError).call(this, '');
+                    return;
+                }
+                __classPrivateFieldGet(this, _DevvitFormImageField_instances, "m", _DevvitFormImageField_handleError).call(this, message);
+            },
         });
         this.handleRemoveClick = () => {
             this.mediaController.media = [];

package/client/formbuilder/components/image-field/media-controller.d.ts

@@ -55,5 +55,7 @@ export declare class MediaController {
     hasLoadingMedia(): boolean;
     removeMedia(index: number): void;
 }
+export declare const UPLOAD_ERROR_VALIDATION_MESSAGE = "Media upload failed";
+export declare const UPLOAD_IN_PROGRESS_VALIDATION_MESSAGE = "Image upload is in progress";
 export {};
 //# sourceMappingURL=media-controller.d.ts.map

package/client/formbuilder/components/image-field/media-controller.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"media-controller.d.ts","sourceRoot":"","sources":["../../../../../library/src/client/formbuilder/components/image-field/media-controller.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEtC;;;;GAIG;AAGH,UAAU,cAAc;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,UAAU,GAAG;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACzB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,aAAa,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,oBAAY,WAAW;IACrB,OAAO,YAAY;IACnB,OAAO,YAAY;CACpB;AAED,oBAAY,QAAQ;IAClB,KAAK,UAAU;CAChB;AAED,KAAK,kBAAkB,GAAG,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;AAEpD,KAAK,sBAAsB,GAAG;IAC5B,aAAa,CAAC,EAAE,kBAAkB,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,cAAc,KAAK,CAAC;AAMjC,qBAAa,eAAe;;IAC1B,KAAK,EAAE,SAAS,EAAE,CAAM;gBAKZ,IAAI,EAAE,UAAU,EAAE,OAAO,CAAC,EAAE,sBAAsB;IAK9D,QAAQ,IAAI,MAAM;IAalB,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAmB1B,WAAW,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC;IA+H/C,WAAW,IAAI,QAAQ;IAIvB,eAAe,IAAI,OAAO;IA0D1B,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;CAGjC"}
+{"version":3,"file":"media-controller.d.ts","sourceRoot":"","sources":["../../../../../library/src/client/formbuilder/components/image-field/media-controller.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEtC;;;;GAIG;AAGH,UAAU,cAAc;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,UAAU,GAAG;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACzB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,aAAa,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,oBAAY,WAAW;IACrB,OAAO,YAAY;IACnB,OAAO,YAAY;CACpB;AAED,oBAAY,QAAQ;IAClB,KAAK,UAAU;CAChB;AAED,KAAK,kBAAkB,GAAG,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;AAEpD,KAAK,sBAAsB,GAAG;IAC5B,aAAa,CAAC,EAAE,kBAAkB,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,cAAc,KAAK,CAAC;AAMjC,qBAAa,eAAe;;IAC1B,KAAK,EAAE,SAAS,EAAE,CAAM;gBAKZ,IAAI,EAAE,UAAU,EAAE,OAAO,CAAC,EAAE,sBAAsB;IAK9D,QAAQ,IAAI,MAAM;IAalB,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAmB1B,WAAW,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC;IAoI/C,WAAW,IAAI,QAAQ;IAIvB,eAAe,IAAI,OAAO;IA0D1B,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;CAGjC;AAGD,eAAO,MAAM,+BAA+B,wBAAwB,CAAC;AACrE,eAAO,MAAM,qCAAqC,gCAAgC,CAAC"}

package/client/formbuilder/components/image-field/media-controller.js

@@ -54,6 +54,9 @@ export class MediaController {
             const seed = this.media.length;
             const validFiles = __classPrivateFieldGet(this, _MediaController_instances, "m", _MediaController_filterValidFiles).call(this, files);
             if (validFiles.length > 0) {
+                // marking the input as invalid during the upload
+                // the message is not visible to the end user
+                __classPrivateFieldGet(this, _MediaController_setValidation, "f").call(this, UPLOAD_IN_PROGRESS_VALIDATION_MESSAGE);
                 const mediaItems = [];
                 for (const file of validFiles) {
                     mediaItems.push(__classPrivateFieldGet(this, _MediaController_instances, "m", _MediaController_handleImage).call(this, file));
@@ -61,10 +64,13 @@ export class MediaController {
                 this.media = this.media.concat(mediaItems);
                 __classPrivateFieldGet(this, _MediaController_host, "f").requestUpdate('mediaLength', seed);
                 const mediaResponse = await Promise.all(mediaItems.map((item) => item.mediaResponse));
-                // set validity if all uploads ended successfully
+                // set validity when the upload is finished
                 if (mediaResponse.every((response) => !response?.error && response?.url)) {
                     __classPrivateFieldGet(this, _MediaController_setValidation, "f").call(this, '');
                 }
+                else {
+                    __classPrivateFieldGet(this, _MediaController_setValidation, "f").call(this, UPLOAD_ERROR_VALIDATION_MESSAGE);
+                }
                 __classPrivateFieldGet(this, _MediaController_instances, "m", _MediaController_handleImageResponse).call(this, mediaResponse, seed);
                 __classPrivateFieldGet(this, _MediaController_host, "f").requestUpdate();
             }
@@ -215,3 +221,6 @@ _MediaController_host = new WeakMap(), _MediaController_setValidation = new Weak
     const error = err || __classPrivateFieldGet(this, _MediaController_instances, "m", _MediaController_getDefaultErrorMessage).call(this);
     __classPrivateFieldGet(this, _MediaController_setValidation, "f").call(this, error);
 };
+// should be used for validation message only
+export const UPLOAD_ERROR_VALIDATION_MESSAGE = 'Media upload failed';
+export const UPLOAD_IN_PROGRESS_VALIDATION_MESSAGE = 'Image upload is in progress';