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

fixes #1461
This commit is contained in:
Nolan Lawson 2019-09-08 11:07:20 -07:00 committed by GitHub
parent 72e187a0fa
commit 6d3a0b5fee
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 60 additions and 9 deletions

View file

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

View file

@ -4,9 +4,57 @@ export const DEFAULT_MEDIA_HEIGHT = 250
export const ONE_TRANSPARENT_PIXEL = export const ONE_TRANSPARENT_PIXEL =
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=' '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 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(',')