Emulate image upload (#14)

## 💸 TL;DR
Stubs the image upload behaviour for play

## 📜 Details
[DX-6261](https://reddit.atlassian.net/browse/DX-6261)

## 🧪 Testing Steps / Validation
Should support the [image upload
pen](https://developers.reddit.com/play#pen/N4IgdghgtgpiBcIQBoQGcBOBjBICWUADgPYYAuABMACIwBudeZAvhQGYbFQUDkAAgBN6jMgHpCAVwBGAGzxYAtBEJ4eAHTAaNtBkwB0EAQIDCEtGS4AFYuYAqAT0IwAFMA0UKkWPF4A5aDA8yO4UGDBgQhg+zljEYGQwAB5kAJQUALwAfFQhHiGxYOYUBBAA5jAAYqTc6RQFCcl6ZpXVrrkeHWx4MDICaD4A2u0dHW5gIxMdXjA+PFBx5jAYAPrTQcOTFDIQUj0+AAb+sOykFPOFCRj7weObIwAWPYS2SWQ+aiBHMCcYFPbEEl+50WGA+NzuIzIjhmvHMGDwYFK61uENCMAAjhI8GEBD4yBgJDBwRDmMS7mNUR5prNgZdliVysjKVsdnsKPsALILS7FKBlFwQOR0GApa4bSaPGTPV7vEAAST55R+fwBQO5SzB4omUKcswZgTJELCmOxMFxFHxhMNk2YWoAutaOmQmDIYTwAKqEAQQBIWx4Ue5cb76pmbCBYLAwQhkAAyrJks093oSoZGpPaEDQ9jAWAozmTEDSWRyKI6BTQxFdehkxFK+Z9hYA3Bt6q8mng9GhAwB3WzETNkZz7ACaqoDQd5-IDmYou3CFAkXp9ZoAhPsUs3S7bbhv2u1y5Qu8Ru1UMDU8ykshSJq3GljOz3T1BnPqn7ut+0wmRAeNnAAeWRiCwABrNBMg2ACJDICxxjiSwwjQNB0mAI8T2qZhMgAZR7H4oD-UQpCgmDwNLfDAJAsD2hSEJt2YajNDAJISHICghDYCAJBkSgdBEFAQGFDA0DwOIEAARmYIA)

## ✅ Checks
<!-- Make sure your pr passes the CI checks and do check the following
fields as needed - -->
- [x] CI tests (if present) are passing
- [x] Adheres to code style for repo
- [ ] Contributor License Agreement (CLA) completed if not a Reddit
employee

---------

Co-authored-by: danil.radkovskyi <[email protected]>

package.json

@@ -31,12 +31,12 @@
     "@codemirror/lint": "6.5.0",
     "@codemirror/state": "6.4.1",
     "@codemirror/view": "6.26.3",
-    "@devvit/previews": "0.10.20-next-2024-05-01-553651f2f.0",
-    "@devvit/protos": "0.10.20-next-2024-05-01-553651f2f.0",
-    "@devvit/public-api": "0.10.20-next-2024-05-01-553651f2f.0",
-    "@devvit/runtime-lite": "0.10.20-next-2024-05-01-553651f2f.0",
-    "@devvit/shared-types": "0.10.20-next-2024-05-01-553651f2f.0",
-    "@devvit/ui-renderer": "0.10.20-next-2024-05-01-553651f2f.0",
+    "@devvit/previews": "0.10.20",
+    "@devvit/protos": "0.10.20",
+    "@devvit/public-api": "0.10.20",
+    "@devvit/runtime-lite": "0.10.20",
+    "@devvit/shared-types": "0.10.20",
+    "@devvit/ui-renderer": "0.10.20",
     "@esm-bundle/chai": "4.3.4-fix.0",
     "@types/jsdom": "21.1.6",
     "@types/mocha": "10.0.6",
@@ -117,7 +117,8 @@
     "test:types:ui": "lit-analyzer --maxWarnings=0 --rules.no-invalid-css=off --rules.no-missing-element-type-definition --rules.no-unknown-event --rules.no-unknown-attribute=false --strict",
     "test:ui": "wtr --config=tools/web-test-runner.config.js",
     "test:unit": "vitest --config=tools/vitest.config.ts run",
-    "version": "npm test"
+    "version": "npm test",
+    "install:npmjs": "npm install --registry=https://registry.npmjs.org"
   },
   "type": "module",
   "types": "dist/index.d.ts",

src/elements/play-preview.ts

@@ -148,6 +148,7 @@ export class PlayPreview extends LitElement {
                 ?use-experimental-blocks=${this.useExperimentalBlocks}
                 ?use-ui-request=${this.useUIRequest}
                 @devvit-ui-error=${() => (this._err = true)}
+                @devvit-image-upload=${mockImageUpload}
               ></devvit-preview>
             `
           : nothing}
@@ -170,3 +171,26 @@ export class PlayPreview extends LitElement {
       )
   }
 }
+
+const mockImageUpload = (
+  event: CustomEvent<{
+    blob: Blob
+    uploadRequest: Promise<UploadResponse> | null
+  }>
+): void => {
+  event.detail.uploadRequest = new Promise(resolve => {
+    setTimeout(() => {
+      resolve({
+        url: 'https://i.redd.it/m04iwd26jbpc1.png',
+        mediaId: 'm04iwd26jbpc1'
+        // error:'Whoops!' // uncomment to emulate the error response
+      })
+    }, 2000)
+  })
+}
+
+type UploadResponse = {
+  url?: string
+  mediaId?: string
+  error?: string
+}