Nuxt•13mo ago

File Upload Preview

how would i put a preview image upon uploading it?

6 Replies

reinaOP•13mo ago

here's my code:

reinaOP•13mo ago

message.txt

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>

reinaOP•13mo ago

it gives me this error

Muhammad Mahmoud•13mo ago

You may want to log values to see what's wrong. Maybe you need to pass file.value[0] for example

reinaOP•13mo ago

i've got it worked. thank you :D

Gaming

Programming

File Upload Preview

Did you find this page helpful?