The function is not executing within the window.plugins context in the Angular/Ionic platform

Problem: I am facing an issue with storing a picture in base 64 format. The window.plugins.Base64.encodeFile method is not functioning as expected.

I have successfully installed the Cordova Plugin locally and the $cordovaImagePicker is working fine. However, after fetching the image from the phone, it only stores the local image path in $scope.collected.selectedImage instead of converting it to base 64 format.

Any assistance on this matter would be greatly appreciated!

'use strict';

angular.module('copula')
  .controller('ItemsCtrl', function($scope, $state, Auth, Item, $firebaseObject, $cordovaImagePicker, $ionicPlatform) {

    var ref = new Firebase('https://copula.firebaseio.com/users');
    var authData = Auth.$getAuth();
    var itemsObject = $firebaseObject(ref.child(authData.uid + '/items'));

    itemsObject.$loaded().then(function() {
      $scope.items = itemsObject;
    });

    $scope.collection = {
      selectedImage: ''
    };
    $scope.item = {};

    $ionicPlatform.ready(function() {

        $scope.getImageSaveContact = function() {
            // Image picker will load images according to these settings
            var options = {
                maximumImagesCount: 1, // Max number of selected images, I'm using only one for this example
                width: 800,
                height: 800,
                quality: 80            // Higher is better
            };

            $cordovaImagePicker.getPictures(options).then(function (results) {

                $scope.collection.selectedImage = results[0];   // We loading only one image so we can use it like this

                window.plugins.Base64.encodeFile($scope.collection.selectedImage, function(base64){  // Encode URI to Base64 needed for contacts plugin
                    console.log("before encoding");
                    $scope.collection.selectedImage = base64;
                    console.log(base64);
                });
                console.log($scope.collection.selectedImage);

            }, function(error) {
                console.log('Error: ' + JSON.stringify(error));    // In case of error
            });
        };

    });

    $scope.$on('$ionicView.beforeEnter', function (event, viewData) {
      viewData.enableBack = true;
    });

    $scope.submitItem = function() {
      ref.child(authData.uid).child('items').push(Item.pushAttrs($scope.item));
      $scope.item = {};
      $state.go('main.home');
    };

  });

Answer №1

The tutorials for this Plugin consistently demonstrate using the base64 result in a ng-src attribute like so:

<img ng-src="{{collection.selectedImage}}">

This indicates that the plugin returns a path, which is its standard behavior.

console.log('file base64 encoding: ' + base64);

The plugin returns the path of a converted base64 image.

It is important to note that your results[0] path and base64 path should be distinct.

References :

References:

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

The combination of $.post and $J = jQuery.noConflict() does not seem to be functioning correctly

I'm struggling with sending data from JavaScript to PHP using the $.post method, while also having conflicts with WordPress and using $J = jQuery.noConflict(). Here's what I have in my JavaScript: $J = jQuery.noConflict() x=1 $J.post('/the ...

Retrieve all selected rows from the grid while using paging in IgGrid

I am facing a challenge in retrieving all selected rows from an igGrid that utilizes paging. The issue arises when the code provided below only captures the selected rows on the current page of the grid, while neglecting those on other pages. Is there a m ...

Populate Jquery datatables programmatically

After implementing the Jquery Datatables plugin, I initially had hardcoded content in the table. However, I made some modifications to dynamically populate the table with fetched data. While this change worked fine, I encountered issues with the search f ...

Error: Unable to access the 'ht_4year_risk_opt' property because it is null

When attempting to call the servlet that returns JSON data, I encounter an error while parsing the data. var jsonResponse = jQuery.parseJSON(data); var ht_4year_risk_opt = jsonResponse.ht_4year_risk_opt; ...

Tips on providing an input value within a selection option

My issue arises when selecting the "Other" option and entering text values, only 'other' is printed instead of my inputted text value. How can I resolve this? <FormItem {...formItemLayout} label="Relation :" > ...

Tips for quickly rendering over 10,000 items with React and Flux

What is the most efficient way to render a large number of items in React? Imagine creating a checkbox list with over 10,000 dynamically generated checkbox items. I have a store that holds all the items and serves as the state for the checkbox list. Whe ...

Creating unique page styles using global styles in Next.js

I am facing a dilemma in my NextJS app. On the /home page, I need to hide the x and y overflow, while on the /books page, I want the user to be able to scroll freely. The issue is that Next only allows for one global stylesheet and using global CSS selec ...

How to display a page outside the router-outlet in angular 4

I'm currently developing an angular 4 application and I am trying to figure out how to load the login.page.ts outside of the router-outlet This is what my home.component.html file looks like: <div class="container"> <top-nav-bar></ ...

What is the best way to create a reactive prop within this Vue 3 application?

I've been developing a news application using Vue 3 along with the News API. My current focus is on implementing a search feature. Within my App.vue file, I have: <template> <TopBar @search="doSearch" /> <div class=" ...

Node JS HTTP proxy stalling out

Seeking assistance with an http-proxy setup that proxies any website and injects a custom JS file before serving the HTML back to the client. Experiencing issues where accessing the proxied website results in a hang-up or indefinite loading in the browser. ...

disappearing the link in a window.open popup

I have a situation where I am opening a window with the code window.open("mytest.aspx");. The issue arises when the user closes that pop-up window - I need to have the link on the parent page hidden. In essence, how can I hide the anchor link on the parent ...

Steps to remove OTP from dynamodb after a specified time period (2 minutes)

Recently, I have been utilizing the setImmediate Timeout function to call the deleteOTP function with details such as the userId of the OTP to be deleted. However, I am encountering challenges when passing the argument (userId) to the deleteOTP function ...

The PHP script is saving unpredictable data in the database

I've been struggling to figure out why my added fields aren't being stored properly in the database. After extensive investigation, I've determined that jQuery is not adding HTML fields correctly, which is preventing them from being submitte ...

What is the best way to organize JSON files data in a specific sequence?

I successfully converted 3 JSON files into an HTML page using AngularJS. Here is the code I used: Factory code app.factory('myapp', ['$http', function($http) { function getLists() { var tab = ['url1', 'url2 ...

Steps for updating inputs using a modal selection

I am currently utilizing the Laravel Framework and facing an issue where I need to allow users to choose a specific event to edit if they have multiple event records. I have already implemented a modal that displays all the events, but I am unsure how to c ...

The Vuejs single-file component fails to display on the page

Even though there are no errors in the browser and Webpack compiles successfully, the message "hello from dashboard" is not displaying on the page. I am currently using Vue version 2.6 In my main.js file: import Vue from 'vue' Vue.component(&a ...

Should I wait for my state to be updated with new information before triggering the render function?

Can someone assist me with restructuring the code below to ensure that the information in the data array is displayed on the initial page load? async componentDidMount() { const { id } = this.props.match.params const soccerApi = axio ...

Transforming instance of a Class into Json format for WebService

My goal is to retrieve an object of the Product class as a Json for a webservice. Despite successfully loading all the values into the object, I encounter an error when trying to return it as Json. Below is my method: <AllowAnonymous> <HttpGet&g ...

Having trouble with AngularJS - struggling to diagnose the issue

HTML Page <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="assets/js/angular.min.js"></script> ...

Transmit an unmodifiable array using JSON and Ajax

Is there a way to transmit arrays in a non-editable format? The data I wish to transmit looks like this: var items = []; //console.log(JSON.stringify(items)); allitems = JSON.stringify(items); [{ "assetid": "7814010469", "classid": "1797256701", ...