Solution:
It works with https://github.com/signalkuppe/vuetify-cloudinary-upload
But had problems with it so I used the code files without all the packets stuff and made a component folder called v-cloudinary-upload
In v-cloudinary-upload.vue
deleteImage : function(){
Meteor.call('cloudinaryprofildestroy',this.imgPublicId, function(error, response) {});
server -> main.js
cloudinaryprofildestroy: function(public_id)
{
let meteorUser2 = Meteor.userId();
const cloudinaryApp = require('cloudinary');
Meteor.users.update(
{_id: meteorUser2},
{$set: { profileimage: null } }
);
cloudinaryApp.uploader.destroy(public_id, function(result) { console.log(result) });
},
server
Meteor.startup(() => {
const cloudinaryApp = require('cloudinary');
cloudinaryApp.config({
cloud_name: 'xx',
api_key: 'xx',
api_secret: 'xx'
});
Insert image name into mongodb DB:
In v-cloudinary-upload.vue
formdata = null
if (response.status !== 200) { // failure
console.log('Image upload error', response.responseText)
this.$emit('error', response.responseText)
} else { // success
let uploaded = JSON.parse(response.responseText)
this.imgPublicId = uploaded.public_id
this.$emit('input', uploaded.public_id)
Meteor.call('cloudinaryprofilupdate',uploaded.public_id, function(error, response) {});
in main.js server
cloudinaryprofilupdate: function(public_id)
{
let meteorUser2 = Meteor.userId();
Meteor.users.upsert(
{_id: meteorUser2},
{$set: { profileimage: public_id } }
);
},
The last thing is to make a if statement on the
<img
v-if="imgPublicId"
:src="imgSrc" />
that tjeck the DB and that also works on the delete button
If you se any bugs in my code please reply