Browse for image file and display it using Java Swing

Question

My problem here is, after clicking Browse button it displays all files in a directory to choose, then the chosen image is displayed in GUI correctly. But When i click Browse button for the second time, it shows the old image only instead of showing the new one. Please help me in this.

For reference, i uploaded the UI.

package GUI;

import java.awt.BorderLayout;
import java.awt.EventQueue;
import java.awt.Graphics2D;

import javax.imageio.ImageIO;
import javax.swing.ImageIcon;
import javax.swing.JFileChooser;
import javax.swing.JFrame;
import javax.swing.JOptionPane;
import javax.swing.JPanel;
import javax.swing.border.EmptyBorder;
import javax.swing.JLabel;
import javax.swing.JButton;
import java.awt.event.ActionListener;
import java.awt.event.ActionEvent;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import java.util.logging.Level;
import java.util.logging.Logger;
import javax.swing.GroupLayout;
import javax.swing.GroupLayout.Alignment;


@SuppressWarnings("serial")
public class MainAppFrame extends JFrame {

    private JPanel contentPane;
    File targetFile;
    BufferedImage targetImg;
    public JPanel panel,panel_1;
    private static final int baseSize = 128;
    private static final String basePath =
            "C:\\Documents and Settings\\Administrator\\Desktop\\Images";

