Vue Multiple Image Upload With Preview.

Overview

Vue Multiple Image Upload

Welcome Back

Hello Everyone,My name is Zin Min Htet and here is my Facebook account.

Now, I will show you how to Upload Multiple Image using Vue-Component.

There is an image Preview, Resize, Remove, Add More, Drag & Drop features are included.

You can also limit the maximun number of file upload, the Image size , the Image type.

I add new feature alert Box, Resize Image, Preview also can be resize in version 1.0.8;

Here is Live Demo

preview

Watch Now Live Demo.

Installation

npm i @zakerxa/vue-multiple-image-upload

Setup

1 - Import the vue component locally in the script Tag

<script>
 import { VueMultiImageUpload } from '@zakerxa/vue-multiple-image-upload';

  export default {
    components:{
      VueMultiImageUpload
    }
  }
</script>

OR Global registration in your main.js

 import { VueMultiImageUpload } from '@zakerxa/vue-multiple-image-upload';
 const app = createApp(App);
 app.component("vue-multi-image-upload", VueMultiImageUpload);

2 - In your Vue Template

<template>
    <vue-multi-image-upload @data-image="images" :max="4" :data-reset="component"/>
</template>

⇃⇃⇃⇃⇂⇂⇂⇂

<script>
export default {
    data(){
      return {
        component : {}
      },
    },
    methods:{
        images(e){
          e.map(res=>console.log(res))
        },
        clear(){
            this.component.clear = true;
        }
    }
}

</script>

Props & Type

Props Data Type Default Optional Description
max Number 6 YES Upload File Limit
Preview Object { h:100, w:100 } YES Preview Size h => height
Resize Object No Default YES { h:500, w:500 , keepRatio: true}
imageSize Number 4e6 YES Image File Size
alertTimeout Number 3e3 (3s) YES Alert TimeOut
accept Array [image/png, image/jpg, image/gif] YES Image's Format Validate
dataReset Object false No Reset the child component data.
Options Object "Maximun","Ready","Selected" YES Input Box Message.

Explanation of usage

1.Images methods can listen child input data from parent the component.

  @data-image="images"
  images(e){
   e.map(res=>console.log(res))
  }

2.We can Resize the images by adding resize props

:resize={ h:500, w:500 ,keepRatio:true}
h => max-height of the image
w => max-width of the image

keepRatio true can resize your image without losing distortion
keepRatio false can resize your image exactly width & height

Default is False

3.We can limit the number of image to upload maximun

:max="limitNumber"

4.We can also limit the images size & type.

:image-size="imageSize" :accept="imageType"

this.imageSize = 2e6; // 2MB
ImageSize only allow 2MB else We will show alert msg to user.

this.imageType = ['image/jpeg', 'image/png', 'image/gif'];
imageType should be inside an array

5.And, There is one options.Options can change the message inputBox.

:options="options"
this.options.max = "Max";
this.options.ready = "Ready";
this.options.select = "Choosed";

6.If you want to reset child component data,You can use :data-reset props to passing Object

:data-reset="components"
this.component.clear = true;

Final State

That's all what you need

<template>
   <vue-multi-image-upload 
     @data-image="images" 
     :max="4" 
     :image-size="4e6"  
     :alert-timeout="3e3" 
     :accept="imageType"
     :preview="{ h:100,w:100 }"
     :resize="{ h:500,w:500, keepRatio:true}" 
     :data-reset="component" 
     :options="options"  
    />
   <button @click="clear()">Clear</button>
</template>

<script>

import { VueMultiImageUpload } from '@zakerxa/vue-multiple-image-upload';

export default {
    data(){
        return {
          component : {},
          inputImages : [],
          imageType : ['image/jpeg', 'image/png', 'image/gif']
        }
    },
    components:{
      VueMultiImageUpload
    },
    methods:{
      images(e){
        this.inputImages = e;
      },
      inputFormData(){
        // The way to append images to FormData.
        let formData = new FormData();
        this.inputImages.map(img => formData.append('images[]',img));
        return formData;
      },
      clear(){
        this.component.clear = true;
      }
    }
}
</script>
You might also like...
Sync your clipboard across multiple platforms
Sync your clipboard across multiple platforms

ClipBroad README | 中文文档 Sync your clipboard across multiple platforms. Download the latest release here. Introduction This tools uses Github private r

Yukino lets you read manga or stream anime ad-free from multiple sources.
Yukino lets you read manga or stream anime ad-free from multiple sources.

Yukino Yukino lets you read manga or stream anime ad-free from multiple sources. The project's name "Yukino" meaning "Snow" named after the character

A management panel for multiple autofeed-backend instances
A management panel for multiple autofeed-backend instances

