@nagoos/vue-image-picker

@nagoos/vue-image-picker

A VueJS component which allows users to upload their images. Users can select one or more images for upload. The component shows the progress of the uploads and indicates when they are complete.

See working demo

Features

• Select the maximum number of images allowed to be uploaded
• Pass the image types allowed to be uploaded (default is png and jpg)
• Pass a maximum image size

Installation

yarn add @nagoos/vue-image-picker

Usage

When using ES imports, import the ImagePicker component and imageUploadingStates enum and use them in your component

import { ImagePicker, imageUploadingStates } from "@nagoos/vue-image-picker"

The v-model is an image array that holds the images the user has selected. The activeImageUploads property allows the ImagePicker component to communicate the upload status of the images the user has selected.

<ImagePicker v-model="images" :activeImageUploads="activeImageUploads">
  <v-flex xs4 md3>
    <img :src="placeholderImage" width="100%" height="100%">
  </v-flex>
</ImagePicker>  
        

Component API

The following props are available to customize vue-image-picker:

Prop	type	description	default
max	Int	Limit the number of images that can be uploaded. null for unlimited	null
maxSize	Int	Limit the maximum size of any one image in bytes.	8192 * 1024 (8192 KB)
validImageTypes	[String]	The image mime types which the user is allowed to upload	['png', 'jpg', 'jpeg']
v-model	[Object]	The images selected by the user. See Images model section for details	[]
activeImageUploads	Object	Communcates the upload progress and state of images managed by the component. See Active Image Uploads section	{}
exceedMaxImagesError	String	A message to show the user when they try to upload more images than allowed by the max prop	'The maximum number of images was exceeded by your selection.'
invalidFileTypeError	String	A message to show the user when they attempt to upload an image with an invalid file type	'Invalid file type. Please upload 'png' or 'jpg' files.'
fileSizeError	String	A message to show the user when one of their images is larger than the maxSize prop	'One or more of the files you attempted to upload is larger than the single-file size limit.'
maxImagesUnit	String	Allows for localization of the word 'images'	'images'
clearedImagesMessage	String	The message that is shown to the user when the clear the images in the component	'Cleared images'
clearImagesLabel	String	The label for the clear button. Forced uppercase	'clear'
addImagesLabel	String	The label for the add images button. Forced uppercase	'add images'

Images model

The vue-image-picker's model is an array of Objects which represents an array of images selected by the user.

Each object contains the following properties

imageFile

A native File object created by the browser when the user selects a file

imageURL

A data url which can be assigned to an <img>'s src to show the selected file

key

A key representing a unique image name

name

The name of the image file selected by the user

Active Image Uploads

An Object containing the active upload state of images selected by the user. For each image that the system wishes to indicate the upload state of, there should be a key-value pair added to the Object:

key

The key should equal the key of the image entry in the images[] array that the system wishes to indicate an upload state for.

value

The value is an Object with two properties:

{
  progress,
  state
}

The progress's value should be a Number between 0 and 100 to indicate the percentage progress of the image upload.

The state's value should be one of the imageUploadingStates enums: NEW, UPLOADING, ERROR, or COMPLETE.