Having trouble accessing ms-appdata:///local directory after capturing a photo

Having an issue with my Cordova application designed for Windows 8.1, I am trying to capture a photo and display it on the screen while also saving it in the local folder.

Within one of my directives, I have the following function:

scope.takePhoto = function () {
    var myScope = scope;
    navigator.camera.getPicture(function (imageURI) {
        console.log('Method getPhoto succeed');
        myScope.addPhoto(imageURI);
    }, getPhotoOnFail, {
        quality: 50,
        destinationType: Camera.DestinationType.FILE_URI
    });
}

scope.addPhoto = function (fileUri) {
    scope.entity.previewCaptured = {fileUri: fileUri, datetime: new Date()};
}

And in the template, there is an image tag:

<img alt="{{entity.previewCaptured.fileUri}}" ng-src="{{entity.previewCaptured.fileUri}}" title="{{entity.previewCaptured.datetime}}">

After using the system camera application to take a photo and accepting it, instead of the photo displaying correctly, the alt attribute shows the same value as the src. This alt value is:

ms-appdata:///local/zdjęcie000.png

I have verified

Windows.Storage.ApplicationData.current.localFolder.path
, which points to
C:\Users\user\AppData\Local\Packages\{app_name}\LocalState
. I confirmed the existence of the file zdjęcie000.png within that path.

Although ms-appdata:/// theoretically works with Windows apps, specifically mentioned in this source for Windows 8, I encountered issues even when attempting to use the absolute path

C:\Users\user\AppData\Local\Packages\{app_name}\LocalState
in the src attribute. Additionally, employing the $timeout function for a delay in displaying the image did not resolve the problem.

Plugins installed include: file, file transfer, Camera, Capture, and file Opener2

Configuration details from my config.xml:

(insert your configuration here)

In an effort to address the issue of displaying external images (<img src="http://xxx">), I manually added the section found at

/res/native/windows/package.windows.appmanifest
:

(insert your app manifest configuration here)

Answer №1

In my investigation, I experimented with adding img elements to the DOM using jQuery and found success! Interestingly enough, there seems to be potential issues with the angularJS ng-src directive.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"By clicking on it, change the href attribute to a new source

I'm currently working on a project that involves swapping thumbnail images to a larger image when the thumbnail is selected. It's functioning as expected, but now I want to allow end users to click on the larger image to display it in jquery.ligh ...

The Angular checkbox is not checking in the view despite having a true value in the scope

After clicking "Cancel" in the modal window, the checkbox is unchecked even though it should remain checked (the scope.enabledLogin value is true after pressing the "Cancel" button and dismissing the modal window). Why is this happening? Jade: .checkbox( ...

Tips on how to implement dropdownlist filtering with angularJs based on the selection from another dropdownlist

There are two dropdown lists in my code: <div class="control-group"> @Html.LabelFor(x => x.ServiceId) @Html.DropDownListFor(x => x.ServiceId, new SelectList(Model.ServiceList, "Id", "Title"), new { @class = "open" }) &l ...

Question from Student: Can a single function be created to manage all text fields, regardless of the number of fields present?

In my SPFX project using React, TypeScript, and Office UI Fabric, I've noticed that I'm creating separate functions for each text field in a form. Is there a way to create a single function that can handle multiple similar fields, but still maint ...

Using the Angular translate filter within a ternary operator

I am currently working on translating my project into a different language. To do this, I have implemented the Angular Translate library and uploaded an external JSON file containing all the translations. Here is an example of how it looks: { "hello_wor ...

What is the best approach for managing routing in express when working with a static website?

Whenever a user navigates to mydomain.com/game, I aim for them to view the content displayed in my public folder. This setup functions perfectly when implementing this code snippet: app.use('/game', express.static('public')) Neverthel ...

Scroll horizontally on a webpage using drag with JavaScript

I have been working on a unique horizontal website design that allows users to scroll horizontally by dragging the screen. I managed to successfully implement the horizontal scrolling feature, but I am facing difficulties in adding the horizontal drag-to-s ...

Using Material-UI and React: Implementing a DatePicker within a Component instead of a Function

Could someone assist me in getting this code to function properly within React components? import React, { Fragment, useState } from "react"; import DateFnsUtils from "@date-io/date-fns"; // choose your lib import { DatePicker, MuiPickersUtilsProvider } f ...

Tips for incorporating child components when creating unit tests in Angular 2

While working on my component, I encountered an issue with the child component during unit testing. An error message is appearing stating that the child component is not defined. Any advice or solutions would be greatly appreciated. Thank you in advance. ...

Can we enhance this JavaScript setup while still embracing the KISS principle (Keep it simple, Stupid)?

I have completed the following tasks: Ensured all event handlers are placed inside jQuery DOM ready to ensure that all events will only run Defined a var selector at the top of events for caching purposes Please refer to the comments below for what I be ...

Preventing Bidirectional Binding in AngularJS: A Step-by-Step Guide

I have a basic script using angular js <script> var delightApp = angular.module('delightmeter', []); delightApp.controller('delightController', function ($scope) { $scope.delightScore = 0; ...

Galleriffic 2.0: Enhancing Animation Queues

I'm currently exploring how to utilize the stop() function in order to halt the animation buildup within Galleriffic. This issue arises when swiftly and repeatedly mousing over the thumbnail images. While I understand that in a basic jQuery script, yo ...

Comma Filtering in Ag-Grid

I am currently working with ag-Grid, and I have encountered an issue when filtering my data. Specifically, when I filter the price column, it only recognizes numbers with dots and not commas. Link: https://plnkr.co/edit/LDdrRbANSalvb4Iwh5mp?p=preview To ...

The ObjectSpaceNormalMap feature is not functioning properly when used in conjunction with MeshNormal

I'm having trouble getting the MeshNormalMaterial to stay aligned with the object instead of the camera. I set .normalMapType = THREE.ObjectSpaceNormalMap, but it doesn't seem to be working as expected. Is there something crucial that I might b ...

What is the best way to retrieve the src value upon clicking on an image in a JavaScript function with multiple images displayed on

I have 3 images on my website. Each time I click on an image, I want to retrieve the source value. I attempted the code below, but it doesn't seem to work with multiple images. <div class="test"> <a href="#" class="part-one" ...

Locate the destination URL in Fancybox

Is there a way to insert a link into the title, using the selected anchor's href but with an added prefix? I need help figuring out how to achieve this. Specifically, I am looking to access this.href on the chosen anchor element. $(".gallery-module & ...

Running two different wdio.config.js files consecutively

Is it possible to run two wdio.config.js files with different configurations, one after another? Here is how the first configuration file is defined in the code: const { join } = require('path'); require('@babel/register') exports.co ...

Issue with Material-UI: Inability to Activate the onChangeCommitted Event while Testing

I am encountering issues while testing the onChangeCommitted event with the slider from Mui. I have set up a basic implementation of the slider in a code sandbox environment. You can view the code in this sandbox. The main problem lies in my inability to ...

Submitting a form in Rails without refreshing the page and dynamically updating the view

Hello everyone! I am currently utilizing Rails and in my process, I would like the user to perform the following steps on the same page: Input their address Completing the form Submit the form Clicking to submit Update the view to display the add ...

The radio button's on click event necessitates a double click

At the heart of my issue are two radio buttons within a form. One triggers a registration form for new users, while the other allows already registered users to sign in. To aid with validation, I've integrated jVal form validation. The problem arises ...