Howto use it with meteorjs? (node server)

[thor-n]

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]

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 ***@***.***> 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 <#12>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABkcy2gbOPpqwVvPetKzPMZFtTzBSvykks5tki9hgaJpZM4TDkn4> .

[thor-n]

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.

• I can get the preview image

• I dont get the Send/saving button,

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

My code:
Vue2,Meteor,Vuetify

`

  <div>
      <button type="button" v-on:click="$upload.select('avatar')" :disabled="$upload.meta('avatar').status === 'sending'">
          Select avatar
      </button>

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

  <div v-if="$upload.files('avatar').error.length" class="text-danger">
      {{ $upload.files('avatar').error[0].errors[0].message }}
  </div>

`

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]

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

Just remove those $msgbag lines.

[thor-n]

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]

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.