Ionic - Retrieve data from a Universal Resource Identifier

When using my application, users have the option to select and crop images using Ionic Native - Crop. Once they have cropped their image, I will receive the URI of the image, for example:

file:///storage/emulated/0/Android/data/com.myApp/cache/1535369478970-cropped.jpg?1535369482232

To convert this file to a base64 encoded data url, I plan to utilize Ionic's File API, which offers the method readAsDataURL(path, file). However, I'm unsure how to properly extract the path and file from the provided URI so that readAsDataURL(path, file) can be successfully executed.

Additionally, I'm uncertain about the significance of the numbers following the .jpg?1535369482232 in the URI, as well as the file name and directory structure on iOS, as the URI was obtained from testing on an Android Emulator.

P.S. When attempting to call the method with only the path and no file name as the second argument, I encountered the following error:

{"code":13,"message":"input is not a directory"}

How can I effectively achieve the desired outcome for file paths on both iOS and Android platforms?

Answer №1

Your journey leads you to the 'cacheDirectory' path this.file.cacheDirectory.

In order to retrieve the filename.

const brokenPath = "file:///storage/emulated/0/Android/data/com.myApp/cache/1535369478970-cropped.jpg".split('/');
filename = brokenPath[brokenPath.length-1];

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

Navigating through the properties of an object within an array using Angular

In my AngularJs project, I am utilizing the ng-repeat option to display the questionText property within each object in an array. [{ "_id": "57fa2df95010362edb8ce504", "__v": 0, "answers": [], "options": [], "questionText": "what is yo ...

Tips for successfully passing an Observable identifier to mergeMap

Monitoring the outputs of a list of observables with mergeMap is straightforward, as shown in this example code snippet: export class TestClass { test() { const observableA = of(1, 2, 3); const observableB = of(7, 3, 6); const observableC = ...

Troubleshooting Tips for Resolving Problems with VueJS getElementById Bug

I'm currently working with a VueJS single File component that has the following template: <template> <div class="row"> <div class="col-md-12"> <div id="hottable"></div> < ...

"Looking for a way to eliminate the background of an image on NextJS? Learn

https://i.stack.imgur.com/zAsrJ.png When this image is incorporated into a Nextjs rendering, it unexpectedly includes additional content. <div className="flex flex-col items-start justify-start rounded-3xl p-4 bg-boxi w-1/3"> <div cla ...

Tips on transforming a JSON array object into a JSON array

**Background:** I have been utilizing lodash to eliminate the empty key from my JSON data. However, upon removal of the keys, it transforms my array into an object. For instance: { "projection": "Miller", "series": [ { "mapPolygons": { ...

Concealing the parent template in Vue Router when the child is displayed

Having some trouble setting up Vue.js with the router, specifically dealing with view display issues. I've created a router.js file with child routes for breadcrumbs and route clarity purposes. Each individual route loads perfectly fine when opened. ...

Animating the dimensions of objects in THREEjs

In my project using THREE.js, I am aiming to create a captivating animation where an object gradually shrinks into nothingness. After exploring solutions on Three.js - Animate object size, I found methods to adjust the size of an object. However, the chan ...

The Next.js error message reads: 'Issue with setting properties on undefined entity (specifically 'hook')'

This issue seems to occur either when the app is launched or when updating the Redux state. It may not show up consistently for every state update, but for some reason it persists throughout the entire app. What I have attempted so far: Removing node mod ...

Having trouble with ReactJS: Why is this.setState not working?

Hello there, I am currently learning ReactJS and struggling with an issue where I keep getting the error message "this.setState is not a function". constructor() { super(); this.state = { visible: false, navLinesShow: true }; ...

The Angular Spring Boot Assembly Problem Leading to a Whitelabel Error

I am currently working on a project that uses Spring Boot as the backend and Angular as the frontend. My packaging process involves building the Angular project and then copying the contents into the Spring Boot resource folder. In my Spring Boot Controlle ...

Using a promise instead of resolving it with Angular's $q.then() methodology

Imagine you come across the given code snippet: var callNo1 = $http(...).then(function (response1) { var callNo2 = $http(...).then(function (response2) { return [response1.data, response2.data]; }); return callNo2; }).then(function (r ...

Guidelines on adjusting the hue of the card

I have created a directive to change the color of cards @Directive({ selector: "[appColor]", }) export class ColorDirective { @Input("color") color: string; constructor(private element: ElementRef, private render: Renderer2) { ...

How to verify if both MySQL queries in Node.js have fetched results and then display the page content

Seeking assistance with two queries: one to verify user following post author and another to check if the user has liked the post. I attempted to use the logic: if ((likes) && (resault)), but it's not yielding the desired outcome. After inve ...

Leveraging Webworkers in an Angular application for efficient data caching with service workers in the Angular-CLI

I am looking to run a function in the background using a worker, with data coming from an HTTP request. Currently, I have a mock calculation (e.data[0] * e.data[1] * xhrData.arr[3]) in place, but I plan to replace it with a function that returns the actual ...

Trouble with Fullcalendar v4: Unable to use addEvent() function in a customized view

Currently, I am utilizing fullcalendar v4 (accessible at https://fullcalendar.io/) and facing an issue where I need to refresh the dropped event in a custom view called 'timeGridSixMonth'. var calendar = new FullCalendar.Calendar(calendarEl, { ...

retrieve only the following occurrence throughout the entire file

I am looking to target only the first occurrence of an element in the document after a clicked element. Here is my current approach: $('.class').click(function(){ var x = $(this).nextAll('.anotherclass').first(); //do something ...

Tips for extracting the chosen text during a 'change' event

I need to access the text of the currently selected object. When I use $(this).text(), I end up getting all available selections I have attempted the following methods without achieving the desired result: $(this).text() $(this).selected() $(this).se ...

Enhance the performance of node.js when processing data from a massive file

My dilemma lies in the challenge of reading and processing a large file with numerous rows. When dealing with small files under 50kb, everything runs smoothly. However, I am faced with a 15MB file for a programming competition, which serves as a hard input ...

The login page continues to show an error message for incorrect credentials unless the submit button is clicked

My current project involves a React component called "Signin.js". Within this component, there are login input fields as I am working on creating a login system using Node.js, Express.js, and MySQL. To achieve this, I have set up a post request that sends ...

What is the best way to create a JavaScript Up/Down Numeric input box using jQuery?

So, I have this Numeric input box with Up/Down buttons: HTML Markup: <div class="rotatortextbox"> <asp:TextBox ID="txtrunningtimeforfirstlot" ClientIDMode="Static" runat="server">0</asp:TextBox> (In mins) </div> <div cl ...