Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Post image to private server



  • Hi,
    I want to post image to my private server through arcgis appstudio using javascript, but it receive corrupt image, This is my code below. Even when i console base64 image and convert it through online base64 to image convertor tool, it gives corrupt image something.. what should i do

    import QtQuick 2.13
    import QtQuick.Layouts 1.13
    import QtQuick.Controls 2.13
    import ArcGIS.AppFramework 1.0
    import Esri.ArcGISRuntime 100.6
    import QtQuick.Dialogs 1.0
    import Qt.labs.settings 1.0
    import QtQuick.Controls.Material 2.1
    import "../../controls" as Controls
    import "../../assets/js/backend.js" as Backend
    
    App {
        id: appdem
        width: 400
        height: 640
    
        ColumnLayout {
            anchors {
                fill: parent
                margins: 10
            }
    
            ImageObject {
                id: imageObject
    
                onUrlChanged: {
                    console.log("url:", url);
                }
    
                onImageChanged: {
                    var buffer_data = imageObject.toArrayBuffer();
                    Backend.demo(buffer_data);
    
                }
            }
            Button {
                text: "Load"
                onClicked: {
                    console.log("API Key::"+settings.api_key);
                    var img_path = "/Desktop/Modern-Office-3-Skype-Backgrounds.jpeg";
                    imageObject.load(img_path);
                }
            }
    
            Image {
                fillMode: Image.PreserveAspectFit
                source: imageObject.url
                horizontalAlignment: Image.AlignHCenter
                verticalAlignment: Image.AlignVCenter
                cache: false
            }
        }
    
    }
    
    

    Backeend file code

    function arrayBufferToBase64( buffer ) {
        var binary = '';
        var bytes = new Uint8Array( buffer );
        var len = bytes.byteLength;
        for (var i = 0; i < len; i++) {
            binary += String.fromCharCode( bytes[ i ] );
        }
        return Qt.btoa( binary );
    }
    
    function demo(img_binary){
        var endpoint = 'insertDamageReport';
       var base64String = arrayBufferToBase64( img_binary );
       console.log(base64String);
        //create HTTP REQUEST Object
       var xmlhttp = new XMLHttpRequest();
        //Opend request
        xmlhttp.open('POST', "https://abc.co.nz/wp-json/hhq/v1/"+endpoint, false);
        ///Set header data
        xmlhttp.setRequestHeader("Content-Type","application/json");
        xmlhttp.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    xmlhttp.setRequestHeader("AuthenticationInfo",JSON.stringify({"_key":"","_secret":"","device_id":"","access_token":""}) );
        //Set request to server
        var data = {"booking_id":1,"report_content":"test","images":base64String};
        let params = (typeof data != 'undefined')?JSON.stringify(data):''
        xmlhttp.send(params);
        ///Handle Response
        if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
            console.log(xmlhttp.responseText)
        }else if(xmlhttp.readyState === 4){
            console.log(xmlhttp.responseText);
        }
    }
    

Log in to reply