Transferring temporary information from server to controller using angular-file-upload

Currently, I am utilizing the angular-file-upload library which can be found at this link: https://github.com/danialfarid/angular-file-upload. In the example provided on that page, data from a file is sent to the backend from a controller using the available directives.

In my implementation, I decided to move the file posting to a service. This approach would allow me to reuse the functionality and seems like the correct method (do you disagree?). Everything is functioning properly except for one issue - I am struggling to send the data from the .progress(function(evt)){} function, which tracks file upload completion status, to the controller in order to display it on the HTML page.

It appears that I can retrieve the final success response using .then, but what about this progress data?

Could there be a simple solution that I am overlooking? How should I go about achieving this task?

javascriptangularjsfile-uploadangular-file-upload

Answer №1

Finally, after a considerable amount of time, I have discovered how to make this work effectively.

The key solution lies in utilizing the notify callback for the promise. Initially, when I transferred the file upload code (referencing this repository here) to the angular services, I encountered difficulties in tracking the progress of the file upload. Since the promise was being returned from the services, I could only obtain information about the completion of the file transfer.

In the mentioned git repository, there is also a 

.progress(function(evt){ file_upload_percent=(parseInt(100.0 * evt.loaded / evt.total)})

function that calculates the percentage of file completion. By integrating the promise notify function here, we can continuously retrieve and update this value as follows : 

.progress(function(evt) {   file_upload_percent=(parseInt(100.0 * evt.loaded / evt.total)); deferred.notify(file_upload_percent);})

Subsequently, by utilizing the notify callback within the returned promise, we can monitor the progression of the file upload process.

.then(function(response){},function(){},function(update){$scope.file_upload_percent=update});

You are free to use $scope.file_upload_percent according to your requirements.

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

enabling input field while making asynchronous requests with jQuery

This is the code snippet from my index.php file: <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="ajax.js"></script> <script> $("input" ...

javascriptphpjqueryajax

I'm trying to create a drop-down list in JS that will save selected options to a database using PHP. I'm feeling a bit lost, anyone

My goal is to upload a pdf file with specific options that determine its category. The challenge arises when creating multiple options, as the second option depends on the first choice and involves JavaScript functionality for which I am unsure how to stor ...

javascriptphp

Strategies for tracking distinct property values in Firestore

Is it possible to count the occurrences of unique values in Firestore? For instance, if there are 1000 documents with dates and only 50 different dates repeated, how can I get a list of each date along with its frequency? Context: These documents represe ...

javascriptreactjsexpressgoogle-cloud-firestore

Accessing and manipulating a scope variable in Angular from an external source

Can you update a $scope variable in a controller from an external source? For instance, suppose we have the following controller: app.controller('citySelectCtrl', ['$scope',function($scope){ }]); And there is a function in the globa ...

javascriptangularjs

Retrieve the ID of the nearest div without it being executed twice

I am currently working on implementing a close button using 'onclick' functionality. The goal is to hide the parent ID element when the user clicks the button, as shown below. function displayNone() { var id= $('.btnClose').closest ...

javascriptjquery

Instructions for adjusting the size of my modal window when the keyboard appears?

While developing a next.js app, I encountered an issue with the chat modal. When the input field is in focus, I want to resize the modal height so that the keyboard popup does not hide the input field. I attempted to modify the DOM but could not get it to ...

javascriptcssreactjsnext.js

Using SimplyJS and XML: extracting the value of a specific key

Hey there, I wanted to update you on my progress with the Pebble Watch project. I've switched over to using an official external API to make HTTP requests for values, and now I'm receiving results in XML format instead of JSON. Here's a ...

javascriptajaxxmlpebble-watchpebble-sdk

In Vue3, I utilize the Provide and Inject feature to handle data changes without triggering a visual update. Instead, I apply a filter() function to remove an item from an

I am currently testing the usage of the provide and inject methods. I have placed the datas and del-function in the parent component to provide, and in the child component, I am dynamically rendering using v-for='data' in datas. The objective I ...

javascriptvue.jsvue-componentvuejs3

JavaScript - issue with event relatedTarget not functioning properly when using onClick

I encountered an issue while using event.relatedTarget for onClick events, as it gives an error, but surprisingly works fine for onMouseout. Below is the code snippet causing the problem: <html> <head> <style type="text/css"> ...

javascriptevent-listeneronmouseclick

The JSON on the Express page only appears after refreshing the page

When accessing my page at /id, the data pulled from an external API using Express does not display until the page is refreshed. Any suggestions on how to solve this issue? // Retrieves basic account data router.get('/:id', function(req, res, nex ...

javascriptreactjsexpress

Navigating a path and executing unique functions based on varying URLs: A guide

I am trying to send a post request to the path /users and then right away send another post request to /users/:id. However, I need the actions to be different for each of these URLs, so I cannot use the array method to apply the same middleware. The goal ...

javascriptnode.jsexpressserver

How to Preserve Scroll Position when Toggling a Div using jQuery

I've been struggling to find a solution for maintaining the scroll position of my page after a JQUERY toggle event. I've searched extensively but haven't found a fix yet. <script src="Scripts/_hideShowDiv/jquery-1.3.2.min.js" type="text/ ...

javascriptjqueryhtmlasp.netcss

I am encountering an issue with my function where I aim to prevent the creation of a node using duplicate coordinates

Trying to avoid creating a node with existing coordinates, I implemented a check in my code. The check is supposed to determine if there are any nodes with the same coordinates already present. However, it seems that the check is not working as expected an ...

javascriptarraysfor-loop

What is the best way to implement a Navbar link in React.js?

I am currently working on developing a website using Reactjs. I have successfully created a Navbar with two links - Home and Contact. However, when I click on the Contact link, although the URL changes accordingly, the page itself does not update. I have s ...

javascriptreactjsreact-routernavbar

Dynamic components in Angular and the error of ExpressionChangedAfterItHasBeenChecked

Seeking to create a versatile component that can dynamically contain various components. The objective is to compose an article with the flexibility of including either paragraphs or tweets. The following code defines DynamicArticleComponent: @Directive( ...

javascriptangular

Displaying received image using Express JS

Currently, I am working on managing two separate Express JS applications. One of them serves as an API, while the other application interacts with this API by sending requests and presenting the received data to users. Within the API route, I am respondin ...

javascripthtmlapiexpresshttprequest

The Javascript Date constructor struggles to interpret date strings in certain timezones that are not enclosed in brackets

Take a look at the examples below: new Date("Wed, 28 May 2014 09:50:06 EEST"); // Invalid Date new Date("Thu, 26 Jun 2014 09:09:27 EDT"); // OK, is parsed new Date("Wed, 28 May 2014 09:50:06 (EEST)"); // OK, is parsed new Date("Thu, 26 Jun 2014 09:09:27 ( ...

javascriptparsingdate

Methods for organizing consecutive elements within an array in Javascript/Typescript

Let's explore this collection of objects: [ { key1: "AAA", key2: "BBB" }, { key1: "BBB", key2: "CCC" }, { key1: "CCC", key2: "DD ...

javascripttypescript

Learn how to organize a div element containing select options using categories such as gender and shoe size, similar to the filtering

Is there a way to sort div elements using a select menu, similar to how it is done on shopping websites? I am struggling with modifying my JS code in order to implement multiple selects. Although I believe my JS code is correct, it doesn't seem to be ...

javascripthtml

Make sure to verify if the mode in Angular is either visible-print or hidden-print

Here is a snippet of code <div class="row"> <div class="col-sm-12 visible-print"> Content (display in full width when printed) </div> <div class="col-sm-6 hidden-print"> Content (same as above but only half width when ...

javascriptcssangulartypescriptbootstrap-4