N
Nuxt12mo ago
reina

File Upload Preview

how would i put a preview image upon uploading it?
6 Replies
reina
reinaOP12mo ago
here's my code:
reina
reinaOP12mo ago
Muhammad Mahmoud
Muhammad Mahmoud12mo ago
First you should use $fetch instead of useFetch as this is a user-interaction based. For Image previews you create a URL from your file value and then use that in your <template>
<script setup lang="ts">
const file = ref<FileList | null>(null);
const imagePreview = computed(() =>
file.value ? URL.createObjectURL(file.value) : false
)
</script>

<template>
<p> Uploaded Image Preview </p>
<img src="imagePreview" />
</template>
<script setup lang="ts">
const file = ref<FileList | null>(null);
const imagePreview = computed(() =>
file.value ? URL.createObjectURL(file.value) : false
)
</script>

<template>
<p> Uploaded Image Preview </p>
<img src="imagePreview" />
</template>
reina
reinaOP12mo ago
it gives me this error
No description
Muhammad Mahmoud
Muhammad Mahmoud12mo ago
You may want to log values to see what's wrong. Maybe you need to pass file.value[0] for example
reina
reinaOP12mo ago
i've got it worked. thank you :D

Did you find this page helpful?