"Utilizing Angular's $http.post to extract data from resolved promises

Can you help me figure out how to successfully send data through $http.post that I receive from a function using $q.defer()? Here is the code snippet:

HTML

<input type='text' ng-model='name'/>
<input type='file' id='inputFile' />
<button ng-click='save'>Save</button>

JavaScript

file = document.getElementById('inputFile');

function imgToBase64(file_input) {
    var deferred = $q.defer();
    if (file_input.files && file_input.files[0]) {
        var fileReader = new FileReader();
        fileReader.onload = function (event) {
            result = event.target.result;
            deferred.resolve(result);
        };
        fileReader.readAsDataURL(file_input.files[0]);
    }
    return deferred.promise;
};

imgToBase64(file).then(function(result){
   $rootScope.result = result;
});

Post request

$http.post(apiURL, {
  name: $scope.name,
  image: $rootScope.result
}).success(function(data) {
      console.log(data);
})

When I click save, only the content of 'name' gets sent and $rootScope.result remains empty. Interestingly, when I log $rootScope.result it does show the result, but it appears empty in the post request. Any idea what could be wrong? Thank you.

Answer №1

Not sure if this aligns with your needs:

$scope.save = function () {
    convertImageToBase64(file).then(function (output) {
        $rootScope.output = output;
        $http.post([...]);
    });
}

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

What is the best method for automating the transfer of data from a database to the user interface of a website using html and javascript?

As a volunteer coordinator for a non-profit organization, I have some basic experience working with Python. I am willing to dedicate fewer than 8 hours of learning time to my current project in order to automate certain tasks (or else I will do them manual ...

When angular-translate is utilized as a directive rather than a filter, the behavior of HTML escaping is altered

angular-translate - version: 2.8, angular-version 1.3.5 The translation key MyKey contains <i>Text</i> Here is a sample snippet to test: <p translate="MyKey"></p> <p translate="{{'MyKey'}}"></p> <p>< ...

Clicking on a href link inside a scrollable div-container causes it to malfunction, causing the page to jump

I have a draggable div container that contains dynamically generated content. In order to display this container, I use the following code: $( function() { $( "#dialog-message" ).dialog({ modal: true, height: 400, buttons: { Fertig: functi ...

Convert time display to a 24-hour format using JavaScript

I managed to convert the time format from GMT to my browser's local time using the following JavaScript code: var newDate = new Date(timeFromat); timeFormat = newDate.toLocaleString(); Now, I want to change the time format to a 24-hour clock format ...

Tips for ensuring that a JavaScript program does not get blocked by other API calls

My JavaScript API currently has limitations that prevent other APIs from being called or allowing the API to call itself while running. The API involves sleeping for a specific duration, during which I would like other API calls to be made as well. I have ...

Replicate the array multiple times and combine them into a single flat array

I have a four-element array that I need to copy to another array four times. I achieved this by concatenating the array four times. Here is what I tried: let demoProperties = [] .concat(fourDemoProperties) .concat(fourDemoProperties) .concat(fourDe ...

What is the best way to invoke the first exported function from the second exported function?

I am looking to create a file containing four or five exported functions. exports.firstFunction = function() { // some code }; exports.secondFunction = function() { // need to call firstFunction }; My issue is that I want the second expo ...

Merge HTML documents with this powerful JavaScript library

Our team has developed an email generator that creates HTML emails based on specific parameters. Users can simply select or deselect options and the email will be regenerated accordingly. Occasionally, users may need to make minor manual changes to the co ...

What are the steps to position this bootstrap drop-down menu above a fixed page header?

Could someone please advise on what changes need to be made in the code snippet below from http://jsfiddle.net/ufkkdbja/? I am looking to ensure that when the hamburger menu is clicked, the entire menu appears without being cut off by the fixed page header ...

JavaScript - Placing Image Caption and Details within a Box

<div id="CollectionALL"> <div id="collection1" class="col"> <img id="Img1" class="imageCS"/> <H1 id="Title1"></H1> ...

Adding a cell break line within AG-GRID in an Angular application

I'm trying to display two sets of data in a single cell with ag-grid, but I want the data to be on separate lines like this instead: Data with break line I attempted to use "\n", "\r", and "\br" but it didn't work. Here is my code ...

Save the environment value within Vue when the app starts up

When working with a basic web app created using VueJS, the application makes an API call that returns an object containing the environment name. For instance: https://appsdev/mysimpleapp/api/environment returns {"applicationName":"My S ...

In Angular, a white screen may suddenly appear if the scrolling speed is too fast

My experience has been primarily on Chrome. I've noticed that when I scroll for a long time, the data on the screen disappears briefly and then reappears after a few seconds. Is there a resolution for this problem? Thank you, ...

Retrieve the maximum number of slots from a JSON file and implement them into the

I've encountered an issue with my upload form. After uploading and previewing an image, I want to add it to a list as long as the list still has available slots. Here's an example: If the maximum number of slots is set to 5, then you can add up ...

Node responds with a 404 error upon receiving the post request

I am facing an issue with my jQuery code. Here is what I have: $.ajax( { type: 'POST', data : mydata, url : '/routerfunction', dataType : 'String', success : function(data) ...

Using jQuery to Check Cookies and Hide Content Depending on the Value and Data Attributes

On a webpage, I have a collection of coupons with unique data attributes (data-coupon). Currently, I am using cookies to store the value associated with each coupon (ranging from 1 to 4). While my code is functional, it feels repetitive and cumbersome. S ...

Using AngularJS with ngRepeat allows for the insertion of an extra element every specified number of repeats

I am attempting to establish a layout where every 7 repeated elements, an extra element is inserted. This additional element must be part of the parent container rather than being a child of one of the repeated elements. Simply changing the class is not s ...

One way to transfer data from the back end into a two-dimensional array is by retrieving the data and then transforming it into the desired format before sending it to

How can I format backend data into a specific format using JavaScript? Even though I retrieve data from the backend, json_encode($myarry) does not display my data. $query = "SELECT * FROM LOCATIONS"; $result= mysql_query($query); while($row = mysql_fetch ...

Awaiting the completion of multiple asynchronous function executions

I am currently working on a promise function that executes an async function multiple times in a loop for different data. I would like to ensure that all async functions are completed before resolving the promise or calling a callback function within a non ...

Is there any re-rendering optimization feature in Angular 2?

After experimenting with React for a few months, I've noticed that it doesn't just re-render a component entirely. Instead, it identifies the differences and updates only those parts. Does Angular 2 operate in a similar manner? Additionally, whe ...