My current issue involves using Cloudinary to upload an image and then sending the returned URL from Cloudinary to the backend for storage in my database. The problem arises when calling the Cloudinary API, as it does not wait for the response before proceeding to call the backend URL. I have attempted solutions such as async-await and promises, but nothing seems to be working.
Here is the code snippet from cloudinary.js:
import axios from 'axios'
export default {
async uploadToCloudinary(data) {
let url = `url`
let config = {
headers: {
"Content-type": "multipart/form-data",
},
};
let image_url = axios.post(url, data, config).then(async res => {
let data = await res.json();
return data.secure_url
}).catch(error => {
console.log(error)
})
return image_url
}
}
And from main.vue:
async process() {
let formy = new FormData();
formy.append("file", this.file);
formy.append("upload_preset", 'abcde');
let imageUrl = await cloudinary.uploadToCloudinary(formy)
await dataService.sendToDatabase({ image: imageUrl.secure_url}).then(res => {
console.log(res)
})
}