Display an indicator during the file upload process

Is it possible to display an upload indicator using ng-file-upload while the file is being uploaded? I have checked the documentation but couldn't find a solution. Perhaps there is another way to achieve this?

Answer №1

I searched for a directive initially and attempted to use this one, but eventually switched to a more efficient option that suited my needs better. The new directive was easy to configure and use, with thorough documentation and demos to guide me in the right direction.

Check out this alternative directive: https://github.com/nervgh/angular-file-upload

Answer №2

The third parameter in the then method represents the progress.

Upload.upload({
        url: 'upload/url',
    }).then(function (resp) {
        ....
    }, function (resp) {
        ....
    }, function (evt) {
        var uploadProgress = parseInt(100.0 * evt.loaded / evt.total);
        console.log('upload progress: ' + uploadProgress + '% ' + evt.config.data.file.name);
    });

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 automatically send users to a different PHP file once they click "submit"?

I need to redirect to a different php file named index2.php. The username and password values are already set as follows: Username=sid, Password=yeaoklogin. When the user clicks on the Login button, they should be redirected to a page called index2.php. ...

I'm interested in learning more about how to select or deselect all checkboxes

How can I uncheck the "all" checkbox when I uncheck another checkbox? $('#All').click(function () { var status = $(this).is(":checked"); if (status) { $.each($('input[name="checkbox"]'), function () { this. ...

How can one create a hidden color box?

$.colorbox({ href:"/check.html", transition:"elastic", speed: 150, innerWidth:"910", iframe:true, fastIframe:false, fixedPosition:fixedPos, onComplete:function(){ var $ ...

leveraging third party plugins to implement callbacks in TypeScript

When working with ajax calls in typical javascript, I have been using a specific pattern: myFunction() { var self = this; $.ajax({ // other options like url and stuff success: function () { self.someParsingFunction } } } In addition t ...

Retrieve your username data using Ajax

I'm working on a JSP page with the following structure: https://i.sstatic.net/3aFoz.png In updating the table in my database, I've added a new username column that accepts any string of text. Once the 'update user' button is clicked, ...

Several ways to display images with interactive captions

I am in need of multiple image modals with different descriptions. Each image should have a unique caption that appears when clicked. I have searched for solutions that display alt text for each image, but I require it to show other specific texts upon cli ...

Using the Promise function with callback to map the JSON payload object into an object

I received a JSON payload with the following structure: { "name": "Reports", "subject": "Monthly Reports", "attachments":[ { "attachment":{ "name": "Month1.pdf", "type": "application/pdf", "path": "h ...

Sorting issue in Datatable: Incorrect column being sorted, fetching data from server side

My datatable is displaying data fetched from the server. Take a look at the client-side code below: The problem arises when I try to sort column #7, as it ends up ordering the next column #8 instead. Is there a missing or incorrect configuration here? Pl ...

divs adjust their size based on how many are placed in a single row

I'm in the process of developing an online editing tool, and I'm interested to know if it's feasible to adjust the size of a <div> based on the number of visible div elements. For instance, I have a row with three columns, each set at ...

A New Approach to Initializing Web Pages in ASP.NET (with a Surprising Twist)

Well, I've encountered quite the puzzling issue with a project I'm working on (it could even make it to the Daily WTF), and I'm hoping for some help in finding a solution. (Apologies in advance for the lengthy explanation...) About a month ...

Foreign key is not being posted when submitting the form using Laravel and Vue

My dilemma involves managing two tables. Here is the structure of each: Table one, referred to as "parties", consists of the following fields: public function up() { Schema::create('parties', function (Blueprint $table) { $table-> ...

Deleting a li element within an AJAX response function can be accomplished by targeting the specific

I am attempting to remove the li element that is the parent of the clicked a element. Here is the code I am using: function vanish(id_arg){ $.ajax({ url: "/vanish/", type: "POST", data: {id_to_delete: id_arg}, ...

I'm interested in using JavaScript to create a URL for the current page with two additional parameters

Currently, I am utilizing the sharethis plugin within a smarty template. When sharing on Twitter, the link appears as follows: <span class='st_twitter_large' st_via="mediajobscom" st_url="MY URL HERE" displayText='Tweet'> My goa ...

Moving information from two modules to the service (Angular 2)

Recently in my Angular2 project, I created two components (users.component and tasks.component) that need to pass data to a service for processing before sending it to the parent component. Code snippet from users.component.ts: Import { Component } fro ...

What could be causing my AngularJS errors to display like this in the Firefox console and Firebug?

Currently, I am working on an application using angularjs. However, I have encountered an issue with the 'smart-table' plugin not being added to my app modules array. What I'm interested in understanding is why Firefox and Firebug are displa ...

Problem with delaying in Jquery's .each method

I'm currently working on a JavaScript project and encountering some issues. Below is my HTML code: <div class="views-row"></div> <div class="views-row"></div> <div class="views-row"></div> <div class="views-row ...

Converting JSON object to a string

I have an object that contains the value "error" that I need to extract. [{"name":"Whats up","error":"Your name required!"}] The inspector displays the object in this format: [Object] 0: Object error: "Your name required!" name ...

Ways to implement form validation with JavaScript

I'm currently working on a project for my digital class and I'm facing an issue with my booking form. I have two functions that need to execute when a button is clicked - one function validates the form to ensure all necessary fields are filled o ...

The lineup includes ASP.NET, Java, Visual Basic, and AJAX

My ASP.NET application originally had a button that triggered VB.NET code execution on the server when clicked. Recently, there have been changes to the requirements and I've added a new menu that should replace the functionality of the old VB button ...

What are some best practices for utilizing `element.offsetParent` in HTML SVG elements?

I'm currently updating some JavaScript code that relies on the .offsetParent property. The recent changes in the application involve the use of SVG elements, which are causing issues with the JavaScript as mySvgElement.offsetParent always returns unde ...