'Vue FilePond only open camera on iOS

I'm following this demo from the FilePond, copied the code to my project and it does work as expected on my desktop but doesn't work on my mobile (iOS) allowing me to only open the camera rather than having an option to select photos from the Camera Roll as well as open the camera. But if I open this demo from the codesandbox on my mobile it does show an option to select photos. So I'm very confused.

I've tried multiple browsers on my mobile (i.e. Safari, Firefox)...

Could anyone please help me to solve this issue, spent already two days trying to find the solution but without any success...


<template>
    <div id="app">
        <file-pond
            name="test"
            ref="pond"
            label-idle="Drop files here or <span class='filepond--label-action'>Browse</span>"
            allow-multiple="true"
            accepted-file-types="image/jpeg, image/png"
            v-bind:files="myFiles"
        />
    </div>
</template>

<script>
    // Import Vue FilePond
    import vueFilePond from 'vue-filepond'

    // Import FilePond styles
    import 'filepond/dist/filepond.min.css'

    // Import FilePond plugins
    // Please note that you need to install these plugins separately

    // Import image preview plugin styles
    import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css'

    // Import image preview and file type validation plugins
    import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type'
    import FilePondPluginImagePreview from 'filepond-plugin-image-preview'

    // Create component
    const FilePond = vueFilePond(
        FilePondPluginFileValidateType,
        FilePondPluginImagePreview
    )
    export default {
        name: 'FilePondDemo',
        data: function() {
            return { myFiles: [] }
        },
        components: {
            FilePond
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>

vuejs3 filepond

Solution 1:^[1]

I don't really see anything wrong with the code. Is it possible that this is a problem with your test device?

I've just tried the code sandbox link (https://p3v8zoprp7.csb.app) on iOS 15.4 iPhone 13 Mini Simulator + iOS 14.5 iPhone 8 Simulator and it shows me a choice between camera / photo library.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Rik

'Vue FilePond only open camera on iOS

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]