getting path for image for both ios and android

1009
2
Jump to solution
01-19-2021 04:24 AM
rsharma
Occasional Contributor III

HI 

i have developed a capture image and select  from folder concept from quick report sample. now it is working fine on laptop of window and mac, it is also working fine on android phone. but when i try to select or click a pic from camera and show in grid, it do not show anything in grid.

I have checked and clicked on grid , the image return path on click on iPhone, i consoled it, but do not show image, this is the path below it returns when click on grid. 

file:///private/var/containers/Bundle/Application/57108B35-B6D1-487F-9808-BE14A4CB389E/AppStudioApp....

please find my code below and help:

 

 

import QtQuick 2.7
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.1
import "../../controls" as Controls
import ArcGIS.AppFramework.Multimedia 1.0
import ArcGIS.AppFramework 1.0
import "../../assets/js/backend.js" as Backend
import Qt.labs.folderlistmodel 2.1


Page{
    id: camera_submit
    property var image_array:[]
    property url clipBoardUrl: ""
    property int captureResolution: 1024
    property alias appModel:fileListModel
    property int maximumAttachments: app.info.propertyValue("maximumAttachments", 15)
    property real scaleFactor: AppFramework.displayScaleFactor
    property bool photoReady: false

    background:Rectangle {
                id: iconRect
                color: "#333333"
                 width:parent.width
}
    ScrollView {
            id: frame
            clip: true
            anchors.fill: parent

            ColumnLayout {
                        width: frame.width
                        spacing: 12
                        clip: true
                        Image {
                               id: backgroundImage
                               source: "../../assets/images/imgNew.png"
                               width: parent.width
                               height: 180
                               Layout.alignment: Qt.AlignHCenter

                               Rectangle {
                                   id: rectangle
                                   width: parent.width
                                   height: 180
                                   color: "#333333"
                                   opacity: 0.5
                                   border.width: 0
                               }
                               Image {
                                   id: logo_img
                                   anchors.centerIn: parent
                                   width: 35
                                   height: 35
                                   source: "../../assets/images/Group 1156@2x.png"
                                   fillMode: Image.PreserveAspectFit
                                   MouseArea {
                                       id: mouseArea1
                                       width: 36
                                       height: 35
                                       onClicked: {
                                           popup1.open()
                                           //cameraDialog.captureMode = CameraDialog.CameraCaptureModeStillImage;
                                          // cameraDialog.open();
                                       }
                                   }
                               }
                           }



                GridView {
                    id:grid
                    width: parent.width
                    height: parent.height*3
                    focus: true
                    visible: appModel.count>0
                    model: visualListModel
                    cellWidth: parent.width/3
                    cellHeight: cellWidth*0.8

                    delegate: Item {
                        width: grid.cellWidth
                        height: grid.cellHeight
                        Rectangle {
                            id:brder
                            anchors.centerIn: parent
                            width: parent.width-16*scaleFactor
                            height: parent.height-16*scaleFactor
                            color: "transparent"
                            radius: 3*scaleFactor
                            border.color: "#80cccccc"
                            border.width: 1*scaleFactor
                            Image {
                                id: myIcon
                                source: type == "attachment"? path : ""
                                width: parent.width-2
                                height: parent.height-2
                                fillMode: Image.PreserveAspectCrop
                                anchors.centerIn: parent
                                autoTransform: true
                                visible: source>""
                                cache: false
                                sourceSize.width: width
                                sourceSize.height: height
                                MouseArea {
                                    anchors.fill: parent
                                    onClicked: {
                                        console.log("type==> "+type);
                                        console.log("Path====>"+path);
                                         if(brder.border.width!==2){
                                             brder.border.color="green";
                                             brder.border.width=2;
                                             app.damage_report_image.push(path);
                                         }
                                         else{
                                             myIcon.width=parent.width
                                             myIcon.height=parent.height
                                             brder.border.color="#80cccccc";
                                             brder.border.width=1;
                                             app.damage_report_image.pop(path);
                                         }
                                           //pop_text.text=path;
                                            //popup2.open();
                                   }
                               }
                            }

                        }

                    }
                }

             }
        }

    Controls.Kbutton{
        id:arrow_btn
       //anchors.centerIn: parent
      anchors.bottom: parent.bottom
      anchors.margins: 60
      onClicked: {
         if(app.damage_report_image.length>0){
            stackView.push("../booking/Booking_submit_report.qml")
          }else{
              popup.popMessage = "Please add and select atleast one image."
              popup.open()
          }
      }
       anchors.horizontalCenter: parent.horizontalCenter
        Image {
            id: img22
            height:25
            width:25
            source: "../../assets/images/rightarrow.png"
            fillMode: Image.PreserveAspectFit
            anchors.centerIn: parent
        }
        baseColor: "#ff7919"
        borderColor: "#ff7919"

    }
    FileFolder{
        id: mypicturesFolder
        //path: settings.app_root_path+ "/cameraPictures"
        path: "cameraPictures"
        Component.onCompleted: {
            makeFolder();
        }
    }
    CameraDialog {
        id: cameraDialog

        onAccepted: {
            if (captureMode === CameraDialog.CameraCaptureModeStillImage) {
                if(!mypicturesFolder.exists)
                    mypicturesFolder.makeFolder();
                var fileInfo = AppFramework.fileInfo(fileUrl);
                var picfolder = fileInfo.folder
                var iscopied = picfolder.copyFile(fileInfo.fileName,mypicturesFolder.path + "/"+ fileInfo.fileName)
                picfolder.removeFile(fileUrl)
                var  picFileInfo = picfolder.fileInfo(fileInfo.fileName)
                settings.selectedImageFilePath = picFileInfo.filePath
                var picturepath = ""
                if(Qt.platform.os === "windows")
                    picturepath = "file:///" + mypicturesFolder.path + "/"+ fileInfo.fileName
                else
                    picturepath = "file://" + mypicturesFolder.path + "/"+ fileInfo.fileName

                appModel.append(
                            {path: picturepath, type: "attachment"}
                            )
                visualListModel.initVisualListModel();
            }

        }

        onRejected: {
            console.log("rejected ", error)
            switch(error)
            {
            case CameraDialog.CameraErrorNo:
                console.log("**No Error")
                break;
            case cameraDialog.CameraErrorCameraPermissionNotGranted:
                console.log("**Camera Permission Not Granted")
                break;
            case CameraDialog.CameraErrorMicrophonePermissionNotGranted:
                console.log("**Microphone Permission Not Granted")
                break;
            case CameraDialog.CameraErrorStoragePermissionNotGranted:
                console.log("**Storage Permission Not Granted")
                break;
            }
        }
    }
    ImageObject{
        id: imageObject
    }
    ListModel{
        id: fileListModel
    }
    ListModel{
        id: visualListModel


        Component.onCompleted: {
            visualListModel.initVisualListModel();
        }

        function initVisualListModel(){
            var temp;
            visualListModel.clear()
            var hasTag;
            var countAttachment = 0;
            for(var i=0;i<maximumAttachments;i++){
                if(i<appModel.count){
                    temp = appModel.get(i);
                    var tempPath = temp.path;
                    console.log("tempPath===>"+tempPath);
                    var tempType = temp.type;
                    visualListModel.append({path: tempPath, type: tempType});
                    countAttachment++;
                }else{
                    visualListModel.append({path: "", type:"placehold"})
                }
            }
        }

    }
    Keys.onBackPressed: {
          //timer.pressBack()
          stackView.pop();
    }
    footer: Controls.Kfooter {
         id:footer
         path: '1'
     }

    Component.onCompleted: {
        if(settings.login === ''){
           stackView.push("../Login.qml");
        }
    }
    //Popup to show messages or warnings on the bottom postion of the screen
    Popup {
        id: popup
        property alias popMessage: message.text
        background: Rectangle {
            implicitWidth: camera_submit.width
            implicitHeight: 60
        }
        //y: (loginPage.height - 60)
        x: Math.round((camera_submit.width - width) / 2)
        y: Math.round((camera_submit.height - height) / 2)
        modal: true
        focus: true
        closePolicy: Popup.CloseOnPressOutside
        Text {
            id: message
            width: parent.width
            wrapMode: Text.WordWrap
            anchors.centerIn: parent
            font.pointSize: 7
        }
        onOpened: popupClose.start()
    }
    // Popup will be closed automatically in 2 seconds after its opened
    Timer {
        id: popupClose
        interval: 2000
        onTriggered: function(){
            popup.close();
        }
    }
    Popup {
        visible: false
        id: popup1
        background: Rectangle {
            implicitWidth: backgroundImage.width
            implicitHeight: backgroundImage.height
            color: "#00000000"
        }
        modal: true
        focus: true
        Row{
            Layout.alignment: Qt.AlignHCenter
            topPadding: 100
            leftPadding: 100
             spacing: 70
        Row{
            topPadding: 5
          Image {
            width: 40
            height: 35
            id: camera_icon1
            source:"../../assets/images/Group 1156@2x.png"
            MouseArea{
                anchors.fill: parent
                onClicked: {
                    //console.log("submit report camera working fine");
                    cameraDialog.captureMode = CameraDialog.CameraCaptureModeStillImage;
                    cameraDialog.open();
                    popup1.close();

                }

            }
        }
        }
        Image {
            width: 50
            height: 50
            id: folder_icon
            source:"../../assets/images/fld.png"
            opacity: 0.6
            MouseArea{
                anchors.fill: parent
                onClicked: {
                        pictureChooser.open();
                        popup1.close();
                }
            }
        }
        }
        Row{
            Layout.alignment: Qt.AlignHCenter
             spacing: 30
             topPadding: 145
             leftPadding: 90
            Text {
                id: camera
                text: qsTr("Camera")
                color: "#ffffff"
                leftPadding: 8
            }
            Text {
                id: folder
                text: qsTr("Album")
                color: "#ffffff"
                leftPadding: 42

            }
        }
    }

    Controls.PictureChooser {
        id: pictureChooser
        outputFolder: mypicturesFolder

        copyToOutputFolder: true

        onAccepted: {
            photoReady = true;

            //------ RESIZE IMAGE -----
            var path = AppFramework.resolvedPath(settings.selectedImageFilePath)
            //resizeImage(path)
            //------ RESIZE IMAGE -----

            var filePath = "file:///" + path
            filePath = filePath.replace("////","///");

            appModel.append(
                        {path: filePath, type: "attachment"}
                        )

            settings.selectedImageFilePath = filePath;

            visualListModel.initVisualListModel();
        }
    }
    Popup  {
                 visible: false
                 id: popup2
                  x: Math.round((camera_submit.width - width) / 2)
                  y: Math.round((camera_submit.height - height) / 4)
                 background: Rectangle {
                     implicitWidth: 300
                     implicitHeight: 300
                     color: "#ffffff"
                     Row{
                         topPadding: 10
                         leftPadding: 10
                     Text {
                         id:pop_text
                      //   text:path
                         wrapMode: Text.Wrap
                         width: 280
                         color: "#333333"
                         font.pixelSize: 16
                         font.family: 'Roboto'
                     }
                     }
                     Row{
                         spacing: 70
                         Layout.topMargin:40
                         topPadding: 100
                         leftPadding: 100
                         Controls.Kbutton {
                             text: qsTr("Ok")
                             font.weight: Font.Bold
                             Layout.alignment: Qt.AlignHCenter
                             width: 70
                             height: 45
                             borderColor: "#ff7919"
                             font.pixelSize: 14
                             baseColor: "#ff7919"
                             textColor: "#ffffff"
                             radius: 2
                             onClicked:
                             {
                                 popup.close();
                             }
                          }
                     }
                 }
                 modal: true
                 focus: true
             }
}

 

 

