JavaFX Drag and Drop Images

If you deal with files in your JavaFX app, then you need to have drag and drop integration. You’ll be amazed at how easy drag-and-drop is in JavaFX.

The following JavaFX image drag-and-drop example only takes three files. You can just copy them into your JavaFX project, and run them if you’d like.

The resulting application allows you to drag an image file onto your window. As the image file moves over the window, it will change in a OS specific way, indicating that you can drop the file onto the open window. Once you drop the image file on to the window, the image will be displayed in the window.

The three files that you will need for this project are the Main.java file, the image-view.fxml file, and the ImageDropController.java file.

Here is the source for your Main class.

package com.whatisjavafx;
	
import java.net.URL;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;


public class Main extends Application {
	@Override
	public void start(Stage stage) {
	  try {
      URL url = 
          getClass()
          .getResource("image-view.fxml");
      BorderPane root = FXMLLoader.load(url);

      Scene scene = new Scene(root);
      stage.setScene(scene);
      stage
      .setTitle("JavaFX Drop Image");
      stage.show();
    } catch(Exception e) {
      e.printStackTrace();
    }
	}
	
	public static void main(String[] args) {
		launch(args);
	}
}

 

All the Main class does is grab the FXML file to use as a root. If you’ve been through theĀ tutorial entitled, What is JavaFX, you are already familiar with the parts of the Main class generally found in JavaFX.

Here is the source for your FXML file.

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.BorderPane?>


<BorderPane 
xmlns="http://javafx.com/javafx/8.0.65" 
xmlns:fx="http://javafx.com/fxml/1" 
fx:controller="com.whatisjavafx.ImageDropController">
   <center>
      <ImageView 
      fx:id="myImageView" 
      fitHeight="409.0" 
      fitWidth="476.0" 
      onDragDropped="#imageDropped" 
      onDragOver="#imageDragOver" 
      pickOnBounds="true" 
      preserveRatio="true" />
   </center>
</BorderPane>

 

You can create this FXML file using SceneBuilder. All it is, is a BorderPane containing an ImageView. The ImageView implements onDragDropped and onDragOver. You’ll see more about them in the Controller.

Here is the source for your Controller.

package com.whatisjavafx;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.util.List;

import javafx.fxml.FXML;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.input.DragEvent;
import javafx.scene.input.Dragboard;
import javafx.scene.input.TransferMode;

public class ImageDropController {

    @FXML
    private ImageView myImageView;

    @FXML
    void imageDragOver(DragEvent de) {
      Dragboard board = de.getDragboard();
      if (board.hasFiles()) {
        de.acceptTransferModes(TransferMode.ANY);
      }
    }

    @FXML
    void imageDropped(DragEvent de) {
      try {
        Dragboard board = de.getDragboard();
        List<File> phil = board.getFiles();
        FileInputStream fis;
          fis = new FileInputStream(phil.get(0));
        Image image = new Image(fis);
        myImageView.setImage(image);
      } catch (FileNotFoundException e) {
        e.printStackTrace();
      }
    }

    @FXML
    void initialize() {
      // you could initialize 
      // JavaFX Controls here
    }
}

 

The real meat of this example is found in imageDragOver() and in imageDropped(). The method imageDragOver() checks to make sure a file is being dragged onto the ImageView, then says, “Yeah, I’ll take it.”

The imageDropped() method looks for the first of any files dragged onto the ImageView, then converts it to a Image object. That Image object is then used to set the ImageView‘s image. Pretty simple really.

Now compile, run, Ā and start dragging. JavaFX’s fun.

Leave a Reply

Your email address will not be published. Required fields are marked *