websanova / vue-upload

A simple, light weight and intuitive upload control for Vue.js.
MIT License
222 stars 34 forks source link

Howto use it with meteorjs? (node server) #12

Closed thor-n closed 6 years ago

thor-n commented 6 years ago

I'm trying to find a simple upload script for my Meteor,Vue,Vuetify projects and it would be great if I could use the vue-upload.

I get this message: Uncaught TypeError: Cannot read property 'error' of undefined at VueComponent.onError (settings.vue:140)

when trying to upload image

websanova commented 6 years ago

It's built for vue.js not php.

Did you check the docs at all for an example?

On Mon, Apr 2, 2018, 21:02 NordThorus notifications@github.com wrote:

I'm trying to find a simple upload script for my Meteor,Vue,Vuetify projects and it would be great if I could use the vue-upload.

When I try to use it in my project. I only see a dummy avatar and no browse button.

Do the code work for node projects? (meteorjs) or is it PHP only?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/websanova/vue-upload/issues/12, or mute the thread https://github.com/notifications/unsubscribe-auth/ABkcy2gbOPpqwVvPetKzPMZFtTzBSvykks5tki9hgaJpZM4TDkn4 .

thor-n commented 6 years ago

Hi,

Thanks for your reply, I'm just a big ? when talking about node/vue/meteor uploading, and I can se many people have that problem. I'm very new to node and Vue.

I have been looking at the examples and have tried to use it on my app.

Url to send image to: /avatar and is on my local machine (locaslhost:3000/avatar)

My code: Vue2,Meteor,Vuetify

`

`

script `

Vue.use(require('@websanova/vue-upload'));

export default { data() { return { brandImage: null }; },

created() { this.$upload.new('avatar', { startOnSelect: false, onSuccess(res) { this.$msgbag.success('Avatar uploaded successfully.'); this.brand = res.data.data; }, onError() { this.$msgbag.error('Error uploading avatar.'); }, onSelect(files) { files[0].preview((file) => { this.brandImage = file.raw; }); } }); },

mounted() { this.$upload.reset('avatar', { url: 'avatar/' + this.userId });

this.brandImage = this.userId || '//www.gravatar.com/avatar/?d=identicon&s=100';

}

} `

websanova commented 6 years ago

I guess your error is coming from the $msgbag, which is another plugin.

Just remove those $msgbag lines.

thor-n commented 6 years ago

Is there any other plugins I need? I have removed msgbag

TO: onSuccess(res) { console.log('Brand logo uploaded successfully.'); this.brand = res.data.data; }, Now i get: Brand logo uploaded successfully

But still no image in the brands folder, does it work on a localhost node server?

This should upload the photo, correct? (to public folder /brands)

`mounted() { this.$upload.reset('brand-logo', { url: '/brands'

});
console.log("uploades");
// this.brandImage = this.brand.logo || '//www.gravatar.com/avatar/?d=identicon&s=100';

}`

And this don't get me any Save Logo button. its like the v-show="!$upload.meta('brand-logo').status === 'sending dont work

<button type="button" v-on:click="$upload.start('brand-logo')" :disabled="$upload.meta('brand-logo').status === 'sending'">
    <span v-show="$upload.meta('brand-logo').status === 'sending'">Saving...</span>
    <span v-show="!$upload.meta('brand-logo').status === 'sending'">Save Logo</span>

</button>
websanova commented 6 years ago

It's just a simple frontend plugin man, i'ts not gonna do everything for you.

If you can verify the request with some data is being set from your front end then that's it.