download multiple files on safari ios

app/javascript/elements/download_button.js

@@ -18,6 +18,17 @@ export default targetable(class extends HTMLElement {
     this.toggleState()
 
     fetch(this.dataset.src).then((response) => response.json()).then((urls) => {
+      const isSafariIos = /iPhone|iPad|iPod/i.test(navigator.userAgent)
+
+      if (isSafariIos && urls.length > 1) {
+        this.downloadSafariIos(urls)
+      } else {
+        this.downloadUrls(urls)
+      }
+    })
+  }
+
+  downloadUrls (urls) {
     const fileRequests = urls.map((url) => {
       return () => {
         return fetch(url).then(async (resp) => {
@@ -29,7 +40,7 @@ export default targetable(class extends HTMLElement {
 
           link.click()
 
-            URL.revokeObjectURL(url)
+          URL.revokeObjectURL(blobUrl)
         })
       }
     })
@@ -39,6 +50,32 @@ export default targetable(class extends HTMLElement {
       Promise.resolve()
     )
 
+    this.toggleState()
+  }
+
+  downloadSafariIos (urls) {
+    const fileRequests = urls.map((url) => {
+      return fetch(url).then(async (resp) => {
+        const blob = await resp.blob()
+        const blobUrl = URL.createObjectURL(blob.slice(0, blob.size, 'application/octet-stream'))
+        const link = document.createElement('a')
+
+        link.href = blobUrl
+        link.setAttribute('download', decodeURI(url.split('/').pop()))
+
+        return link
+      })
+    })
+
+    Promise.all(fileRequests).then((links) => {
+      links.forEach((link, index) => {
+        setTimeout(() => {
+          link.click()
+
+          URL.revokeObjectURL(link.href)
+        }, index * 50)
+      })
+    }).finally(() => {
       this.toggleState()
     })
   }

app/javascript/submission_form/completed.vue

@@ -179,6 +179,16 @@ export default {
       this.isDownloading = true
 
       fetch(this.baseUrl + `/submitters/${this.submitterSlug}/download`).then((response) => response.json()).then((urls) => {
+        const isSafariIos = /iPhone|iPad|iPod/i.test(navigator.userAgent)
+
+        if (isSafariIos && urls.length > 1) {
+          this.downloadSafariIos(urls)
+        } else {
+          this.downloadUrls(urls)
+        }
+      })
+    },
+    downloadUrls (urls) {
       const fileRequests = urls.map((url) => {
         return () => {
           return fetch(url).then(async (resp) => {
@@ -190,7 +200,7 @@ export default {
 
             link.click()
 
-              URL.revokeObjectURL(url)
+            URL.revokeObjectURL(blobUrl)
           })
         }
       })
@@ -200,6 +210,31 @@ export default {
         Promise.resolve()
       )
 
+      this.isDownloading = false
+    },
+    downloadSafariIos (urls) {
+      const fileRequests = urls.map((url) => {
+        return fetch(url).then(async (resp) => {
+          const blob = await resp.blob()
+          const blobUrl = URL.createObjectURL(blob.slice(0, blob.size, 'application/octet-stream'))
+          const link = document.createElement('a')
+
+          link.href = blobUrl
+          link.setAttribute('download', decodeURI(url.split('/').pop()))
+
+          return link
+        })
+      })
+
+      Promise.all(fileRequests).then((links) => {
+        links.forEach((link, index) => {
+          setTimeout(() => {
+            link.click()
+
+            URL.revokeObjectURL(link.href)
+          }, index * 50)
+        })
+      }).finally(() => {
         this.isDownloading = false
       })
     }