Issue with Nervgh Angular File Upload - unable to cancel item

Here is the HTML code I'm using:

<input type="file" nv-file-select="" options="{ photoType: 'studentPic' }" uploader="uploader" />

This is my AngularJS code:

var uploader = $scope.uploader = new FileUploader({
            url: 'badges/photos',
            autoUpload: true
        });

        // FILTERS

        uploader.filters.push({
            name: 'customFilter',
            fn: function (item /*{File|FileLikeObject}*/ , options) {                
                return this.queue.length < 10;
            }
        });

        // CALLBACKS

        uploader.onWhenAddingFileFailed = function (item /*{File|FileLikeObject}*/ , filter, options) {
            console.info('onWhenAddingFileFailed', item, filter, options);
        };
        // More callback functions go here...
        

In my uploader.onBeforeUploadItem function, I have a condition that checks if the file type is not "image/png" or "image/jpeg", or the size is greater than 102400. If this condition is met, I call the cancelItem method. However, despite meeting these conditions, the upload of the item still goes through successfully. Am I calling the cancelItem method incorrectly? Any help would be appreciated.

Answer №1

To prevent uploads that are already in progress, use this.cancelItem(item).

Prior to uploading a file, ensure you check the necessary conditions.

For instance:

<button type="button" id="upLoadFileButton" data-ng-click="validateStuffBeforeUpload(item)">Upload File</button>

In your controller, define a function for validating specific criteria before passing the file item to the uploadItem method upon successful validation:

    $scope.validateStuffBeforeUpload = function (fileItem) {
            if((item._file.type!="image/png" && item._file.type!="image/jpeg") || item._file.size>102400){
                console.log("in if of before");
            } else {
                uploader.uploadItem(fileItem);
            }
        };

Your implementation may vary but remember to validate your requirements prior to invoking the uploadItem method.

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

Getting the key of a JSON object within the object itself while using a Vue v-for loop in JavaScript

I am not interested in the keys that are contained within this object, but rather the key of the object itself (the key in the array holding the object). Here is the JSON data I am working with: { "Object name (text)": { "raw&qu ...

javascript get the current date and year

Examining the javascript code below: <script type="text/javascript"> $(function () { var currentDateTime = new Date(); var oneYear = new Date(); oneYear.setYear(oneYear.getYear() + 1); alert(currentDateTime + "_" ...

Implementing varied constants in AngularJS application for production and development using webpack

I am trying to adjust the URL for an external API in my AngularJS app depending on whether it is running in development or production mode: Here is a snippet from my app.js file: var API_URL = 'http://localhost:8000/api'; # dev configuration ...

Combining objects using ES6 import/export with async/await functionality

I am facing a situation where I have two files named config.js and config.json and my goal is to combine them into one object and then export it: config.json { "c": 3 } config.js import fs from "fs"; import fse from "fs-extra& ...

What are the steps for utilizing a map created by an exorcist?

Keep in mind that I am new to this, so I may be overlooking something obvious. Generating a .map with exorcist during the creation of a Browserify bundle is straightforward if you follow the guidelines on the official website. But once you have the resul ...

What is the best way to utilize the $('input').on('change', function() method within AngularJS?

I am working on creating a registration form page using AngularJS and I need to display the percentage completed. The form consists of over 50 fields, so I am looking for a simple way to implement this functionality. Below is a snippet of the code I have ...

Create a new NVD3 graph with a vertical line added

I am working with a NVD3 graph that displays a simple data set. My goal is to draw a line over the graph in a different color (similar to a cut-off value, which will be at x=5) <meta http-equiv="content-type" content="text/html; charset=UTF8"> <s ...

Send the response from Facebook to the flash callback on the external interface

I attempted to transfer the response from a Facebook API request obtained through the FB JS-SDK to my flash application using external interface. However, I am having trouble identifying the type of response as it displays [object object] when printed in t ...

JavaScript: The delayed submission feature is malfunctioning

Visit this link When using JSFiddle, a strange list of errors is generated (see pic here). However, the auto-submit feature on my page works fine, but it lacks the specified delay. Thank you in advance for any assistance. <form id='formBlokUziv&a ...

Update a BehaviourSubject's value using an Observable

Exploring options for improving this code: This is currently how I handle the observable data: this.observable$.pipe(take(1)).subscribe((observableValue) => { this.behaviourSubject$.next(observableValue); }); When I say improve, I mean finding a wa ...

Content does not become interactive upon the initial loading of the page

I've modified a W3 schools slideshow template to use text instead of dots, but I'm encountering two issues 1: The first image doesn't load when the page loads. Although using a class ID and setting it to active fixes this issue, it leads to ...

The function res.send is unavailable and errors are not being properly managed

I encountered a peculiar error while using my function to create users in my mongoose database. Despite the user being successfully created, I am facing an issue where res.send is not functioning as expected, resulting in no response and instead, an error. ...

Any ideas on how I can use PHP or JavaScript to repeatedly execute a segment of HTML code?

I recently tried using a for loop and heredoc in PHP with code that looks something like this: $options = ''; for($Year = date("Y"); $Year <= date("Y") + 5; $Year++) { $options .= "<option>$Year</option>\n"; } $Select = ...

What is the best way to replace input fields with processed values?

I'm struggling to restrict the characters permitted in a number input field. Currently, I am unable to figure out how to remove invalid characters from the inputfield. Below is the code snippet that I am experimenting with: <template> <di ...

angularjs currency conversion tool

Is it possible to choose only 3-4 currency values from a drop-down list, where the selected value will determine the base URL for fetching JSON data? For instance, if I select USD as the first value, the JSON data should be retrieved from . ...

How to utilize map, reduce, and filter methods in JavaScript to print values from a nested array

The end goal is to have a unique entry for each name in the provided array. (Similar to the commented rows at the bottom of the snippet below) If there are identical names, only keep the entry with the highest count. In case of duplicate counts, choose th ...

Tips on how to automatically rearrange a jQuery UI sortable list

Currently, I am working with 2 jQuery UI sortable lists which can be found at http://jqueryui.com/demos/sortable/#connect-lists. The process involves dragging items from list A (catalog) to list B (basket). I have a specific requirement where I need the ...

Adjust object values dynamically with TypeScript by identifying the corresponding keys

Currently, I am in the process of creating a function in TypeScript that will return another function allowing me to modify the keys of an object. This specific function is intended for use within a React reducer. For instance, if I have a state object wi ...

Clicking on an option within a div that has an ng-repeat does not update the ng-model

Why is my ngModel, myOpt2, not changing when selected while myOpt does change? Any specific reason for this? ¿Por qué mi ngModel, myOpt2, no cambia al ser seleccionado mientras que myOpt sí lo hace? ¿Hay alguna razón específica para esto? var app ...

What are some strategies for debugging a live Angular2/Typescript application?

As I start the exciting journey of creating a new app with Angular2 and Typescript, two technologies that I have never used together before (although I do have experience using them individually), a question arises in my mind. How can I effectively debug ...