python - PyQt5 and Django : How to Upload Image using HTTP Request ( Multipart-form )?

Question

currently I am working in a project to create a seller application where the seller can upload the menu picture and some additional information such as the price and the name of the menu. but I stuck at the POST request method because in this time I have to upload an image with some text data instead of only text data.

I am using PyQt5.

This is my API web server. I am using Django Rest Framework to build that.

[

This is the menu model:

class Menu(models.Model):
    image = models.ImageField(upload_to=path_and_rename)
    name = models.CharField(max_length=100)
    price = models.IntegerField()
    category = models.IntegerField()
    availability = models.BooleanField(default=False)
    # booked = models.IntegerField()
    sellerID = models.ForeignKey(Seller, on_delete=models.PROTECT)

This the Menu Serializers:

class MenuSerializer(serializers.ModelSerializer):
    class Meta:
        model = models.Menu
        fields = ('id', 'image', 'name', 'price', 
                  'category','availability', 'sellerID')

This is the menu viewset:

class MenuViewset(viewsets.ModelViewSet):
    queryset = models.Menu.objects.all()
    serializer_class = serializers.MenuSerializer

I have tried to the method in this answer: here

This is my implementation to that method:

def upload(self):
    file1 = QFile("/home/shalahuddin/Desktop/jamu.jpg")
    file1.open(QFile.ReadOnly)
    url = "http://127.0.0.1:8000/api/menu/"

    nama = QByteArray()
    nama.append("ABCD")

    harga = QByteArray()
    harga.append(str(999))

    kategori = QByteArray()
    kategori.append(str(0))

    ada = QByteArray()
    ada.append(str(True))

    idseller = QByteArray()
    idseller.append(str(2))


    data = {"name": nama, "price": harga, "category": kategori, "availability": ada, "sellerID": idseller}
    files = {"image": file1}
    multipart = self.construct_multipart(data, files)
    request_qt = QNetworkRequest(QUrl(url))
    request_qt.setHeader(QtNetwork.QNetworkRequest.ContentTypeHeader,
                         'multipart/form-data; boundary=%s' % multipart.boundary())
    self.manager = QtNetwork.QNetworkAccessManager()
    self.manager.finished.connect(self.handleResponseMenu)
    self.manager.post(request_qt, multipart)

def handleResponseMenu(self, reply):
    er = reply.error()
    data = json.loads(str(reply.readAll(), 'utf-8'))
    file = open("/home/shalahuddin/Desktop/testfile.txt", "w")

    file.write(str(reply))
    if er == QtNetwork.QNetworkReply.NoError:
        bytes_string = reply.readAll()
        data = json.loads(str(bytes_string, 'utf-8'))
        # print(data)
        QMessageBox.information(self, "Menu", "Upload Success!")

    else:
        errorMessage = "Error occured: " + str(er) + "
" + str(reply.errorString())
        QMessageBox.critical(self, "Error Done", errorMessage)

def construct_multipart(self, data, files):
    multiPart = QHttpMultiPart(QHttpMultiPart.FormDataType)
    for key, value in data.items():
        textPart = QtNetwork.QHttpPart()
        textPart.setHeader(QNetworkRequest.ContentDispositionHeader,
                           "form-data; name="%s"" % key)
        textPart.setBody(value)
        multiPart.append(textPart)

    for key, file in files.items():
        imagePart = QtNetwork.QHttpPart()
        # imagePart.setHeader(QNetworkRequest::ContentTypeHeader, ...);
        fileName = QFileInfo(file.fileName()).fileName()
        imagePart.setHeader(QtNetwork.QNetworkRequest.ContentDispositionHeader,
                            "form-data; name="%s"; filename="%s"" % (key, fileName))
        imagePart.setBodyDevice(file)
        multiPart.append(imagePart)
    return multiPart

But I got error 302 Bad Request as the result. The JSON data that I get is:

{
  'image': ['No file was submitted.'], 
  'name': ['Ensure this field has no more than 100 characters.', 
           'Null characters are not allowed.'], 
  'price': ['This field is required.'], 
  'category': ['This field is required.'], 
  'sellerID': ['This field is required.']
}

Therefore, I would like to know where is the problem? I have tried to trace it repeatedly but still, give no answer. This is my first time to using multipart request.

Answer 1

In the following example I show you create the query:

import json
from PyQt5 import QtCore, QtNetwork, QtWidgets

class MenuWidget(QtWidgets.QWidget):
    def __init__(self, parent=None):
        super(MenuWidget, self).__init__(parent)
        self._manager = QtNetwork.QNetworkAccessManager()
        self._manager.finished.connect(self.handleResults)

        self.init_ui()

    def init_ui(self):
        self.filepath_lineedit = QtWidgets.QLineEdit()
        select_button = QtWidgets.QPushButton(
            text="Select File",
            clicked=self.select_file
        )
        self.name_lineedit = QtWidgets.QLineEdit()
        self.price_spinbox = QtWidgets.QSpinBox()
        self.category_spinbox = QtWidgets.QSpinBox()
        self.availability_checkbox = QtWidgets.QCheckBox()
        self.seller_id_spinbox = QtWidgets.QSpinBox()
        self.log_textedit = QtWidgets.QTextBrowser()
        upload_button = QtWidgets.QPushButton(
            text="Upload",
            clicked=self.upload
        )

        hlay = QtWidgets.QHBoxLayout()
        hlay.addWidget(self.filepath_lineedit)
        hlay.addWidget(select_button)
        lay = QtWidgets.QFormLayout(self)
        lay.addRow("Image:", hlay)
        lay.addRow("Name:", self.name_lineedit)
        lay.addRow("Price:", self.price_spinbox)
        lay.addRow("Category:", self.category_spinbox)
        lay.addRow("Availability:", self.availability_checkbox)
        lay.addRow("SellerID:", self.seller_id_spinbox)
        lay.addRow(self.log_textedit)
        lay.addRow(upload_button)

    @QtCore.pyqtSlot()
    def select_file(self):
        filename, _ = QtWidgets.QFileDialog.getOpenFileName(
            self, 
            "Open Image", 
            QtCore.QDir.currentPath(), 
            "Image Files (*.png *.jpg *.bmp)"
        )
        if filename:
            self.filepath_lineedit.setText(filename)

    @QtCore.pyqtSlot()
    def upload(self):   
        data = {
            "name": self.name_lineedit.text(),
            "price": self.price_spinbox.value(),
            "category": self.category_spinbox.value(),
            "availability": self.availability_checkbox.isChecked(),
            "sellerID": self.seller_id_spinbox.value()
        }
        path = self.filepath_lineedit.text()
        files = {"image": path}
        multi_part = self.construct_multipart(data, files)
        if multi_part:
            url = QtCore.QUrl("http://127.0.0.1:8000/api/menu/")
            request = QtNetwork.QNetworkRequest(url)
            reply = self._manager.post(request, multi_part)
            multi_part.setParent(reply)

    @QtCore.pyqtSlot(QtNetwork.QNetworkReply)
    def handleResults(self, reply):
        parsed = json.loads(reply.readAll().data())
        text = json.dumps(parsed, indent=4, sort_keys=True)
        self.log_textedit.setText(text)
        if reply.error() == QtNetwork.QNetworkReply.NoError:
            QtWidgets.QMessageBox.information(self, "Menu", "Upload Success!")
        else:
            errorMessage = "Error occured: {}".format(reply.errorString())
            QMessageBox.critical(self, "Error Done", errorMessage)
        reply.deleteLater()

    def construct_multipart(self, data, files):
        multi_part = QtNetwork.QHttpMultiPart(QtNetwork.QHttpMultiPart.FormDataType)
        for key, value in data.items():
            post_part = QtNetwork.QHttpPart()
            post_part.setHeader(QtNetwork.QNetworkRequest.ContentDispositionHeader, 
                "form-data; name="{}"".format(key))
            post_part.setBody(str(value).encode())
            multi_part.append(post_part)
        for field, filepath in  files.items():
            file = QtCore.QFile(filepath)
            if not file.open(QtCore.QIODevice.ReadOnly):
                break
            post_part = QtNetwork.QHttpPart()
            post_part.setHeader(QtNetwork.QNetworkRequest.ContentDispositionHeader,
                "form-data; name="{}"; filename="{}"".format(field, file.fileName()))
            post_part.setBodyDevice(file)
            file.setParent(multi_part)
            multi_part.append(post_part)
        return  multi_part


if __name__ == '__main__':
    import sys
    app = QtWidgets.QApplication(sys.argv)
    w = MenuWidget()
    w.show()
    sys.exit(app.exec_())