this is my another code of picture chooser:

 

/* Copyright 2020 Esri
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */

//------------------------------------------------------------------------------

import QtQuick 2.7
import QtQuick.Controls 2.2
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.1

import ArcGIS.AppFramework 1.0

Item {
    id: pictureChooser

    property string title: qsTr("Pictures")
    property FileFolder outputFolder
    //property alias outputFolder: outputFolder
    property bool copyToOutputFolder: true
    property bool useFileDialog: Qt.platform.os != "ios"

    property url pictureUrl

    signal accepted()
    signal rejected()

    //--------------------------------------------------------------------------

    QtObject {
        id: internal

        property var uiComponent
    }


    //--------------------------------------------------------------------------

    Component {
        id: fileDialogComponent


        FileDialog {
            id: fileDialog
            title: pictureChooser.title
            folder: Qt.platform.os == "ios"
                    ? "file:assets-library://":shortcuts.pictures
            nameFilters: ["Image files (*.jpg *.png *.gif *.jpeg *.tif *.tiff)"]
            onAccepted: {
                // console.log("You chose: " + fileDialog.fileUrl)
                if(fileDialog.fileUrl)
                {
                    pictureUrl = fileDialog.fileUrl
                    var didload = imageObject.load(pictureUrl)
                    if(didload)
                    {
                        pictureChooser.accepted()
                        var fileInfo = AppFramework.fileInfo(fileDialog.fileUrl);
                    }
                }
            }
            onRejected: {
                pictureChooser.rejected();
            }

        }


    }

    //--------------------------------------------------------------------------

    Component {
        id: pictureChooserComponent

        Rectangle {
            property string picturesPath: AppFramework.standardPaths.standardLocations(StandardPaths.PicturesLocation)[0]
            property var picturesModel

            anchors.fill: parent
            color: palette.window

            Component.onCompleted: {
                refreshPictures();
            }

            SystemPalette {
                id: palette

                colorGroup: SystemPalette.Active
            }

            ColumnLayout {
                anchors.fill: parent

                Rectangle {
                    Layout.fillWidth: true
                    Layout.preferredHeight: titleRow.height + 2 * AppFramework.displayScaleFactor

                    color: "darkgrey"

                    RowLayout
                    {
                        id: titleRow

                        anchors {
                            topMargin: 2 * AppFramework.displayScaleFactor
                            left: parent.left
                            right: parent.right
                        }

                        Button {
                            Layout.alignment: Qt.AlignLeft

                            text: qsTr("<")

                            onClicked: {
                                pictureChooser.rejected();
                                close();
                            }
                        }

                        Text {
                            Layout.alignment: Qt.AlignHCenter

                            text: pictureChooser.title
                            color: "white"
                            font {
                                pointSize: 24
                            }
                        }

                    }
                }

                Text {
                    text: testJSON //picturesPath
                    visible: false
                }

                GridView {
                    id: picturesGridView

                    Layout.fillWidth: true
                    Layout.fillHeight: true

                    model: picturesModel
                    clip: true

                    cellWidth: 200 * AppFramework.displayScaleFactor
                    cellHeight: 115 * AppFramework.displayScaleFactor

                    delegate: pictureDelegate
                }
            }

            FileFolder {
                id: picturesFolder

                path: picturesPath
            }

            Component {
                id: pictureDelegate

                Item {
                    width: picturesGridView.cellWidth
                    height: picturesGridView.cellHeight

                    Rectangle {
                        anchors {
                            fill: parent
                            margins: 5 * AppFramework.displayScaleFactor
                        }

                        color: "lightgrey"

                        border {
                            color: "black"
                            width: 1
                        }

                        Image {
                            anchors {
                                fill: parent
                                margins: 1
                            }

                            fillMode: Image.PreserveAspectFit
                            source: picturesFolder.fileUrl(modelData)

                            Text {
                                anchors {
                                    left: parent.left
                                    right: parent.right
                                    bottom: parent.bottom
                                }

                                wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                                text: modelData
                                horizontalAlignment: Text.AlignHCenter
                                style: Text.Raised
                                styleColor: "black"
                                color: "white"
                            }
                        }

                        MouseArea {
                            anchors.fill: parent

                            onClicked: {
                                pictureChooser.pictureUrl = picturesFolder.fileUrl(modelData);
                                pictureChooser.accepted();
                                close();
                            }
                        }
                    }
                }
            }

            function open() {
                visible = true;
            }

            function close() {
                visible = false;
            }

            function refreshPictures() {
                picturesModel = picturesFolder.fileNames("*.jpg");

                //console.log(JSON.stringify(picturesModel));
            }
        }
    }

    //--------------------------------------------------------------------------

    ImageObject{
        id: imageObject
    }

    onAccepted: {
        internal.uiComponent = null;
        var pictureUrlInfo = AppFramework.urlInfo(pictureUrl);
        var picturePath = pictureUrlInfo.localFile;
        var assetInfo = AppFramework.urlInfo(picturePath);
        var outputFileName;
        var suffix=""
        if(pictureUrlInfo.fileName)
            suffix = pictureUrlInfo.fileName.split('.')[1]
        if(!suffix)
            suffix="jpg"

        if (assetInfo.scheme === "assets-library") {
            pictureUrl = assetInfo.url;
            outputFileName = assetInfo.queryParameters.id + "." + assetInfo.queryParameters.ext;
        } else {
            outputFileName = AppFramework.createUuidString(2) + "." + suffix
            //console.log("outputFileName", outputFileName);
        }

        photoReady = true;

        if (copyToOutputFolder) {
            var outputFileInfo = outputFolder.fileInfo(outputFileName);

            //workaround for HEIC file format to be converted to jpg
            if (outputFileName.match(/\.hei(c|f)$/i)) {
                imageObject.load(picturePath);

                outputFileName = outputFileName.replace(/\.[a-z]*$/i, ".jpg");
                outputFileInfo = outputFolder.fileInfo(outputFileName);

                outputFolder.removeFile(outputFileName);

                if (!imageObject.save(outputFileInfo.filePath)) {
                    console.error("Unable to save image:", outputFileInfo.filePath);
                    return;
                }
                picturePath = outputFolder.filePath(outputFileName);
            } else {
                //imageObject.load(pictureUrl)
                outputFolder.removeFile(outputFileName);
                var issaved = imageObject.save(outputFileInfo.filePath)
                //outputFolder.copyFile(picturePath, outputFileInfo.filePath);
            }

            picturePath = outputFolder.filePath(outputFileName);
        }

        console.log(pictureUrlInfo, picturePath, assetInfo, outputFileName)

        settings.selectedImageFilePath = picturePath;
    }

    onRejected: {
        internal.uiComponent = null;
    }

    //--------------------------------------------------------------------------

    function open() {
        console.log("FileDialog", useFileDialog)
        //        if (useFileDialog) {
        //            internal.uiComponent = fileDialogComponent.createObject(pictureChooser.parent);
        //        } else {
        //            internal.uiComponent = pictureChooserComponent.createObject(pictureChooser.parent);
        //        }
        internal.uiComponent = fileDialogComponent.createObject(pictureChooser.parent);
        internal.uiComponent.open();
    }

    //--------------------------------------------------------------------------

    function close() {
        if (internal.uiComponent) {
            internal.uiComponent.close();
            internal.uiComponent = null;
        }
    }

    //--------------------------------------------------------------------------

    property var testJSON
}

 

 

0 Kudos
1 Solution

Accepted Solutions
StephenQuan4
New Contributor II

You should change:

    path: "cameraPictures"

with:

    path: "~/cameraPictures"

This one change will do the following:

 1. Change path to an absolute reference
 2. Use AppStudio inbuilt shortcut for implicitly referencing AppFramework.userHomePath
 3. The path is guaranteed to be a directly that's accessible / writable cross platform (because that's how we define userHomePath)

So, in short, "~" is your friend here.

View solution in original post

2 Replies
StephenQuan4
New Contributor II

You should change:

    path: "cameraPictures"

with:

    path: "~/cameraPictures"

This one change will do the following:

 1. Change path to an absolute reference
 2. Use AppStudio inbuilt shortcut for implicitly referencing AppFramework.userHomePath
 3. The path is guaranteed to be a directly that's accessible / writable cross platform (because that's how we define userHomePath)

So, in short, "~" is your friend here.

rsharma
Occasional Contributor III

hi @StephenQuan4 

it worked when we click picture from camera, but  how to display image when we select from picturechooser on old iphone.

actually everything working fine on new iphone, but an older iphone do not work for picture chooser

0 Kudos