SkyaTura / v-cloudinary-upload

Vue Cloudinary Upload

Simple wrapper to upload files using cloudinary api

Usage

Locally

import VCloudinaryUpload from 'v-cloudinary-upload'

export default {
  components: { VCloudinaryUpload }
}

Globally

import Vue from 'vue'
import * as VCloudinaryUpload from 'v-cloudinary-upload'

Vue.use(VCloudinaryUpload)

Examples

Unsigned upload

<v-cloudinary-upload autoUpload accountName="skyatura" preset="foo">
	<button>Click here to select a file</button>
</v-cloudinary-upload>

Unsigned upload with preview

<v-cloudinary-upload autoUpload accountName="skyatura" preset="foo">
	<template slot-scope="props">
		<img :src="props.url" v-if="props.url">
		<button v-else>Click here to select a file</button>
	</template>
</v-cloudinary-upload>

Signed upload

<template>
	<v-cloudinary-upload ref="img" accountName="skyatura" @picked="onPickFile">
		<button>Click here to select a file</button>
	</v-cloudinary-upload>
</template>

<script>
export default {
	methods: {
		async onPickFile() {
			const params = await this.$axios.$get('/upload/userPicture')
			this.$refs.img.upload(params)
		}
	}
}
</script>

Properties

Property	Required	Type	Description
accountName	true	String	Your Cloudinary's account name
autoUpload	false	Boolean	If the component should automatically perform an upload after selecting a file
capture	false	Boolean, String	Passed to the input element. Check this documentation for more details
disabled	false	Boolean	If true, the file picker won't be triggered
fileTypes	false	Array, String	A list of allowed image types. It can be either an array or comma separated. Default: *
preset	false	String	Used when uploading unsigned pictures. It will be automatically appended to the upload request
tag	false	String	Defines the component wrapper tag. Default: div
uploadParams	false	Object	Append extra parameters to the upload request
@picked	--	Event	Fired when user chooses a file. It contains: file, name and url (Seeabove for more information)
@uploaded	--	Event	Fired after a successful. It contains the response from Cloudinary

Slot scope

Property	Type	Description
file	Object	Contains the file that will be uploaded
fileReader	Object	Contains the result from the file reader
name	String	The name of the file selected, if available
url	String	The file encoded in base64 for using in previews
loading	Boolean	True if the component is currently uploading an image
uploaded	Object	The response from Cloudinary, if available. (Same as the passed to the uploaded event)