How to Implement Multiple Image Upload Mechanism in Vue.js Application

In this tutorial, we are going to implement the multiple-image upload using Vue.js.

The overall multiple image upload mechanism looks like below:

1. Create a sample Vuejs application:

Open the command prompt or terminal and create a project.

vue create vue-multiple-image-upload
  

Select the default option or manually select feature of your own and hit enter.

This will create a Vuejs application, Now go to the project folder. 

cd vue-multiple-image-upload
  

Run the application.

yarn serve //for yarn package manager
    npm run serve //for npm package manager
  

2. Implement Multiple Image Upload Mechanism.

Here, we are using vue-upload-multiple-image component dependency. The advantage of using this dependency is

• Can upload single and multiple images
• Have drag and drop feature
• Can preview the uploaded images
• Can add, edit and delete the uploaded images
• Can be marked as the default or primary image  

Now, add the dependency in our sample application created.

For yarn package manager:

  yarn add vue-upload-multiple-image
  

For npm package manager:

  npm install vue-upload-multiple-image
  

Open the project in your favorite editor. And open the App.vue file or any file where you want to import it.

  import VueUploadMultipleImage from 'vue-upload-multiple-image'
  

Register the component:

  components: {
    VueUploadMultipleImage,
  },
  

Use the component:

 <vue-upload-multiple-image 
    @upload-success="uploadImageSuccess"
    @edit-image="editImage"
    @mark-is-primary="markIsPrimary"
    @limit-exceeded="limitExceeded"
    @before-remove="beforeRemove"
    id-upload="myIdUpload"
    id-edit="myIdEdit"
    :max-image=20
    primary-text="Default"
    browse-text="Browse picture(s)"
    drag-text="Drag pictures"
    mark-is-primary-text="Set as default"
    popup-text="This image will be displayed as default"
    :multiple=true
    :show-edit=true
    :show-delete=true
    :show-add=true
 >
 </vue-upload-multiple-image>
  

Here, all the events and props are implemented.

@upload-success event will be trigger for each image upload.

@edit-image will be trigger when editing an image i.e trying to replace the particular image

@mark-is-primary will be trigger when if you want to mark any image as a default or primary image.

@limit-exceeded will be trigger when the image upload number exceeds that is defined in max-image         props

@before-remove will be trigger when we try to delete the image 

Now let's implement each event function to handle them. In order to do so, use the following functions inside Vuejs methods.

methods: {
    uploadImageSuccess(formData, index, fileList) {
      console.log('data', formData, index, fileList)
      // Upload image api
      // axios.post('http://your-url-upload', formData).then(response => {
      //   console.log(response)
      // })
    },
    beforeRemove(index, removeCallBack) {
      console.log('index', index)
      var r = confirm("remove image")
      if (r == true) {
        removeCallBack()
      }
    },
    editImage(formData, index, fileList) {
      console.log('edit data', formData, index, fileList)
    },
    markIsPrimary(index, fileList){
      console.log('markIsPrimary data', index, fileList)
    },
    limitExceeded(amount){
      console.log('limitExceeded data', amount)
    }
  },
  

Here, you can handle each event triggered. For e.g for uploadImageSuccess function, we can call the endpoint to upload the images.

Now, run the application and test it.

Read More

How to create thumbnail Image using Java.

In this tutorial, I will show you how we can create thumbnail images using Java. Thumbnails are the reduced size of images or videos. Basically, if your website is loading a lot of images with larger pixel values i.e larger size then, the performance of the website will be poor. 

So, while loading web pages with images first showing thumbnails of images and when the user clicks on it then load the original images will increase the user experience and performance of the website.

Here, in order to do so, we are using the library called " thumbnailator" which will help to generate high-quality thumbnails.

Add Dependency:

Download the jar file from here. Load the downloaded jar file on your project.

For IntelliJ Idea:

Go to: File >> Project Structure(Ctr + Alt + Shift + s) >> Libraries  and click the + icon on the top left corner and select library file that we downloaded. Apply and save, now we are ready to write code. If you are using in an existing project like Gradle or Maven:

For Gradle:

Inside build.gradle file under dependencies, 

compile 'net.coobird:thumbnailator:0.4.8'

For Maven:

Inside pom.xml

<dependency>
  <groupid>net.coobird</groupid>
  <artifactid>thumbnailator</artifactid>
  <version>0.4.8</version>
</dependency>

Create thumbnail from image file:

Let's create a class called Thumbnail.java:

import net.coobird.thumbnailator.Thumbnails;
import java.io.File;
import java.io.IOException;

    public class Thumbnail {

    public static void main(String[] args) {
        String inputImagePath = "E:/image.jpg"; //input image path
        File inputFile = new File(inputImagePath);
        String fileName = inputFile.getName();
        String outputPath = "E:" + "/T_"+fileName; //output path to write thumbnail image
        Thumbnail.createFromImageFile(inputFile, outputPath);
    }

    private static void createFromImageFile(File inputFile, String outputPath){
        try {
            Thumbnails.of(inputFile)
                    .size(500, 500)
                    .toFile(outputPath);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

Here, the image is resized to the square of size 500*500 i.e width*height.

Create thumbnail from Buffered image:

private static void createFromBufferedImage(BufferedImage image, String outputPath){
        try {
            Thumbnails.of(image)
                    .size(500, 500)
                    .toFile(outputPath);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

Create thumbnail Image by scaling:

private static void createByScaling(File inputFile, String outputPath){
        try {
            Thumbnails.of(inputFile)
                    .scale(0.25)
                    .toFile(outputPath);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

Here, it creates a thumbnail that is 25% of the original image.

Read More