getting path for image for both ios and android

rsharma — Tue, 19 Jan 2021 12:24:21 GMT

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.app/cameraPictures/IMG_161105336379.JPG

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 }

Re: getting path for image for both ios and android

StephenQuan4 — Wed, 20 Jan 2021 01:51:15 GMT

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.

Re: getting path for image for both ios and android

rsharma — Wed, 20 Jan 2021 11:57:54 GMT

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

topic Re: getting path for image for both ios and android in ArcGIS AppStudio Questions

getting path for image for both ios and android

Re: getting path for image for both ios and android

Re: getting path for image for both ios and android