An open API service indexing awesome lists of open source software.

https://github.com/cloudinary-devs/training-vuejs

Code used for training video
https://github.com/cloudinary-devs/training-vuejs

Last synced: 2 months ago
JSON representation

Code used for training video

Awesome Lists containing this project

README

          

# Vue cloudinary File Upload

[demo](https://cloudinary-devs.github.io/training-vuejs/index.html)

## Demonstrate a file upload using the Cloudinary Upload API

User supplies the following input:
* a cloud name that is created during registration for the Cloudinary service
* an unsigned preset that is created using the Cloudinary Web UI settings or Preset API
* the contents of a file selected from the local file system

## Reference Documentation

* [Vuejs Progress bar](https://www.npmjs.com/package/vuejs-progress-bar)
* [Axios](https://www.npmjs.com/package/axios)
* [Codepen demonstrating Vanilla JS and XHR with Upload API](https://codepen.io/team/Cloudinary/pen/QgpyOK)
* [Documentation: Image and Video Upload](https://cloudinary.com/documentation/vue_image_and_video_upload)
* [Documentation: JavaScript Image and Video Upload](https://cloudinary.com/documentation/javascript_image_and_video_upload)
* [Documentation: Unsigned video upload](https://cloudinary.com/documentation/jquery_image_and_video_upload?query=unsigned&c_query=Direct%20uploading%20from%20the%20browser%20%E2%80%BA%20Unsigned%20upload#unsigned_upload)
* [Support Link About Unsigned Presets](https://support.cloudinary.com/hc/en-us/articles/204046472-Which-upload-parameters-are-allowed-when-using-unsigned-upload-)
* [Support Link About Unsigned Uploads Security Considerations](https://support.cloudinary.com/hc/en-us/articles/360018796451-Unsigned-Uploads-Security-Considerations)

## Install and Setup HelloWorld in Vue.js
These instructions will create a HelloWorld app in a `vue-app` folder.

## Build for docs directory
This code is hosted on github.io. The build command is configured to output into the `docs` directory
so you can choose `master/docs` from the github.com settings page gh-pages section.

To build run
```
npm run build
```