vue-pony-uploader

Vue component for uploading images directly to Amazon S3 or Google Cloud Storage via a signed url. Optional config for tracking and persisting images and metadata (see ./example/server)

Usage no npm install needed!

<script type="module">
  import vuePonyUploader from 'https://cdn.skypack.dev/vue-pony-uploader';
</script>

README

vue-pony-uploader

NPM Version NPM Downloads License

Pony uploader is a simple drag & drop image uploader which will send image directly to Amazon S3 or Google Cloud Storage using a signed url, based on your configuration.

This project contains a server component which will work well with express, a client side component, and a full example project. Pony-uploader uses several HTML5 features and will probably not work on older browsers.

What is a signed URL?

"A signed URL is a URL that provides limited permission and time to make a request. Signed URLs contain authentication information in their query string, allowing users without credentials to perform specific actions on a resource. When you generate a signed URL, you specify a user or service account which must have sufficient permission to make the request that the signed URL will make. After you generate a signed URL, anyone who possesses it can use the signed URL to perform specified actions, such as reading an object, within a specified period of time." - Google

Getting Started

Follow the steps below to quickly have the image loader component running within your Vue application.

Install

npm i vue-pony-uploader --save

Usage

If you have a staging and production environment for your api endpoints, consider using an environment variable for the base-url as shown below.

<!-- component.vue -->
<vue-image-upload
    v-model="image"
    ref="uploader"
    placeholder-image-url=""
    :base-url="`${VUE_APP_PONY_UPLOADER_HOST}`"
></vue-image-upload>

// component.js
import VueImageUpload from 'vue-pony-uploader'
Vue.component('vue-image-upload', VueImageUpload)

const vue = new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})
export { vue as Vue }

Options

Since the component provides the ability to optionally track image metadata with a backend of your choice, there are many options available.

key type default required
base-url String N/A Yes
signature-url String /signature No
index-url String /index No
bucket String images No
track-image-status Boolean false No
width Number 200 No
height Number 200 No
imageWidth Number 200 No
imageHeight Number 200 No
jpgQuality Number 1 No
imageBackgroundColor String #9ff No

Setup and Run Demo

Follow the steps below to have the example Vue application and example server up and running quickly.

Setup Amazon S3 or Google Cloud Storage

NOTE: The example server is meant to be an example and should not be considered production ready. The /signature endpoint will fetch a signed url once you have provided your cloud credentials. However, the /index endpoints for optional image tracking is only stubbed out. It is up to you to implement them should you want to track whether the image ends up getting used or will become stale.

Details on setting up your server can be found here

NOTE: The example server provides the functionality for obtaining a signed url from Amazon S3 or Google provided only has the index endpoints stubbed out. It is up to you to implement them should you want to track whether the image ends up getting used or will become stale.

Run with Docker

$ git clone https://github.com/ponycode/pony-uploader
$ cd pony-uploader/example
$ docker-compose up

Navigate to http://localhost:3001

Run without Docker

$ git clone https://github.com/ponycode/pony-uploader
$ cd pony-uploader/example/server
$ npm install
$ npm start
$ cd .. && cd client-demo
$ npm install
$ npm run serve

Navigate to http://localhost:8080

License

Copyright (c) 2015 Joshua Kennedy Licensed under the MIT license.