How to display an image that a user has selected on the JFrame using JavaSwing

Question

I am trying to add a "profile picture" to a user's profile page. Basically, I have it to where they can select a file from their computer and upload it to the application, and it will display their profile picture. However it is not working, I think that it currently cannot display it, but generates it incorrectly.

Here is my code

import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.io.File;
import java.io.ObjectInputStream;
import java.io.IOException;
import java.net.ServerSocket;
import java.net.Socket;
import javax.swing.JFileChooser;
import java.nio.file.Path;
import java.nio.file.Paths;
import java.awt.image.BufferedImage;
import javax.imageio.ImageIO;

class createProfilePage extends JFrame implements ActionListener {
    Container container = getContentPane();

    JLabel name = new JLabel("Name: ");
    JTextField nameField = new JTextField();

    JLabel age = new JLabel("Age: ");
    JTextField ageField = new JTextField();

    JLabel interest = new JLabel("Interests: ");
    JTextField interestField = new JTextField();

    JLabel aboutMe = new JLabel("About me: ");
    JTextField aboutMeField = new JTextField();

    JLabel phoneNum = new JLabel("Phone Number: ");
    JTextField phoneNumberField = new JTextField();

    JButton submit = new JButton("Save Profile");
    JButton deleteProfile = new JButton("Delete Profile");

    JButton uploadPic = new JButton("Upload Profile Picture");

    createProfilePage()
    {
        setDefaultCloseOperation(javax.swing.WindowConstants.DISPOSE_ON_CLOSE);
        //setting container
        setLayoutManager();
        setLocationAndSize();
        addComponents();
        addActionEvent();

        setTitle("Welcome");
        setSize(600, 500);
    }
    public void setLayoutManager() {
        container.setLayout(null);
    }
    public void setLocationAndSize()
    {
        //Setting location and Size of each components using setBounds() method.
        name.setBounds(50,100,100,30);
        age.setBounds(50,170,100,30);
        phoneNum.setBounds(50,240,100,30);
        interest.setBounds(50,310,100,30);
        aboutMe.setBounds(50,380,100,30);

        submit.setBounds(350, 240, 150, 30);
        deleteProfile.setBounds(350,310,150,30);
        uploadPic.setBounds(350,380,150,30);

        nameField.setBounds(150,100,150,30);
        ageField.setBounds(150,170,150,30);
        phoneNumberField.setBounds(150,240,150,30);
        interestField.setBounds(150,310,150,30);
        aboutMeField.setBounds(150,380,150,30);
    }
    public void addComponents() {
        container.add(name);
        container.add(age);
        container.add(phoneNum);
        container.add(interest);
        container.add(aboutMe);
        container.add(nameField);
        container.add(ageField);
        container.add(phoneNumberField);
        container.add(interestField);
        container.add(aboutMeField);
        container.add(submit);
        container.add(deleteProfile);
        container.add(uploadPic);
    }
    public void addActionEvent() {
        submit.addActionListener(this);
        deleteProfile.addActionListener(this);
        uploadPic.addActionListener(this);
    }

    @Override
    public void actionPerformed(ActionEvent e) {
        if (e.getSource() == submit) {
            String name = nameField.getText();
            String age = ageField.getText();
            String phoneNum = phoneNumberField.getText();
            String interest = interestField.getText();
            String aboutMe = aboutMeField.getText();
            try {
                Socket socket = new Socket("localhost", 4242);
                ObjectInputStream reader = new ObjectInputStream(socket.getInputStream());
                //creating user object to send to the server
                User user = new User();
            } catch (IOException b) {
                b.printStackTrace();
            }



            JOptionPane.showMessageDialog(this, "Profile Creation Successful");
        } else if (e.getSource() == deleteProfile) {
            String name = null;
            String age = null;
            String phoneNum = null;
            String interest = null;
            String aboutMe = null;

            JOptionPane.showMessageDialog(this, "Profile Deletion Successful");
        } else if (e.getSource() == uploadPic) {
            JFileChooser fileChooser = new JFileChooser();
            fileChooser.setCurrentDirectory(new File(System.getProperty("user.home")));
            int result = fileChooser.showOpenDialog(getParent());
            if (result == JFileChooser.APPROVE_OPTION) {
                try {
                    File file = fileChooser.getSelectedFile();
                    //ImageDrawer drawer = new ImageDrawer();
                    Toolkit toolkit = Toolkit.getDefaultToolkit();
                    String stringFile = file.toString();
                    Image image = toolkit.getImage(stringFile);
                    Path path = Paths.get(stringFile);
                    Path imagePath = path.toAbsolutePath();
                    String newStr = imagePath.toString();
                    BufferedImage picture = ImageIO.read(new File(newStr));

                    JLabel picLabel = new JLabel(new ImageIcon(picture));
                    picLabel.setBounds(350, 170, 150, 30);
                    add(picLabel);
                } catch (IOException g) {
                    JOptionPane.showMessageDialog(null,"ERROR");
                }
            }
        }
    }
}