    /**
     * Launch the application.
     */
    public static void main(String[] args) {
        EventQueue.invokeLater(new Runnable() {
            public void run() {
                try {
                    MainAppFrame frame = new MainAppFrame();
                    frame.setVisible(true);
                    frame.setResizable(false);
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        });
    }

    /**
     * Create the frame.
     */
    public MainAppFrame() {
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setBounds(100, 100, 550, 400);
        contentPane = new JPanel();
        contentPane.setBorder(new EmptyBorder(5, 5, 5, 5));
        setContentPane(contentPane);
        contentPane.setLayout(new BorderLayout(0, 0));
        
        panel = new JPanel();
        panel.setBorder(new javax.swing.border.LineBorder(new java.awt.Color(0, 0, 0), 1, true));
        contentPane.add(panel, BorderLayout.WEST);
        
        JButton btnBrowse = new JButton("Browse");
        btnBrowse.addActionListener(new ActionListener() {
            public void actionPerformed(ActionEvent e) {
                browseButtonActionPerformed(e);
            }
        });
        
        JLabel lblSelectTargetPicture = new JLabel("Select target picture..");
        
        JButton btnDetect = new JButton("Detect");
        btnDetect.addActionListener(new ActionListener() {
            public void actionPerformed(ActionEvent e) {
            }
        });
        
        JButton btnAddDigit = new JButton("Add Digit");
        btnAddDigit.addActionListener(new ActionListener() {
            public void actionPerformed(ActionEvent e) {
            }
        });
        
        JButton button = new JButton("Recognize");
        button.addActionListener(new ActionListener() {
            public void actionPerformed(ActionEvent e) {
            }
        });
        
        panel_1 = new JPanel();
        panel_1.setBorder(new javax.swing.border.LineBorder(new java.awt.Color(0, 0, 0), 1, true));

        GroupLayout gl_panel = new GroupLayout(panel);
        gl_panel.setHorizontalGroup(
            gl_panel.createParallelGroup(Alignment.LEADING)
                .addGroup(gl_panel.createSequentialGroup()
                    .addGap(6)
                    .addGroup(gl_panel.createParallelGroup(Alignment.LEADING)
                        .addGroup(gl_panel.createSequentialGroup()
                            .addComponent(lblSelectTargetPicture)
                            .addGap(6)
                            .addComponent(btnBrowse))
                        .addGroup(gl_panel.createSequentialGroup()
                            .addGap(10)
                            .addComponent(btnDetect)
                            .addGap(18)
                            .addComponent(btnAddDigit))))
                .addGroup(gl_panel.createSequentialGroup()
                    .addGap(50)
                    .addComponent(button))
                .addGroup(gl_panel.createSequentialGroup()
                    .addContainerGap()
                    .addComponent(panel_1, GroupLayout.PREFERRED_SIZE, 182, GroupLayout.PREFERRED_SIZE))
        );
        gl_panel.setVerticalGroup(
            gl_panel.createParallelGroup(Alignment.LEADING)
                .addGroup(gl_panel.createSequentialGroup()
                    .addGroup(gl_panel.createParallelGroup(Alignment.LEADING)
                        .addGroup(gl_panel.createSequentialGroup()
                            .addGap(7)
                            .addComponent(lblSelectTargetPicture))
                        .addGroup(gl_panel.createSequentialGroup()
                            .addGap(3)
                            .addComponent(btnBrowse)))
                    .addGap(18)
                    .addComponent(panel_1, GroupLayout.PREFERRED_SIZE, 199, GroupLayout.PREFERRED_SIZE)
                    .addGap(22)
                    .addGroup(gl_panel.createParallelGroup(Alignment.BASELINE)
                        .addComponent(btnDetect)
                        .addComponent(btnAddDigit))
                    .addGap(18)
                    .addComponent(button)
                    .addContainerGap())
        );
        
        panel.setLayout(gl_panel);
    }
    public BufferedImage rescale(BufferedImage originalImage)
    {
        BufferedImage resizedImage = new BufferedImage(baseSize, baseSize, BufferedImage.TYPE_INT_RGB);
        Graphics2D g = resizedImage.createGraphics();
        g.drawImage(originalImage, 0, 0, baseSize, baseSize, null);
        g.dispose();
        return resizedImage;
    }
    public void setTarget(File reference)
    {
        try {
            targetFile = reference;
            targetImg = rescale(ImageIO.read(reference));
        } catch (IOException ex) {
            Logger.getLogger(MainAppFrame.class.getName()).log(Level.SEVERE, null, ex);
        }
        
        panel_1.setLayout(new BorderLayout(0, 0));
        panel_1.add(new JLabel(new ImageIcon(targetImg))); 
        setVisible(true);
    }
    private void browseButtonActionPerformed(java.awt.event.ActionEvent evt) {
        JFileChooser fc = new JFileChooser(basePath);
        fc.setFileFilter(new JPEGImageFileFilter());
        int res = fc.showOpenDialog(null);
        // We have an image!
        try {
            if (res == JFileChooser.APPROVE_OPTION) {
                File file = fc.getSelectedFile();
                setTarget(file);
            } // Oops!
            else {
                JOptionPane.showMessageDialog(null,
                        "You must select one image to be the reference.", "Aborting...",
                        JOptionPane.WARNING_MESSAGE);
            }
        } catch (Exception iOException) {
        }
    
    }
}




//JPEGImageFileFilter.java

package GUI;

import java.io.File;

import javax.swing.filechooser.FileFilter;

/*
* This class implements a generic file name filter that allows the listing/selection
* of JPEG files.
*/
public class JPEGImageFileFilter extends FileFilter implements java.io.FileFilter
 {
 public boolean accept(File f)
   {
   if (f.getName().toLowerCase().endsWith(".jpeg")) return true;
   if (f.getName().toLowerCase().endsWith(".jpg")) return true;
   if(f.isDirectory())return true;
   return false;
  }
 public String getDescription()
   {
   return "JPEG files";
   }

} 

Answer 1

Each time a new image is selected, you're creating components unnecessarily and in error here:

public void setTarget(File reference) {
    //....
    panel_1.setLayout(new BorderLayout(0, 0));
    panel_1.add(new JLabel(new ImageIcon(targetImg))); 
    setVisible(true);

Instead I would recommend that you have all these components created from the get-go, before any file/image has been selected, and then in this method, create an ImageIcon from the Image, and then simply use this Icon to set the Icon of an already existng JLabel rather than a new JLabel. This is done simply by calling myLabel.setIcon(new ImageIcon(targetImg));

Answer 2

Create an ImageViewer with method like ImageViewer.setImage(Image), display the image in a JLabel.

ImageViewer

import java.awt.*;
import java.awt.event.*;
import java.awt.image.BufferedImage;
import javax.swing.*;
import javax.swing.border.EmptyBorder;
import java.util.Random;

public class ImageViewer {
    
    JPanel gui;
    /** Displays the image. */
    JLabel imageCanvas;

    /** Set the image as icon of the image canvas (display it). */
    public void setImage(Image image) {
        imageCanvas.setIcon(new ImageIcon(image));
    }
    
    public void initComponents() {
        if (gui==null) { 
            gui = new JPanel(new BorderLayout());
            gui.setBorder(new EmptyBorder(5,5,5,5));
            imageCanvas = new JLabel();
            
            JPanel imageCenter = new JPanel(new GridBagLayout());
            imageCenter.add(imageCanvas);
            JScrollPane imageScroll = new JScrollPane(imageCenter);
            imageScroll.setPreferredSize(new Dimension(300,100));
            gui.add(imageScroll, BorderLayout.CENTER);
        }
    }
    
    public Container getGui() {
        initComponents();
        return gui;
    }
    
    public static Image getRandomImage(Random random) {
        int w = 100 + random.nextInt(400);
        int h = 50 + random.nextInt(200);
        BufferedImage bi = new BufferedImage(
                w,h,BufferedImage.TYPE_INT_RGB);
        
        return bi;
    }

    public static void main(String[] args) throws Exception {
        Runnable r = new Runnable() {
            @Override
            public void run() {
                JFrame f = new JFrame("Image Viewer");
                // TODO Fix kludge to kill the Timer
                f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
            
                final ImageViewer viewer = new ImageViewer();
                f.setContentPane(viewer.getGui());
                
                f.pack();
                f.setLocationByPlatform(true);
                f.setVisible(true);

                ActionListener animate = new ActionListener() {

                    Random random = new Random();
                    
                    @Override
                    public void actionPerformed(ActionEvent arg0) {
                        viewer.setImage(getRandomImage(random));
                    }
                };
                Timer timer = new Timer(1500,animate);
                timer.start();
            }
        };
        SwingUtilities.invokeLater(r);
    }
}

Answer 3

I modified your code , I hope it will fulfill your requirement. I use MigLayout (it is a Layout manager) to arrange the component.

import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Graphics2D;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import java.util.logging.Level;
import java.util.logging.Logger;
import javax.imageio.ImageIO;
import javax.swing.BoxLayout;
import javax.swing.ImageIcon;
import javax.swing.JButton;
import javax.swing.JFileChooser;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JOptionPane;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;
import net.miginfocom.swing.MigLayout;

public class MyFileChooser
{

JFrame frame; 
JPanel panel;
JButton btnBrowse;
JButton change;
JLabel imglabel;

File targetFile;
BufferedImage targetImg;
private static final int baseSize = 128;
private static final String basePath ="/images/fimage";
JPanel panel_1;
ImageIcon icon;
public MyFileChooser() 
{
    // TODO Auto-generated constructor stub
    frame =new JFrame();
    frame.setLayout(new MigLayout());

    frame.setSize(300, 300);
    frame.setVisible(true);
    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

     panel=new JPanel(new MigLayout());
     panel_1 = new JPanel();
     panel_1.setBorder(new javax.swing.border.LineBorder(new java.awt.Color(5, 5, 5), 1, true));

     panel_1.setBackground(Color.pink);

     btnBrowse=new JButton("browse");
     btnBrowse.addActionListener(new ActionListener() {
        public void actionPerformed(ActionEvent e) {
            browseButtonActionPerformed(e);
        }
    });

    change=new JButton("Delete");
    change.addActionListener(new ActionListener() {

        @Override
        public void actionPerformed(ActionEvent e) 
        {
            // TODO Auto-generated method stub
            changeButtonActionPerformed(e);

        }

        private void changeButtonActionPerformed(ActionEvent e) 
        {
            // TODO Auto-generated method stub

               imglabel.revalidate(); //ADD THIS AS WELL
               imglabel.repaint();  //ADD THIS AS WELL
               imglabel.setIcon(null);
               System.out.println("delete button activated");

        }
    });


    imglabel=new JLabel("Image");
    imglabel.setSize(100, 100);
    imglabel.setBackground(Color.yellow);
    frame.add(panel_1,"span,pushx,pushy,growx,growy");
    frame.add(btnBrowse);
    frame.add(change,"");

    //frame.pack();



}

protected void browseButtonActionPerformed(ActionEvent e) 
{


    JFileChooser fc = new JFileChooser(basePath);
    fc.setFileFilter(new JPEGImageFileFilter());
    int res = fc.showOpenDialog(null);
    // We have an image!
    try {
        if (res == JFileChooser.APPROVE_OPTION) {
            File file = fc.getSelectedFile();
            imglabel.setIcon(null);
           setTarget(file);
        } // Oops!
        else {
            JOptionPane.showMessageDialog(null,
                    "You must select one image to be the reference.", "Aborting...",
                    JOptionPane.WARNING_MESSAGE);
        }
    } catch (Exception iOException) {
    }

}

public BufferedImage rescale(BufferedImage originalImage)
{
    BufferedImage resizedImage = new BufferedImage(baseSize, baseSize, BufferedImage.TYPE_INT_RGB);
    Graphics2D g = resizedImage.createGraphics();
    g.drawImage(originalImage, 0, 0, baseSize, baseSize, null);
    g.dispose();
    return resizedImage;
}
public void setTarget(File reference)
{

    try {
        targetFile = reference;
        targetImg = rescale(ImageIO.read(reference));
    } catch (IOException ex) {
       // Logger.getLogger(MainAppFrame.class.getName()).log(Level.SEVERE, null, ex);
    }

    panel_1.setLayout(new BorderLayout(0, 0));

    icon=new ImageIcon(targetImg);
    imglabel=new JLabel(icon);
    panel_1.add(imglabel); 

    frame.setVisible(true);
}
public static void main(String[] args) {
    SwingUtilities.invokeLater(new Runnable() {

        @Override
        public void run() {
            // TODO Auto-generated method stub

            new MyFileChooser();

        }
    });
}

}

JPEGImageFileFilter class , you can keep this class in same pakage

import java.io.File;

import javax.swing.filechooser.FileFilter;

public class JPEGImageFileFilter extends FileFilter implements    FileFilter           
{
public boolean accept(File f)
{
  if (f.getName().toLowerCase().endsWith(".jpeg")) return true;
  if (f.getName().toLowerCase().endsWith(".jpg")) return true;
 if(f.isDirectory())return true;
 return false;
}
public String getDescription()
{
  return "JPEG files";
}

}