Handle onUpload on CldUploadButton in Nuxt3

leonurium

Hi, i just create project using Nuxt 3, and use this library @nuxtjs/cloudinary, here is my simple code, i try all trigger callback :

<CldUploadButton

v-if="props.withImageUpload"

:options="{

maxFiles: 1

}"

:on-success="(result: CloudinaryUploadResponse, widget: any) => {

console.log('Callback triggered');

console.log(result)

}"

:on-upload="handleUpload"

:on-upload-added="handleUpload"

upload-preset="nimue_upload_preset"

class="items-center justify-center relative flex h-9 w-9 shrink-0 overflow-hidden rounded-full text-primary-foreground bg-primary">

<IconImage/>

</CldUploadButton>

const handleUpload = (value: CloudinaryUploadResponse, widget: any) => {

console.log('Callback triggered');

console.log('from reply: ', value)

emits('onUpload', value)

}

i am already set upload preset is unsigned, but seems didnt print on console log at all, there is maybe i missed configuration?

Tamara

Hi @leonurium,

I have two questions for you:

1. Do you see any errors in the console?
2. please make sure that you have properly configured your Cloudinary settings in your project.

You can try adding checks to see if the request fails:

<template>

 <CldUploadButton

  v-if="props.withImageUpload"

  :options="{ maxFiles: 1 }"

  :on-success="handleSuccess"

  :on-upload-added="handleUploadAdded"

  upload-preset="nimue_upload_preset"

  class="items-center justify-center relative flex h-9 w-9 shrink-0 overflow-hidden rounded-full text-primary-foreground bg-primary"

 >

  <IconImage />

 </CldUploadButton>

</template>



<script setup>

import { ref } from 'vue';



const handleSuccess = (result, widget) => {

 console.log('Callback triggered on success');

 console.log(result);




 // Check if there is an error in the result

 if (result.error) {

  console.error('Upload failed:', result.error.message);

  // Handle the error, e.g., show a message to the user

 } else {

  console.log('Upload successful!');

  emits('onUpload', result);

  // Perform any additional actions for a successful upload

 }

};

const handleUploadAdded = (file, component, upload) => {

 console.log('Callback triggered on upload added');

 console.log('File added:', file);

 console.log('Upload instance:', upload);

};

</script>

Please let me know if that worked,

Best,

Tamara

Snuffleman

Hi @Tamara,
I've been looking everywhere on the internet and it seems that this is the only post discussing this. Your provided solution does not work for me. What settings were you referring to?

DannyFromCloudinary

Hi @Snuffleman.

The Nuxt integration is actually made by the community, rather than being an officially supported Cloudinary SDK, so I'm afraid I don't have lots of experience with it, nor is it something we can officially support.

That being said, I believe what Tamara was referring to was the config as described here: https://cloudinary.nuxtjs.org/getting-started#options

I hope this helps!
-Danny