angular state transitions automatically following successful ng-file-upload with no apparent cause for error

After successfully uploading a file to the server, my AngularJS application redirects me back to the initial state without any errors.

The success callback is triggered and there are no errors reported.

Using ng-fileupload version 3.2.5.

This is the function in my controller:

 $scope.uploadIssueAttachment = function (files, issue) {
      if (files && files.length) {
          for (var i = 0; i < files.length; i++) {
              var file = files[i];
              $upload.upload({
                  url: '/Handlers/UploadHandler.ashx?des=HelpDesk'
                  , method: 'POST'
                  , file: file
              , }).progress(function (evt) {}).then(function (data) {
                  var _fileName = data.headers('fileName');
                  var _originalFileName = data.headers('orgName');
                  var _type = data.headers('format');
                  $scope.newIssueAttachments.push({
                      fileName: _originalFileName
                      , temporaryName: _fileName
                      , fileType: _type
                  });
              }).catch(function (error) {
                  console.log(error);
              });
          }
      }
  };

Here is the corresponding HTML markup:

 <span ng-file-select ng-file-change="uploadIssueAttachment($files,newIssue)" class="file-input btn  btn-sm btn-file" >

The upload function is called, the browser responds with a 200 status code.

Request URL:http://localhost:3080/Handlers/UploadHandler.ashx?des=HelpDesk
Request Method:POST
Status Code:200 OK
Remote Address:[::1]:3080
Referrer Policy:no-referrer-when-downgrade
Response Headers
Cache-Control:private
Content-Length:0
Date:Mon, 17 Jul 2017 10:33:56 GMT
fileName:ea8c8799-0f48-49f4-a33c-dca0726af929.png
format:image/png
name:ea8c8799-0f48-49f4-a33c-dca0726af929.png
orgname:avator.png
Server:Microsoft-IIS/10.0
X-AspNet-Version:4.0.30319
X-Powered-By:ASP.NET
X-SourceFiles:=?UTF-8?B?RDpcU291cmNlXFdvcmtzcGFjZXNcUE1PLkFDQVxEZXZcQk1TXFJheWthbS5Ccm9rZXJzLldlYi5NVkNcSGFuZGxlcnNcVXBsb2FkSGFuZGxlci5hc2h4?=
Request Headers
Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate, br
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Content-Length:16544
Content-Type:multipart/form-data; boundary=----WebKitFormBoundarylgAXmkMLtLGhRRU4
Cookie:ASP.NET_SessionId=ska22gomunzfvxqv1wwihbmh; .ASPXAUTH=A8E3E65AECDBB20189E01D261B3580E6997A7763615AD085A0E92F5F44B2D7DFA2C0E39BA47876EAE614EF06C56E692B71982D9035F84075C466E63632653E3E7CC03F042B850200EFBC2867E8A0F7EA3F8A7989AAB68E267891CB819AB9024D04DB430D6B8D8E692D64652CA2645681
Host:localhost:3080
Origin:http://localhost:3080
Referer:http://localhost:3080/admin/
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36
Query String Parameters
des:HelpDesk
Request Payload
------WebKitFormBoundarylgAXmkMLtLGhRRU4
Content-Disposition: form-data; name="file"; filename="avator.png"
Content-Type: image/png


------WebKitFormBoundarylgAXmkMLtLGhRRU4--

Without any error messages, the redirection occurs back to the start page. I'm unable to track the event that triggers this state change.

An interesting observation is that when I set a breakpoint in the developer console and wait for a few minutes, the state remains unchanged and everything functions as intended.

I'm at a loss and would appreciate any suggestions on how to resolve this issue.

Answer №1

It appears that you haven't specified which version of Angular you are using, but I believe the following structure could be helpful for you. It's recommended to use the then...catch method as the success function in Angular is now deprecated. You can find more information here

Upload Structure (using then...catch)

$upload.upload({
    url: '<YOUR URL>',
    file: <file>
}).progress(function (evt) {
    // Calculate progress
}).then(function(result) {
    // Handle successful result
}).catch(function(errorCallback){
    // Error handling goes here
});

Please let me know if this approach doesn't work for you.

Edited:

$rootScope.$on('$stateChangeStart',
    function(event, toState, toParams, fromState, fromParams) {
       console.log(toState); // Place a breakpoint here to debug
       console.log(fromState);
    });

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

Using Three.js to create a distorted texture video effect

Check out the example linked here for reference: In this particular project, there are two cylinders involved - an outer cylinder with an image texture and an inner cylinder with a video texture. Once the second cylinder is created and added to the scene, ...

Using CSS to create a transition effect for fading in and out background images

