Ways to personalize Angular's toaster notifications

I am currently utilizing angular-file-upload for batch file uploads, where I match file names to properties in a database. The structure of the files should follow this format:

01-1998 VRF RD678.pdf

VRF represents the pipeline name RD represents the location name 678 is the location code

Each property has its own conditional statement to check for matching files in the database. Currently, if there is no match or if the file name is incorrect, an error message is displayed.

I aim to achieve three objectives:

  1. Create an error message that displays the file name and the specific conditional statement causing the error. If there's no match for the pipeline, I want the file name along with "no match for pipeline" below it.

  2. Establish an error message for when the file name structure is incorrect. I want the file name followed by "incorrect filename."

  3. Prevent the function from encountering errors; instead, display the error messages while allowing other files to be uploaded.

I'm exploring the use of linq.js and JavaScript is also acceptable.

Here's an example illustrating what I'm struggling with - an incorrectly structured file name triggers the following error message:

TypeError: Cannot read property 'name' of undefined

$scope.upload = function () {
    var files = $scope.files;
    if (files && files.length) {
        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            // additional script logic here
        }
    }
};

Answer №1

When handling the ngFileUpload error event callback, ensure that you are passing in 4 arguments as shown below:

https://github.com/danialfarid/ng-file-upload/blob/master/dist/ng-file-upload-all.js#L509-514

promise.error = function (fn) {
   promise.then(null, function (response) {
       fn(response.data, response.status, response.headers, config);
   });
   return promise;
};

Remember, headers is the 3rd argument, and config is the 4th argument. Make sure that config is referencing headers correctly to avoid getting an error like

TypeError: Cannot read property 'name' of undefined
.

Update your code from:

.error(function (err, result, config) {
   ...
})

To:

.error(function (err, result, headers, config) {
   ...
})

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

Mui CardContent not displaying transparent background color properly

I recently completed a course that used MUI v4, and I'm now facing challenges with transitioning to v5. Despite my best efforts, I am struggling to replicate all the styles and find myself stuck. This issue relates to my FeaturedMovie.jsx component i ...

My directive is not being loaded in Angular

Recently, I have started using Angular but encountered an issue with loading my directive. I am looking to load my directive immediately upon page load. Where should I load the data-show directive? <div class="row"> <div class="c ...

What's the best way to mount a file on a field?

Can you assist in resolving this issue by utilizing a form on JSFiddle? If a user fills out the following fields: name, email, phone, message The data should be output to the console. However, if a user adds a file to the field attachment No output ...

Is it possible to extract the body from the post request using req.body.item?

After working with Express, I learned how to extract body data from a post request. Most examples showed that using req.body.item should retrieve the desired value for tasks like inserting into a table. However, in my case, I found that I couldn't ac ...

How can I use JavaScript to retrieve information from a different webpage?

I am trying to extract data from another webpage using JavaScript, jQuery, or Ajax without using PHP. I came across a helpful example on Stack Overflow (link here). However, when I implement these codes in my index.html file, it doesn't seem to work. ...

Filtering JSON objects in Vue when the API is only returning a limited number of items

Currently, I am retrieving a JSON Object from an API with a limit of 200. The process involves fetching the initial 200 like this: https://testapi.com/posts.json In our application, we have implemented pagination with 10 posts per page. When we reach pag ...

Guide on removing material-ui from your project and updating to the newest version of MUI

I need to update my React app's material-ui package to the latest version. Can someone provide instructions on how to uninstall the old version and install the new MUI? UPDATED: In my package.json file, the current dependencies are listed as: ...

Issues with CSS Modules not applying styles in next.js 13 version

Employing next.js 13.1.1 along with /app Previously, I had been handling all of my styles using a global.css, however, I am now attempting to transition them into CSS Modules. Within my root layout.js, there is a Header component that is imported from ./ ...

The split() function returns a string that remains unaltered and intact, without any

I am attempting to separate this string: 120,00 m² into two distinct parts like this: 120 m² This is the code I have been using: var test = jQuery('#wpsight-listing-details-3 .span4:nth-child(4) .listing-details-value').html(); var pa ...

"Troubleshooting issue: Module fails to reload following JSON.parse error

For QA testing purposes, we have a test page that allows our QA team to replicate server behavior by passing JSON to a mock service. Everything functions correctly when valid JSON is used, but if invalid JSON is provided, an error is returned - which is ex ...

Angular Grunt minification encountered an unexpected punctuation token «}», when it was expecting a colon punctuation «:»

Given that 'id' is a pre-defined dynamic variable, what could be causing it not to minify correctly? let dynamicVar = 'device_' + id; $scope[dynamicVar] = {dynamicVar}; This is the specific error message from grunt-contrib-uglify: ...

Error: ...[i] has not been defined

What seems to be the issue with this part of the script: function refreshLabels() { // loop through all document elements var allnodes = document.body.getElementsByTagName("*"); for (var i=0, max=allnodes.leng ...

Store the value returned from either the URI or the response in the test context using Cypress IO

I am struggling to figure out how to extract a specific portion of a key from both the URL and the xhr response. I initially attempted using the URI method but couldn't specify to save only part of the value. .url().then(($url) => { co ...

What is the best way to simulate an angularJS service using $resource with a custom action?

https://docs.angularjs.org/api/ngResource/service/$resource After examining the $resource API, it is evident that there exists a custom action within the method that can be invoked. The question that arises is how to create a mock service that incorporates ...

Can you explain the variance between these two methods of configuring the $routeProvider?

As I delve into the world of Angular, I've come across various configurations for the $routeProvider. One example sets it up like this: app.config(function ($routeProvider) { $routeProvider. when("/drivers", { templateUrl: "partia ...

Vuex has reserved this keyword

I am working on a Laravel application with the following code in app.js: require('./bootstrap'); window.Vue = require('vue'); import { store } from './store/store' import Sidebar from './Sidebar' Vue.component(& ...

Utilizing an SSL certification (pem file) within JavaScript

Currently in the process of developing a program to extract data from the FAA's AIDAP database. I received a security certificate in the form of a .p12 file, which I have successfully converted into a .pem file. However, I am encountering difficulties ...

Manipulating state in React

Currently, I am enrolled in Samer Buna's Lynda course titled "Full-Stack JavaScript Development: MongoDB, Node and React." While working on the "Naming Contests" application, I encountered a piece of code within the App component that has left me puzz ...

Capturing a part of the screen using JavaScript for screen recording

I'm exploring the possibility of implementing a JavaScript screen recorder that captures a video feed rather than the entire screen. I'm wondering if it's achievable using getDisplayMedia or if there's a specific library for this purpos ...

The concept of CSS "preload" animation

When working with CSS, I encountered an issue with lag while loading 24 different mask images for a transition effect. To address this, I tried using a div called "preload" to cache the images and prevent lag on playback: <div class='trans' s ...