IOS not adding images to file input
Hello
Im struggelig with a really weird issue. I have a form that takes in images using the UFileUpload component accepting image/*. I have a user that can open the iPhone image selection prompt and select an image, but when they press add nothing happens. What could be causing this?
3 Replies
Hi @isakwang. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
I don’t see an iOS-specific caveat in the provided docs for UFileUpload. However, a few built-in behaviors can prevent files from appearing:
- Accept filter: Ensure your accept matches iOS photo picker outputs. Using accept="image/" is correct per docs. If you accidentally restrict types (e.g., only png), iOS may return HEIC and be filtered out. [FileUpload]
- Multiple vs. single: If you’re relying on the default button variant, note that variant="button" only supports single-file (multiple must be false). For multiple files, use the default area variant with multiple. [FileUpload; Props]
- Interactive/dropzone: If you set :interactive="false" and didn’t provide an actions slot button calling open(), users can select but nothing gets added visually. Provide an actions slot and call open(). [FileUpload]
- Validation inside UForm: If wrapped in UForm with a Zod schema, the input may reject files that don’t pass validation (size, type, dimensions), so it looks like “nothing happens.” Verify your schema or temporarily remove validation. [With Form validation]
Quick checks:
- Use the simplest working baseline:
```vue
<script setup lang="ts">
const files = ref<File[] | null>(null)
</script>
<template>
<UFileUpload v-model="files" accept="image/" multiple class="w-96 min-h-48" />
<pre>{{ files?.map(f => f.name) }}</pre>
</template>
vue
<UFileUpload v-model="files" :interactive="false" multiple class="w-96 min-h-48">
<template #actions="{ open }">
<UButton label="Select images" @click="open()" />
</template>
</UFileUpload>
```
[With files-bottom slot]
If these don’t help, the knowledge sources don’t mention additional iOS-specific issues.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
<@234270188906741761> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
´<UFormField label="Bilde" name="image" required description="JPG, PNG eller WebP. Maks 10MB.">
<UFileUpload v-model="state.image" accept="image/*" class="min-h-48" variant="area" layout="list" multiple />
</UFormField>´
It works on my laptop and iphone so it can't be entirely broken