1.0.4 • Public • Published


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


  • 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


yarn add @nagoos/vue-image-picker


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%">

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


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


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


A key representing a unique image 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:


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


The value is an Object with two properties:


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.

Package Sidebar


Weekly Downloads






Unpacked Size

1.14 MB

Total Files


Last publish


  • wallslide