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