post image to website servr using javascript

[rsharma]

kindly help to post image using httprequst

[LucasDanzinger]

Do you have any more details on the workflow? Are you using AppStudio?

[rsharma]

@LucasDanzinger Yes, i am using arcgis appstudio. i am capturing photos from camera and storing it on mobile local db, after that i want to send it to my website server to be reusable on website.

i am able to store it in my mobile localdb, but could not post it on my website server.

[rsharma]

hi @LucasDanzinger ,

i am now trying like convert an image to buffer then to base64 and then sending it through xmlhttp request, but at server endpoint, the image could not be retrived due to invalid bse64 value.

Code is below:

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 = "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
        } }}

Then the demo fnc js file as below

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 img_data = new Uint8Array(img_binary);
   var base64String = arrayBufferToBase64( img_binary );
    console.log(base64String);
    //create HTTP REQUEST Object
   var xmlhttp = new XMLHttpRequest();
    //Opend request
    xmlhttp.open('POST', "https://abc.com"+endpoint, false);
    ///Set header data
    xmlhttp.setRequestHeader("Content-Type","application/json");
    //xmlhttp.setRequestHeader( 'Content-Type', 'multipart/form-data' );
    xmlhttp.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    xmlhttp.setRequestHeader("AuthenticationInfo",JSON.stringify({"_key":"","_secret":"","device_id":"","access_token":""}) );
    //Set request to server
    var data = {"user_id":60,"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)
        //return JSON.parse(xmlhttp.responseText);
    }else if(xmlhttp.readyState === 4){
        console.log(xmlhttp.responseText);
        //return JSON.parse(xmlhttp.responseText);
    }}

 now the problem is it could not decode the code generated of base 64 not even on online base64 to image converter tool and on my server side php files 

[LucasDanzinger]

From what I understand of your workflow, the ArcGIS Runtime recommended pattern would be to use Feature attachments and Feature Services - these support adding image files alongside a database record, but they require you to publish a feature service in ArcGIS Online or ArcGIS Enterprise. Here is a sample that demonstrates this - https://github.com/Esri/arcgis-runtime-samples-qt/tree/master/ArcGISRuntimeSDKQt_QMLSamples/EditData.... Is this an option for you?

If not, it might be worth posting the question on the Qt forums - https://forum.qt.io/