Rms-vueuppy-cloudinary NPM

rms-vueuppy-cloudinary

rms-vueuppy-cloudinary is the vue js library which utilizes uppy library to upload file to the cloudinary. This library provides the dashboard uploader vue component with different options. This library depends on vue2 and uppy(^3.9.0).

Installation

npm install rms-vueuppy-cloudinary

How to implement example:

import UppyCloudinaryUpload from 'rms-vueuppy-cloudinary';

<UppyCloudinaryUpload btnTriggerClass="btnUpload" preset="" cloudName="" :allowedMetaFields="allowedMetaFieldsArr" @uploaded="uploaded">
     // if you want to pass some icons inside button slot is created
      <!-- <template v-slot:btn-icon>
        <b-icon icon="cloud-upload-alt"
        size="is-medium"></b-icon>
      </template> -->
</UppyCloudinaryUpload>

Props

Props	Type	Required	Description
btnTriggerClass	String	Yes	Button class with which uppy dashboard will triggered
preset	String	Yes	Your preset
cloudName	String	Yes	Your cloudinary cloud name
allowedMetaFields	Array	Optional	default:"file","name","upload_preset"
allowMultipleUploadBatches	Boolean	Optional	default: false
allowedFileTypes	Array	Optional	default: 'image/','video/',"image/png'
minNumberOfFiles	Number	Optional	default: 1
maxNumberOfFiles	Number	Optional	default:10
maxFileSize	Number	Optional	default:40000000
closeModalOnClickOutside	Boolean	Optional	default: true
closeAfterFinish	Boolean	Optional	default: true
disableModal	Boolean	Optional	default:false, Wheather to show dashboard uploader as popup or inline, for inline closeAfterFinish should be false
tags	Array	Optional	default: []
autoProceed	Boolean	Optional	default: false
showProgressDetails	Boolean	Optional	default:true
buttonText	String	Optional	default: "Upload"
buttonClass	String	Optional	default: "button is-secondary"
debug	Boolean	Optional	default: true

Vue Events

uploaded This events will emit information about uploads.

How to listen to events example?

<!-- eslint-disable vue/no-unused-components -->
<template>
  <div>
    <UppyCloudinaryUpload btnTriggerClass="btnUpload" preset="" cloudName=""  @uploaded="uploaded">
    // if you want to pass some icons inside button slot is created
      <!-- <template v-slot:btn-icon>
        <b-icon icon="cloud-upload-alt"
        size="is-medium"></b-icon>
      </template> -->
    </UppyCloudinaryUpload>
  </div>
</template>

<script>
import UppyCloudinaryUpload from './components/UppyCloudinaryUpload.vue';


  export default {
    name: "App",
    components: { UppyCloudinaryUpload },
    data(){
      return {
        cloudName:'<your cloudinary cloudname',
        preset: '<your preset>'
      }
    },
    methods:{
      uploaded(results){
        console.log("UPLOADED status ",{results});
      }
    }
}
</script>
<style lang="scss" scoped>
</style>