Image Upload Image Preview

Question

Hi everyone hope you can help me to display the preview image or thumbnail after selecting the image not after pressing the upload button. Hope you can help me guys! Thanks..

Profile Image Upload

Answer 1

This is my code for upload handler here temp_storage_path is local application temp path

import java.io.File;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.io.InputStream;
import com.wcs.wcslib.vaadin.widget.multifileupload.ui.UploadFinishedHandler;

public class ImageUploadFinishedHandler implements UploadFinishedHandler {

    VerticalLayout imageLayout;

    public ImageUploadFinishedHandler(VerticalLayout imageLayout) {
        this.imageLayout = imageLayout;
    }

    @Override
    public void handleFile(InputStream stream, String fileName, String arg2, long arg3) {
        File file = null;
        try {
            file = new File("temp_storage_path"+fileName);
            OutputStream outputStream = new FileOutputStream(file);
            int read = 0;
            byte[] bytes = new byte[1024];
            while ((read = stream.read(bytes)) != -1) {
                outputStream.write(bytes, 0, read);
            }
            outputStream.close();
        } catch (FileNotFoundException e) {
            return;
        } catch (IOException e) {
            return;
        }
        this.imageLayout.removeAllComponents();

        Image previewImage = new Image();
        this.imageLayout.addComponent(previewImage);
        previewImage.setWidth("100px");
        previewImage.setHeight("100px");
        previewImage.setSource(new FileResource(file));
    }

}