What is the best way to store an image file using html/angularjs?

I'm facing a challenge in my app where I need to save an image on one page and then retrieve it on another. So far, I have explored three different methods but none of them seem to be working for me:

First, I attempted to use 'Parse.File' with Parse as my database solution for saving images. Unfortunately, I encountered issues and couldn't get it to work as expected. The documentation provided by Parse was quite complex and assumed a higher level of knowledge than I possessed.

Next, I considered storing images in the cloud and linking to them in the HTML code. I experimented with Cloudinary, but struggled to integrate their Angularjs plugin due to lack of detailed documentation. Then I turned to Flickr, which was easier to set up, but didn't offer a simple example that suited my needs.

Lastly, I thought about saving the image locally and referencing it in the database just like any other asset in my app. However, I haven't been successful in implementing this idea yet. I tried uploading the image using $http, looked into ng-file-upload and ngStorage, but found the lack of practical examples and clear instructions frustrating. I even followed a tutorial, only to encounter the Access Control Allow Origin error. I'm unsure if any of these methods are the right approach for my issue. Could you please advise me on the best way to allow users to save and call image files in my app? Any additional details or guidance would be greatly appreciated.

Answer №1

Is this for an app or a website? I completely agree with you, the documentation can be quite misleading.

Here are some helpful links to check out:


I'm sharing my code for a Cordova application:

var photo;

var cameraOptions = {
    quality: 50,
    destinationType: 0,
    encodingType: 0,
    targetWidth: 800,
    targetHeight: 800,
    mediaType: 0,
    correctOrientation: true,
    saveToPhotoAlbum: true
};

$scope.takePicture = function() {
    cameraOptions.sourceType = 1;
    navigator.camera.getPicture(onSuccess, onFail, cameraOptions);
}

$scope.selectPicture = function() {
    cameraOptions.sourceType = 0;
    navigator.camera.getPicture(onSuccess, onFail, cameraOptions);
}

function onSuccess(picture) {
    File.upload(picture)
        .success(function(data) {
            // Your desired actions here
        });
}

function onFail(resp) {
    alert('Error: ' + resp);
}

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

Is there a way to continue a failed fetch request?

I am curious about the possibility of resuming an incomplete fetch request if it fails due to a non-code-related issue, like a lost network connection. In one of my current projects, we send a large download via AJAX to the client after they log in. This ...

Determining which data is retrieved from a database based on a specific field using Sequelize and MySQL

I'm looking to retrieve the most recent records from a database, organized by category. My goal is to fetch 20 records, with 5 of the latest posts in each category. I want to ensure that the result consists of 20 total records, evenly distributed amon ...

Sharing Variables with $(document).ready

I need help understanding why this code is not functioning and how I can fix it. Despite my efforts to use namespaces and IIFEs, I am still unable to make it work. $(document).ready(function() { alert (hi); }); $(document).ready(function() { var hi = ...

Inject the variable into location.href

I am dealing with a dynamic URL, and I want to achieve the following in my HTML: <a onclick="location.href='myVariable';"><span>Click here</span></a> The issue is that this approach displays the actual string 'myVar ...

Show a virtual numeric keypad on the HTML input fields when they are set as type text specifically for mobile devices in a unique situation

When accessing the following web page from a mobile device, I currently have number input fields with comma separators added. However, in order to implement the comma separation function, I had to set the input type to text. This resulted in showing an alp ...

Deciphering the Essence of Promise Sequences

In my NodeJS project, I am utilizing Promises and aiming to gain a better understanding of Promise.chains. Within the project, there is one exposed function: This main library function returns a promise and it is intended for users to call. After calling ...

What is the best way to populate a select box with the previous value in AngularJS?

My issue involves a select box with ng-options. I am attempting to load the previous value by default, which is stored as {{c.fact}}. I have tried using ng-value="c.fact" within the select box, but it did not work as expected. Can someone please provide ...

The occurrence of events for a basic model in Backbone is inexplicably non

I attempted to save some model data on localStorage (and even tried to catch this event and log some text to the console), but it didn't work - no errors and no events either. Here is my JavaScript code: var app = { debug: true, log: func ...

Guide to authenticating with npm using various user accounts for different scopes within the same registry

I am facing an issue with setting up multiple npm authTokens for two different scopes on the same registry. @scope1:registry=https://registry.npmjs.org/ @scope2:registry=https://registry.npmjs.org/ //registry.npmjs.org/:_authToken=${NPM_TOKEN} I have atte ...

steps to create a personalized installation button for PWA

Looking to incorporate a customized install button for my progressive web app directly on the site. I've researched various articles and attempted their solutions, which involve using beforeinstallprompt. let deferredPrompt; window.addEventListener(& ...

The success variable of the Ajax running continuously in a loop is not being refreshed

Within this code snippet, a for loop is utilized to iterate through an array called netnos[] and update the variable 'nets' for each item. Ajax is then invoked to call a PHP script that generates a listing, which is successfully outputted to the ...

Streaming live video on the website

Hi there! I'm looking to integrate live video capturing into an HTML/JavaScript site for a presentation. However, I'm not sure where to start my search. Can anyone point me in the right direction? :) The live video will be captured by a camera o ...

Feeling lost when it comes to forms and hitting that submit button?

Below is a sample form structure: <html> <head> <title>My Page</title> </head> <body> <form name="myform" action="http://www.abcdefg.com/my.cgi" method="POST"> <div align="center"> <br><br; <br& ...

Tips for resolving the issue: "Encountered error loading module script..." in Angular 8 and Electron 5

I have been working on developing an Electron 5 app using Angular 8. Despite following numerous online tutorials, I keep encountering the same error. Initially, I set up a new project and ran ng serve --open, which successfully displayed the default angul ...

unable to show image retrieved from JSON data

Looking to showcase the data from my JSON objects, which are displayed in 2 images below https://i.stack.imgur.com/yhqFy.png https://i.stack.imgur.com/DUgFO.png In the data, I have properties like c_name, max_slots, and an array slots. Within the array, ...

What methods can be utilized to accurately determine a user's online status without continuously sending AJAX requests to the server through setInterval?

Seeking effective methods to determine a user's online status I am currently employing an inefficient technique to address this issue: I continuously send AJAX requests to the server at set intervals using setInterval, allowing the server to gauge th ...

Accessing JavaScript variables within Selenium

Currently utilizing Selenium Webdriver 2.0 to test an HTML page that incorporates an x.js file. Within x.js, the variable "price" is defined based on data entered from the HTML form and various Javascript calculations. In the HTML, the correct price valu ...

Occurrences repeating several times following the incorporation of fresh content into the DOM

I am facing an issue with my plugin. I have implemented an update method to handle new elements added to the DOM. Initially, everything works perfectly without any errors or issues. However, when a new element (div with class "box") is added to the DOM, th ...

Managing User Authentication Across Various Devices with Parse iOS

Having an issue with the login process in my current game project: Player logs in using their account details (existing PFUser on Parse backend) They start playing the game, then exit the game (but remain logged in) Player logs in on another device and s ...

Determining the length of an array of objects within a Firebase array using AngularFire

I have a Firebase structure which looks like this: Chatrooms { -efsCsTB95 { Messages { -bdre3G5 { Title: ... } -wer23bd { Title: ... } } } } This is the view I am working with: <div cla ...