vue-uppy-cloudinary v0.0.5

Vue-Uppy-Cloudinary

A VueJs based uploader that utilizes Uppy.io and Cloudinary.

Demo

Install

npm install vue-uppy-cloudinary --save

Use in existing component

Import VueUppyCloudinary component and CSS

import VueUppyCloudinary from 'vue-uppy-cloudinary';
import 'vue-uppy-cloudinary/dist/lib/vue-uppy-cloudinary.min.css'

Add to component

 components: {
    VueUppyCloudinary,
  },

Include component in VueJS template

Sign up with Cloudinary for a free account. Input your cloud name and define a unsigned upload preset. The preset will define which transformations to apply to the uploaded image or video and the allowed filetypes and sizes.

 <vue-uppy-cloudinary
      preset="[your-cloudinary-preset]"
      cloudName="[your-cloudinary-cloud-name]"
    />

##Complete component using vue-uppy-cloudinary

<template>
  <div id="app">
    <h1>Demo</h1>
    <vue-uppy-cloudinary
          preset="b0gbylpo"
          cloudName="lthekxbe9"
          @uploaded="uploaded"
        />
  </div>
</template>

<script>
  import VueUppyCloudinary from 'vue-uppy-cloudinary';
  import 'vue-uppy-cloudinary/dist/lib/vue-uppy-cloudinary.min.css'

  export default {
    components: {
      VueUppyCloudinary,
    },
    methods: {
      uploaded(data) {
        console.log(data);
      }
    },
  }
</script>

Properties

Events

Uploaded event

The uploaded event will contain data from Cloudinary such as image url (http and https), public_id, resource_type, etag, format and so on. The payload will differ depending on your assigned upload preset