Autofeed Commander A management panel for multiple autofeed-backend instances. Screenshots About Installation Docker No Docker Autofeed Backend Suppor

Vote multiple Cosmos-based Proposals in a single shot
Vote multiple Cosmos-based Proposals in a single shot

Cosmos-based Auto Vote Tool Vote multiple cosmos-based propsals in one single shot. Networks currently support:Cosmos, Osmosis, Juno, Stargaze, Akash,

Automate prompts to Stable Diffusion using multiple (free) cloud GPUs 🙋🎨🤖
Automate prompts to Stable Diffusion using multiple (free) cloud GPUs 🙋🎨🤖

Model Prompter is a prompt engineering and API automation tool. It uses blocks to help you design dynamic prompts that can be batched to multiple cloud GPUs.

Automate prompts to Stable Diffusion using multiple (free) cloud GPUs
Automate prompts to Stable Diffusion using multiple (free) cloud GPUs

Automate prompts to Stable Diffusion using multiple (free) cloud GPUs 🙋🎨🤖

Automate prompts to Stable Diffusion using multiple (free) cloud GPUs
Automate prompts to Stable Diffusion using multiple (free) cloud GPUs

An all-in-one prompting, scripting, and experimentation platform for Stable Diffusion.

Javascript Frontend (Vue + Electron) for Exiv2 - C++ Image Metadata Library

GNSS EXIFR Add (or) Replace GeoTag Information from CSV to JPEG (or) JPG Drone Imageries (embedded into EXIF). Remove GeoTag Information from Drone Im

Web-based image segmentation tool for object detection, localization, and keypoints
Web-based image segmentation tool for object detection, localization, and keypoints

Features • Wiki • Getting Started • Issues • License COCO Annotator is a web-based image annotation tool designed for versatility and efficiently labe

Owner
Zin Min Htet
Life is too short.
Zin Min Htet
A responsive movie preview web app

Movie Paradise 简体中文 This project is for learning and communication purposes only, not for commercial use. The data comes from third-party websites. In

wenjie 22 Jul 11, 2022
GenVue is a hostable, web application that lets confidential users upload and share private files. Tech stack: Net Core 2.0 + Vue.js + Vuex + OpenIddict + Vuetifyjs + EF + SQLServer/Postgress

Asp.NETCore 2.0 Vue 2 with WebApi Authorization Starter template This repo contains an AspNetCore 2.1 + Vue.js 2 starter template (VS2017) + NetCore W

Adam Adamczyk 127 Sep 2, 2022
A simple webserver to upload files over wifi, for example from a phone

What is this A simple webserver to upload files over wifi, for example from a phone. You can also transfer big files like 5 Gb.

null 2 Nov 26, 2021
fendThorne - a decentralised cloud storage system built for army personnel to securely upload, download and share files

fendThorne is a decentralised cloud storage system built for army personnel to securely upload, download and share files. It uses Arcana SDK and Google OAuth under the hood for storage of files and authentication of users respectively.

shourya 5 Apr 5, 2022
Vue.js application to monitor multiple AlienWorlds accounts.

AW Monitor Vue.js single page application to monitor multiple Alien Worlds accounts. Contributing Bug reports and pull requests are welcome on GitHub

Jonian Guveli 14 Jul 29, 2022
Multiple Authentication Using Laravel-Jetstream With Inertia-Vue

Multiple Authentication Using Laravel-Jetstream With Inertia-Vue About Jetstream-Inertia-Vue Multi-Auth It is a user-based multiple authentication sys

SK NIYAJ ALI 7 Sep 22, 2022
Easily share files in multiple times with a single link! Built using Vue.js on Cloudflare Workers

Built using Vue.js on Cloudflare Workers, with Durable Objects and R2. Also supports end-to-end files encryption (using AES-256-GCM).

Paul G. 10 Nov 12, 2022
News for Web Designers and Developers - Shows aggregated news from multiple sources

Update - This has now moved to a standalone site https://dailydevbytes.com/ with bit more features. You can still find the core logic in this code whi

Super Dev Resources 61 Mar 27, 2022
This project allows each person to write down their goals. You can add multiple lists that you want to run. After you complete a goal from the list, you can delete it.

This project allows each person to write down their goals. You can add multiple lists that you want to run. After you complete a goal from the list, you can delete it.

null 2 May 22, 2021
Yukino lets you read manga or stream anime ad-free from multiple sources for free! Available for Windows, Linux, MacOS and Android.

Yukino lets you read manga or stream anime ad-free from multiple sources for free! Available for Windows, Linux, MacOS and Android.

ZYROUGE 201 Nov 24, 2022