Skip to content

mwoskowicz/vue-uppy-cloudinary

This branch is 10 commits ahead of christianfroseth/vue-uppy-cloudinary:master.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

author
Mateusz Woskowicz
Aug 8, 2018
2c1c15c · Aug 8, 2018

History

31 Commits
Jan 29, 2018
Jan 29, 2018
Aug 8, 2018
Aug 8, 2018
Jan 29, 2018
Jan 29, 2018
Jan 29, 2018
Jan 29, 2018
Jan 29, 2018
Jan 29, 2018
Jan 29, 2018
Jan 29, 2018
Jan 30, 2018
Jan 29, 2018
Aug 8, 2018
Aug 8, 2018
Aug 8, 2018

Repository files navigation

Vue-Uppy-Cloudinary

GitHub issues GitHub license

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

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

About

A VueJs based uploader that utilizes Uppy.io and Cloudinary

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 73.8%
  • Vue 22.0%
  • HTML 4.2%