Feature#5

index.html

@@ -33,14 +33,14 @@
     <script src="lib/unicode-break.js" defer></script>
     <script src="lib/gen/WordBreakProperty.js" defer></script>
 
+    <script src="src/import-export.js" defer></script>
     <script src="src/storage.js" defer></script>
     <script src="src/canvas.js" defer></script>
     <script src="src/images.js" defer></script>
     <script src="src/descriptions.js" defer></script>
     <script src="src/in-flight.js" defer></script>
     <script src="src/filter-lib.js" defer></script>
     <script src="src/dropdowns.js" defer></script>
-    <script src="src/import-export.js" defer></script>
     <script src="src/palette.js" defer></script>
     <script src="src/core.js" defer></script>
 

src/core.js

@@ -110,7 +110,7 @@ function addDots() {
                 const input = document.createElement("input")
                 input.id = inputName
                 input.type = "file"
-                input.accept = "image/*"
+                input.accept = "image/*,.json"
                 input.name = inputName
                 wrapper.appendChild(input)
 
@@ -122,7 +122,12 @@ function addDots() {
                 lbl.addEventListener("click", () => input.click())
                 input.addEventListener("change", async () => {
                     const file = input.files[0]
-                    await loadFile(file)
+
+                    if (file.type === "application/json") {
+                        await importMastodonJson(file)
+                    } else {
+                        await loadFile(file)
+                    }
                 })
 
                 return wrapper

src/import-export.js

@@ -30,29 +30,49 @@ function importMastodonTgz() {
 }
 
 function importMastodonJson(jsonFile, sampleUrl, reportPct) {
-    const host = new URL(sampleUrl).host
     readJsonFile(jsonFile).then(async mastoArchive => {
         const items = mastoArchive.orderedItems
         let noAlt = 0
-        let toFetch = []
-        for (let [note] of items) {
-            if (note.object && note.object.attachment) {
-                for (let attach of note.object.attachment) {
-                    if (attach.type === "Document"
-                        && attach.mediaType.startsWith("image/")
-                        && attach.url
-                    ) {
-                        if (attach.name) {
+        const toFetch = []
+
+        items
+            // NOTE: This could be replaced with a single `item?.object?.attachment?.length` check
+            // depending on browser compatibility requirements.
+            .filter(item => item.object && item.object.attachment && item.object.attachment.length)
+            .map(item => item.object.attachment)
+            .forEach((attachments) => {
+                attachments
+                    .filter(a => a.url && a.type === "Document" && a.mediaType.startsWith("image/"))
+                    .forEach((attachment) => {
+                        if (attachment.name) {
                             toFetch.push({
-                                alt: attach.name,
-                                url: `${host}${attach.url}`
+                                alt: attachment.name,
+                                url: attachment.url,
                             })
                         } else {
                             noAlt++
                         }
-                    }
-                }
-            }
+                    })
+
+            })
+
+        if (toFetch.length > 0) {
+            // NOTE: Replace with a dialog element potentially.
+            const defaultAnswer = ""
+            const answer = prompt("Please fill in your mastodon server media url", defaultAnswer)
+            const url = new URL(answer)
+            // TODO: This needs checking for traling slashes etc.
+            const host = url.href
+
+            toFetch.forEach(async (item) => {
+                // TODO: Not sure how feeding each into `loadFile()` should work in terms of
+                // generating multiple image area previews. Also, since these are CORS enabled
+                // per the Mastodon spec, we should be able to render onto canvas direct?
+                item.url = `${host}${item.url}`
+
+                // TODO: More details need filing in.
+                addInFlight(item.alt)
+            })
         }
     }).catch((e) => {
         console.log(e)