How do I display an image using javaFX by selecting a file from file explorer

Question

1.I have a code that opens a pane and I can open file explorer, but I do not know how to open said image when I select it from file explorer. Also this code is meant to be used in different @Overrride statements but I have only managed to get this far using one statement. Is there a way for me to call some of these events from another Override statement?

  @Override
    public void start(Stage primaryStage) {
    //Stage
    primaryStage.setTitle("title");
    BorderPane pane = new BorderPane();
    Scene scene = new Scene(pane);


    Button load = new Button("Load");
    load.setOnAction(loadEventListener);

    ImageView myImageView = new ImageView();

    HBox rootBox = new HBox();
    rootBox.getChildren().addAll(load, myImageView);


    //Toolbar
    HBox toolbarArea = new HBox( 10 );
    toolbarArea.setPadding( new Insets( 10 ) );


    primaryStage.setScene(scene);
    primaryStage.show();

    //Puts buttons on bottom bar
    toolbarArea.getChildren().addAll( load );
    pane.setBottom( toolbarArea );
}

EventHandler<ActionEvent> loadEventListener
        = t -> {
            FileChooser fileChooser = new FileChooser();

            //Set extension filter
            FileChooser.ExtensionFilter extFilterJPG = new FileChooser.ExtensionFilter("JPG files (*.jpg)", "*.JPG");
            FileChooser.ExtensionFilter extFilterPNG = new FileChooser.ExtensionFilter("PNG files (*.png)", "*.PNG");
            fileChooser.getExtensionFilters().addAll(extFilterJPG, extFilterPNG);

            //Show open file dialog
            File file = fileChooser.showOpenDialog(null);

            try {
                BufferedImage bufferedImage = ImageIO.read(file);
                Image image = SwingFXUtils.toFXImage(bufferedImage, null);
                ImageView myImageView = new ImageView();
                myImageView.setImage(image);
            } catch (IOException ex) {
                Logger.getLogger(JavaFXPixel.class.getName()).log(Level.SEVERE, null, ex);
            }

        };

Answer 1

Since you already have an ImageView and have shown it in the scene, simply set its image to the image you load.

For this you need to make the ImageView an instance variable:

private ImageView myImageView ;

@Override
public void start(Stage primaryStage) {
    //Stage
    primaryStage.setTitle("title");
    BorderPane pane = new BorderPane();
    Scene scene = new Scene(pane);


    Button load = new Button("Load");
    load.setOnAction(loadEventListener);

    myImageView = new ImageView();

    HBox rootBox = new HBox();
    rootBox.getChildren().addAll(load, myImageView);

    // presumably you intended this somewhere?
    pane.setCenter(rootBox);


    //Toolbar
    HBox toolbarArea = new HBox( 10 );
    toolbarArea.setPadding( new Insets( 10 ) );


    primaryStage.setScene(scene);
    primaryStage.show();

    //Puts buttons on bottom bar
    toolbarArea.getChildren().addAll( load );
    pane.setBottom( toolbarArea );
}

Note there is no need to load a buffered image and then convert it. So all you need in the event handler is

    loadEventListener = t -> {
        FileChooser fileChooser = new FileChooser();

        //Set extension filter
        FileChooser.ExtensionFilter extFilterJPG = new FileChooser.ExtensionFilter("JPG files (*.jpg)", "*.JPG");
        FileChooser.ExtensionFilter extFilterPNG = new FileChooser.ExtensionFilter("PNG files (*.png)", "*.PNG");
        fileChooser.getExtensionFilters().addAll(extFilterJPG, extFilterPNG);

        //Show open file dialog
        File file = fileChooser.showOpenDialog(null);

        if (file != null) {
            Image image = new Image(file.toURI().toString());
            myImageView.setImage(image);
        }

    };