fix: allow audio uploads on iOS Safari (#1472)

fixes #1461

src/routes/_components/compose/ComposeToolbar.html

@@ -9,7 +9,7 @@
     <IconButton
       className="compose-toolbar-button"
       svgClassName={$uploadingMedia ? 'spin' : ''}
-      label="Add media"
+      label="Add media (images, video, audio)"
       href={$uploadingMedia ? '#fa-spinner' : '#fa-camera'}
       on:click="onMediaClick()"
       disabled={$uploadingMedia || (media.length === 4)}
@@ -41,6 +41,7 @@
          on:change="onFileChange(event)"
          style="display: none;"
          type="file"
+         multiple
          accept={mediaAccept} >
 </div>
 <style>
@@ -91,10 +92,12 @@
       onMediaClick () {
         this.refs.input.click()
       },
-      onFileChange (e) {
+      async onFileChange (e) {
-        const file = e.target.files[0]
+        const { files } = e.target
         const { realm } = this.get()
-        doMediaUpload(realm, file)
+        for (const file of files) {
+          await doMediaUpload(realm, file)
+        }
       },
       async onPostPrivacyClick () {
         const { realm } = this.get()

src/routes/_static/media.js

@@ -4,9 +4,57 @@ export const DEFAULT_MEDIA_HEIGHT = 250
 export const ONE_TRANSPARENT_PIXEL =
   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='
 
-export const mediaAccept = '.jpg,.jpeg,.png,.gif,.webm,.mp4,.m4v,.mov,image/jpeg,image/png,' +
-  'image/gif,video/webm,video/mp4,video/quicktime,' +
-  // some instances allow audio uploads
-  'audio/mpeg,audio/mp4,audio/vnd.wav,audio/wav,audio/x-wav,audio/x-wave,audio/ogg'
-
 export const MEDIA_ALT_CHAR_LIMIT = 420
+
+const acceptedFileTypes = [
+  '.3gp',
+  '.aac',
+  '.flac',
+  '.gif',
+  '.jpeg',
+  '.jpg',
+  '.m4a',
+  '.m4v',
+  '.mov',
+  '.mp3',
+  '.mp4',
+  '.oga',
+  '.ogg',
+  '.opus',
+  '.png',
+  '.wav',
+  '.webm',
+  '.wma',
+  'audio/3gpp',
+  'audio/aac',
+  'audio/flac',
+  'audio/m4a',
+  'audio/mp3',
+  'audio/mp4',
+  'audio/mpeg',
+  'audio/ogg',
+  'audio/wav',
+  'audio/wave',
+  'audio/webm',
+  'audio/x-aac',
+  'audio/x-m4a',
+  'audio/x-mp4',
+  'audio/x-pn-wave',
+  'audio/x-wav',
+  'image/gif',
+  'image/jpeg',
+  'image/png',
+  'video/mp4',
+  'video/ogg',
+  'video/quicktime',
+  'video/webm',
+  'video/x-ms-asf'
+]
+
+const isIOS = process.browser && /iP(?:hone|ad|od)/.test(navigator.userAgent)
+
+// TODO: iOS has a bug where it does not allow audio uploads unless you either *only* accept audio, or
+// you accept everything. Since this is not a great user experience (e.g. it could lead someone trying
+// to upload a PDF, which is not allowed), then we only use the */* for iOS.
+// WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=190982#c2
+export const mediaAccept = isIOS ? '*/*' : acceptedFileTypes.join(',')