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

Property	Description	Default	Required
cloudName	Cloudinary cloud name	N/A	Yes
preset	Unsigned upload preset	N/A	Yes
buttonText	Upload button text	Upload	No
minNumberOfFiles	Min number of selected files before upload is enabled	1	No
minNumberOfFiles	Maximum number of files to upload	10	No
maxFileSize	Maximum files size	40MB	No
allowedFileTypes	Comma separated list of file types allowed to upload (client side validation)	/image/*, video/*	No
tags	Array of tags to add as metadata to Cloudinary upload	[]	No
autoProceed	Should upload start automatically after selecting photos/videos	false	No
showProgressDetails	Show progress information during upload	true	No
closeModalOnClickOutside	Close modal dialog when clicking outside of frame	true	No
buttonStyle	CSS class to add to the button	default style	No

Events

Event	Description
uploaded	Fired when upload completes. Contains the data object returned from Cloudinary
upload-progress	Fired during upload. Contains a standard XHR progress object

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