Comments (2)
You can use URL.createObjectURL(file)
in the Vue part to display the blob:
<script setup lang="ts">
const avatar = ref()
function onFileChange (files: FileList | null) {
if (!files?.length) return
avatar.value = URL.createObjectURL(files[0])
}
</script>
<template>
<form class="p-2">
<UFormGroup name="avatar" label="Avatar" help="JPG or PNG, 1MB max.">
<UAvatar :src="avatar" alt="avatar" size="lg" />
<UInput ref="fileRef" type="file" accept=".jpg, .jpeg, .png" @change="onFileChange" />
</UFormGroup>
</form>
</template>
See a demo on https://stackblitz.com/~/edit/github-x6x77g
from core.
I was just working on a way to preview the image before you upload it. Maybe you can add this to the useUpload
composable?
Or is the pathname
the location of the local image which can then be used in a <img>
element?
from core.
Related Issues (20)
- 403 error with D1 but R2 authenticates when using remote storage
- [Admin Console] No info/error when repo is not available HOT 1
- adding the NuxtHub module give me error with throw createError HOT 2
- [Admin Console] Can't find organization repositories HOT 1
- useNitroApp() don't access values from plugin in prod HOT 2
- Nuxt 4 support should be turned off by default HOT 1
- Local Development Server works fine but deploying to NuxtHub results in a `500` Error on all pages HOT 1
- [Admin] Hide delete team button when not possible HOT 1
- Support Cloudflare Hyperdrive connection in Nuxt-hub HOT 1
- Command to copy production database into preview HOT 1
- [ADMIN| Better error message when call to database fails HOT 1
- [Feature]: Allow linking the same repository to multiple projects HOT 2
- [Admin Console] "Too many API requests by single worker invocation." when opening large cache HOT 2
- [nuxt] [request error] [unhandled] [500] global is not defined HOT 5
- Dependency Dashboard
- [Admin Console] Can't delete database entries without id HOT 3
- [Admin Console] DB Table Header is hard to read when scrolling
- Im getting error "Error when creating the project Cannot read properties of null (reading 'find')". HOT 1
- Cloudflare - Durable Object support HOT 1
- Missing DB Binding (D1) HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from core.