UInput Type File x Supabase Storage Upload
KazTheCreator opened this issue · comments
Environment
- Operating System: Darwin
- Node Version: v20.11.1
- Nuxt Version: -
- CLI Version: 3.11.1
- Nitro Version: -
- Package Manager: npm@10.2.4
- Builder: -
- User Config: -
- Runtime Modules: -
- Build Modules: -
Version
v.2.13.0
Reproduction
https://stackblitz.com/edit/nuxt-ui-g7snqc?file=app.vue
Description
Hey!
Im running into a new issue with UInput and Supabase Storage Upload.
Ive created a component to upload/update an avatar image from the app to supabase storage.
Im following this docs: https://supabase.com/docs/guides/getting-started/tutorials/with-nuxt-3#create-an-upload-widget
When im using a native input html tag and follow the guide/doc it works and the file will be uploaded correctly to storage bucket in supabase.
In case im using a UInput type file it will fail.
It seems to me the issue is the following:
Native Input Change Event is a valid Object of evt.target.files
UInput Change Event is a String of the computed Path. (It computes to the C:..FakePath/generic-avatar-a.jpg)
Is there a way to "not" get the FakePath? Am I missing something?
Ive tried a v-model on UInput too, which resulted in supabase recieving the string of fakepath url.
Ive provided a reproduction in a minimalistic way.
Thank you in advance for looking at the issue! :)
Additional context
This works:
<input
type="file"
id="single"
accept="image/*"
@change="uploadAvatar"
:disabled="uploading"
/>
This fails:
<UInput
type="file"
class="w-full"
@change="uploadAvatar"
accept="image/*"
/>
Function:
<script setup>
const files = ref();
const uploadAvatar = async (evt) => {
files.value = evt.target.files;
console.log(files.value);
};
</script>
Logs
app.vue:36 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'files')
at uploadAvatar (app.vue:36:28)
at callWithErrorHandling (vue.js?v=6c63edae:1661:19)
at callWithAsyncErrorHandling (vue.js?v=6c63edae:1668:17)
at emit (vue.js?v=6c63edae:2192:5)
at vue.js?v=6c63edae:9264:45
at Proxy.onChange (Input.vue:174:9)
at _mergeProps.onChange._cache.<computed>._cache.<computed> (Input.vue:307:79)
at callWithErrorHandling (vue.js?v=6c63edae:1661:19)
at callWithAsyncErrorHandling (vue.js?v=6c63edae:1668:17)
at HTMLInputElement.invoker (vue.js?v=6c63edae:10301:5)
Are you sure your @nuxt/ui
version is 2.13
, because since 2.15
your uploadAvatar
function would receive the files directly, no need to do evt.target.files
.
You are right I had ^2.13.0 in package.json and it seems the latest npm i did used 2.15.
Thank you very much & sorry for the inconvenience.
I did it like this and it works now:
files.value = evt
const file = files.value[0]
Might be interesting though for the UInput Docs Page?
Since the guide of supabase and the rest that I found researching was using the evt.target.files
approach.