Skip to content

[PyQt5] Drag the picture onto the QLabel component and display the picture

Last Updated on 2021-05-19 by Clay

When we are developing the front-end interface, if we want to display a picture on the interface, in addition to open the directory for user to choose file, I think drag a picture to the QLabel component and display is a great way.

To implement this function in PyQt5, you must complete the following three steps:

  1. Allow dragging of the component that display the picture (QLabel): setAcceptDrops(True)
  2. Rewrite dragEnterEvent() method: acceptProposedAction() receive drag
  3. Rewrite dropEvent() method: set drag event

I learned this dragging method on the following website: http://zetcode.com/gui/pyqt5/dragdrop/

If you are interested in learning PyQt5, maybe you can refer to: PyQt5 Tutorial.

Rewrite QLabel

If we talk about how to display picture in PyQt5, of course it is the QLabel component.

# -*- coding: utf-8 -*-
import re
from PyQt5.QtWidgets import *
from PyQt5.QtGui import *


class dLabel(QLabel):
    def __init__(self, widget):
        super(dLabel, self).__init__(widget)
        self.setAcceptDrops(True)

    def dragEnterEvent(self, event):
        file_name = event.mimeData().text()
        if file_name.split('.')[-1] in ['png', 'jpg', 'jpeg']:
            event.acceptProposedAction()
        else:
            event.ignore()

    def dropEvent(self, event):
        file_path = event.mimeData().text()
        file_path = re.sub('file:///', '', file_path)
        self.setPixmap(QPixmap(file_path))
        self.setScaledContents(True)



First, use setAcceptDrops(True) to enable drop function.

def __init__(self, widget):
    super(dLabel, self).__init__(widget)
    self.setAcceptDrops(True)



Then rewrite dragEnterEvent() method.

def dragEnterEvent(self, event):
    file_name = event.mimeData().text()
    if file_name.split('.')[-1] in ['png', 'jpg', 'jpeg']:
        event.acceptProposedAction()
    else:
        event.ignore()




I have mad a restriction in here. Only formats with extensions such as png, jpg and jpeg can be accepted, and other files will be ignore.

And then we rewrite dropEvent() method.

def dropEvent(self, event):
    file_path = event.mimeData().text()
    file_path = re.sub('file:///', '', file_path)
    self.setPixmap(QPixmap(file_path))
    self.setScaledContents(True)



I deleted the "file:///" in the original file path, because this is an unnecessary part when reading the picture. After deleting it, it is the absolution path of the picture.

Now, we have a new method named dLabel() and it can drag a picture onto it and display the picture.

Test our program

We rewrite the method in dropLabel.py file, so don't forget to import dLabel().

# -*- coding: utf-8 -*-
import sys
from PyQt5.QtWidgets import *
from dropLabel import dLabel


class MainWindow(QWidget):
    def __init__(self):
        super(MainWindow, self).__init__()
        self.resize(800, 600)
        self.setWindowTitle('Drop Event Test')

        self.label = dLabel(self)
        self.label.setGeometry(200, 150, 400, 300)
        self.label.setStyleSheet('background-color: rgb(255, 255, 255);')


if __name__ == '__main__':
    app = QApplication([])
    window = MainWindow()
    window.show()
    sys.exit(app.exec_())



Output:



Now we drag a .png file on it. (Use my self portrait)

Congratulations! We succeeded.

Tags:

Leave a Reply