I created a website with a captivating full-page background image (img/bg_start.jpg): If you hover your mouse over the central animal on the page, the current image (img/bg_start.jpg) will fade out and be replaced with another picture (img/bg_start2.jpg) ...

Comparison Between Object and Array

When inputting the values {2,4,45,50} in the console, 50 is displayed. However, assigning these values to a variable results in an error: var a = {2,4,45,50} Uncaught SyntaxError: Unexpected number Can you explain this concept? ...

Using API call responses to initiate a render in React

As a newcomer to React, I'm facing an issue with passing the results of my API call to another component file in order to trigger a render. Can anyone provide a straightforward explanation of what steps I need to take? In my code, I make a call to th ...

Unable to decipher the mysterious map of nothingness

I am currently working on a GET method in Node.js. My goal is to fetch data using the GET request and then use the MAP function to gather all the names into an array. However, I encountered the following error: /root/server.js:21 ...

Tips for finding data attribute in Select2?

Is it possible to search for items based on both the value and data-test attribute in select2? <option value="Test 1" data-test="user-1">Test 1</option> <option value="Test 2" data-test="user-2">T ...

retrieve information using ui-router from a specific state

To simplify things without losing the essence of the question, let's say I have a state using ui-router. $stateProvider.state("home", { abstract: true, templateUrl: "...", meta: { label: "...", ... } }); How can I ret ...

Error message: "Issue with Jointjs library on Node.js server - Uncaught ReferenceError: Joint is not recognized"

I am attempting to create a sample diagram using the code below on a file hosted on a Node server: <!DOCTYPE html> <html> <head> <title>newpageshere</title> <link rel="stylesheet" href="joint.css" /> <script src="j ...

Encountering a problem while trying to pin a message on Discord

Whenever a message is pinned in discord, it causes the bot to crash with the following error (although it can recover with forever but that's beside the point). The pinned message can be of any type (regular or embed). if (!value) throw new RangeE ...

Utilizing a function as an argument within two directives in AngularJS

My list comprises of Task items: This is my template: <div> <p class="work-item-name">{{ task.Name }}</p> <p class="assigned-to">{{ task.Assignee }}</p> <button class="btn btn-primary btn-sm" ng-click="goBac ...

Is it better to have Angular and Laravel as separate applications or should Laravel serve the Angular app?

I have a new project in the works, aiming to create a large SAAS application. Although I come from a CakePHP background, I've decided to use Laravel and Angular for this venture. As I navigate through unfamiliar territory with these technologies, I a ...

Is there a way to automatically initiate a 'click' event upon page load using this particular code snippet?

Is there a way to trigger this action automatically upon page load? <a onclick="$('a[href=\'#tab-review\']').trigger('click');"><?php echo $text_write; ?></a> Any suggestions would be greatly appr ...

ngInfiniteScroll Activates on Every Scroll Occurrence

Implementing ngInfiniteScroll for endless scrolling on my website has required me to set the height of the outer div to a specific value. Without this adjustment, the Infinite Scroll feature activates unintentionally. <div style="height: 1px"> &l ...

Transform object into an array by flattening it

I'm currently working on a task where I have an object that needs to be transformed into an array with the property as the key. The structure of the object is as follows: { Cat: { value: 50 }, Dog: { value: 80 } } The desired output should ...

Leveraging Array.map within Angular Interpolation

Is it possible to achieve the following in HTML using Angular 2+? {{ object.array.map((o) => o.property ) }} Whenever I try to execute this code, it crashes the Angular application. Do I need to utilize Pipes or any other technique? ...

Steps for displaying a deeply nested array and string within an object that is nested further in an array

I've been troubleshooting an issue in my Next.js code where I'm trying to render data called items. My goal is to display the descriptions in an array as a list and display the description that is a string as it is. However, I cannot use the map ...

Loop through the geometry's index and set each value

I have managed to create the pattern shown in the image successfully. Currently, I am looking for a way to automate this process. Specifically, every second square needs to be mirrored. If you have any suggestions on an easier approach, please share them ...

Tips for dynamically adding an HTML element to index.html using JavaScript

https://i.sstatic.net/cAna8.png How can I use JavaScript to insert cards into a container or display them in flex? Currently, the cards are not displaying as desired. I attempted to insert data into the note class using insertAdjacentHTML in JavaScript, b ...

Exploring the inner workings of view encapsulation in Angular

It is common knowledge that the default view encapsulation for a component in an Angular application is Emulated. encapsulation: ViewEncapsulation.Emulated I am quite perplexed about how it functions without being a shadow DOM. ...

Tips for matching the width of tooltips with the length of the title

I am trying to adjust the width of the antd tooltip to match that of the title. Here is the code snippet: <Tooltip placement="top" align={{ offset: [0, 10] }} title='this is the title'> <span>tooltip</span> </T ...