Answer 1

Well it 'works' now. This code can open and display an image the user selects. The layout is still broken(1), as hinted by Upload Profile Pict... . That guessed width and cut off text on this computer is one of the many reasons to use layout managers, padding & borders to position elements in a GUI.

import java.awt.*;
import java.awt.event.*;
import java.awt.image.BufferedImage;
import java.io.*;
import javax.imageio.ImageIO;
import javax.swing.*;

final class createProfilePage extends JFrame implements ActionListener {

    Container container = getContentPane();

    JLabel name = new JLabel("Name: ");
    JTextField nameField = new JTextField();
    JLabel age = new JLabel("Age: ");
    JTextField ageField = new JTextField();
    JLabel interest = new JLabel("Interests: ");
    JTextField interestField = new JTextField();
    JLabel aboutMe = new JLabel("About me: ");
    JTextField aboutMeField = new JTextField();
    JLabel phoneNum = new JLabel("Phone Number: ");
    JTextField phoneNumberField = new JTextField();
    JLabel picLabel = new JLabel();

    JButton submit = new JButton("Save Profile");
    JButton deleteProfile = new JButton("Delete Profile");
    JButton uploadPic = new JButton("Upload Profile Picture");

    createProfilePage() {
        setDefaultCloseOperation(javax.swing.WindowConstants.DISPOSE_ON_CLOSE);
        //setting container
        setLayoutManager();
        setLocationAndSize();
        addComponents();
        addActionEvent();

        setTitle("Welcome");
        setSize(600, 500);
    }

    public void setLayoutManager() {
        container.setLayout(null);
    }

    public void setLocationAndSize() {
        //Setting location and Size of each components using setBounds() method.
        name.setBounds(50, 100, 100, 30);
        age.setBounds(50, 170, 100, 30);
        phoneNum.setBounds(50, 240, 100, 30);
        interest.setBounds(50, 310, 100, 30);
        aboutMe.setBounds(50, 380, 100, 30);

        submit.setBounds(350, 240, 150, 30);
        deleteProfile.setBounds(350, 310, 150, 30);
        uploadPic.setBounds(350, 380, 150, 30);

        nameField.setBounds(150, 100, 150, 30);
        ageField.setBounds(150, 170, 150, 30);
        phoneNumberField.setBounds(150, 240, 150, 30);
        interestField.setBounds(150, 310, 150, 30);
        aboutMeField.setBounds(150, 380, 150, 30);
        picLabel.setBounds(350, 50, 150, 150);
    }

    public void addComponents() {
        container.add(name);
        container.add(age);
        container.add(phoneNum);
        container.add(interest);
        container.add(aboutMe);
        container.add(nameField);
        container.add(ageField);
        container.add(phoneNumberField);
        container.add(interestField);
        container.add(aboutMeField);
        container.add(picLabel);
        container.add(submit);
        container.add(deleteProfile);
        container.add(uploadPic);
    }

    public void addActionEvent() {
        submit.addActionListener(this);
        deleteProfile.addActionListener(this);
        uploadPic.addActionListener(this);
    }

    @Override
    public void actionPerformed(ActionEvent e) {
        if (e.getSource() == uploadPic) {
            JFileChooser fileChooser = new JFileChooser();
            fileChooser.setCurrentDirectory(new File(System.getProperty("user.home")));
            int result = fileChooser.showOpenDialog(getParent());
            if (result == JFileChooser.APPROVE_OPTION) {
                try {
                    File file = fileChooser.getSelectedFile();
                    BufferedImage picture = ImageIO.read(file);

                    picLabel.setIcon(new ImageIcon(picture));
                    add(picLabel);
                } catch (IOException ioe) {
                    ioe.printStackTrace();
                    JOptionPane.showMessageDialog(null, "ERROR");
                }
            }
        }
    }

    public static void main(String[] args) {
        Runnable r = () -> {
            new createProfilePage().setVisible(true);
        };
        SwingUtilities.invokeLater(r);
    }
}

1. Personally, I'd take a different approach to the look of this. A toolbar at top for all the buttons. the two columns of labels and fields on the left as seen there, but with the label text aligned right, and the fields different sizes as per need. Maybe even make the "About me:" a text area, rather than a field. Then, to the right of the label/field combos, the rest of the width and height devoted to the picture label. It would be shown in a scroll pane (unless the pictures are all the same size).