The challenge of validating image uploads in Angular

https://i.sstatic.net/HUgeT.png

Utilizing an angular image upload plugin, I am aiming to display an error message for ngf-pattern when a user uploads an invalid file type. However, there is another error message being displayed (ng-required message). How can I prevent the ng-required message from showing up? The validation process is carried out using the Angular-auto-validate plugin.

Here is my code:

<div class="col-sm-6">
  <input type="file" ngf-select ng-model="file.nicCopy" name="nicCopy" ngf-pattern="'.jpg,.jpeg,.png'" ngf-accept="'image/*'" ngf-max-size="20MB" ngf-min-height="100" ng-required="!customerDetails.isPending && (customerDetails.customerType.description | uppercase) == 'INDIVIDUAL' && (!customerDetails.filepathnic || customerDetails.filepathnic == 'null')" ngf-resize="{width: 800, height: 600}" ngf-resize-if="$width > 800 || $height > 600" class="form-control" />
  <img ngf-thumbnail="file.nicCopy" ngf-size="{width: 100, height: 100, quality: 0.9} ">

  <div ng-if="customerForm.nicCopy.$error.pattern" class="error-msg">Invalid File Format </div>
</div>
javascriptangularjs

Answer №1

Instead of relying on plugins, you can easily check the file extension using basic Javascript.

let fileType = filename.split(".").pop();

Consider leveraging the DOM to retrieve properties for validation purposes. Create a reusable function to streamline this process.

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

Vanilla JavaScript // Conceal a div when the class of another div is modified

Note: I am unable to utilize jQuery, only vanilla JavaScript I am not very proficient in pure JS. Additionally, this time around, I cannot rely on any external resources such as jQuery. What I am looking for: If the div1 class is active, I want to hide ...

javascripttriggersshow-hide

Updating all images in a JQuery thumbnail gallery

I've been experimenting with jQuery and fancy box to create a special effect on my website. I wanted to display a large image with thumbnails below it, where clicking on a thumbnail would update the main image (similar to the RACE Twelve image example ...

javascriptjqueryimage-galleryevent-bubbling

Executing asynchronous functions synchronously

I am relatively new to JavaScript programming and I am currently trying to grasp the concepts of asynchronous processes. In my project, I am looking to execute the following code synchronously. Despite watching numerous tutorials on the subject, I find mos ...

javascriptangularjsmongodbexpress

Issue with create-react-app and express server not displaying correctly in Internet Explorer

My application functions perfectly with Chrome and Safari. It utilizes React for the front-end and Express for the back-end. However, when I try to open it in Internet Explorer, all I see is a blank white page. Additionally, I encounter this error message: ...

javascriptexpressinternet-explorercreate-react-app

How to retrieve the value of an observable from a regular JavaScript array in Knockout JS?

Context In my project, I am working with a plain JavaScript array that starts off empty but gets populated with Knockout observables later on. These values are numbers and I need to compare them with values in another Knockout observable array. The issue ...

javascripthtmlknockout.jsko.observablearray

Achieving the equivalent of php crypt() in NODE.JS

Can anyone assist with converting PHP to JavaScript (Node.js)? $key = crypt($key, $salt); I am currently in the process of rewriting a PHP script using Node.js, and I have encountered an issue with generating hash signatures similar to the ones created b ...

phpjavascriptnode.jsencryptiondes

There seems to be an issue with the border displaying correctly within the div element

I am currently working on developing a tag input system, but I am encountering some CSS issues. What I am aiming for is to have a green border that surrounds and contains the 2 divs inside it, however, this is not happening as expected. You can see the fi ...

javascripthtmlcss

The elements within the array are being refreshed accurately, however, a separate component is being removed

I have developed a component that has the ability to contain multiple Value components. Users can add as many values as they want, with the first value being mandatory and non-removable. When adding two new Value components, I provide input fields for name ...

javascriptvue.js

Error in background request for Chrome app/extension, or problem allowing app to access Google Docs API

I'm encountering an issue where the Google Doc API is not allowing a desktop application to be installed, although this worked fine in Chrome 27.0 previously. Below is my Manifest.Json file: { "name": "__MSG_extName__", "description": "__MSG_ext ...

javascriptjsongoogle-chromegoogle-chrome-extensiongoogle-chrome-app

Convert JSON information for use in ChartJS

I've been delving into the world of ChartJs and have encountered a bit of a roadblock. I'm looking to decipher how to convert JSON data into labels and data for a bar chart. The JSON data consists of an array of product orders. With varying numb ...

javascriptchart.js

How can I use Angular to dynamically open a video that corresponds to a clicked image?

I need assistance with a functionality where clicking on an image opens a corresponding video on the next page. The issue is that all images have the same ID, making it difficult to link each image to its respective video. Below is the data I am working ...

javascriptangulartypescript

Loading `.obj` and `.mtl` files in THREE.js with accompanying PNG textures

I am facing an issue while attempting to load an mtl file with reference to png textures for my obj model. The error I am encountering is as follows: TypeError: manager.getHandler is not a function Below is the snippet of my three.js code: var loadOBJ = ...

javascriptthree.js.obj

What is the process for locating the src value of an image that has been uploaded utilizing fileReader?

I am currently working on a program that empowers the user to select an image for uploading. Once the user chooses an image, it activates the previewFile() function, which makes use of FileReader to display the selected image. Now, I'm in the process ...

javascriptimagefilereadersrccreateelement

When attempting to modify styles in IE10, I consistently encounter an error message stating "Unable to evaluate expression."

Below is a JavaScript function I have created to hide an HTML tag: function hideObject(objectId) { var obj = document.getElementById(objectId); if (obj) { obj.style.display = "none"; } } I encountered a strange issue when using this ...

javascripthtmlinternet-explorercross-browser

How can I utilize jQuery to add tags in a box?

I have an idea for a feature similar to the Stack Overflow tag insert. My goal is to have a box where I can type in a tag, click 'Add', and see it appear above. Additionally, I want this action to update an array called 'SelectedTags'. ...

javascriptjqueryhtmltags

Encountering an unrecognized error on Windows when attempting to execute a child process with regex return

Below is the code I am utilizing to retrieve Make file targets: const command = `make -qp | awk -F':' '/^[a-zA-Z0-9][^$#\\/t=]*:([^=]|$)/ {split($1,A,/ /);for(i in A)print A[i]}'`; cp.exec(command, options, (error, stdout, s ...

javascriptnode.jsregexwindowsmakefile

"Can you tell me the method for obtaining an array within an Angular

Within the realm of PHP, there exist certain elements within an array: $this->data['messages']['ms'][] = 'Line1'; $this->data['messages']['ms'][] = 'Line2'; along with a method that return ...

javascriptphpangularjs

Manipulating Response headers in an $http ajax request using AngularJS

Currently, I am working on processing the response headers but I'm a bit uncertain about how to retrieve them. Below is the code snippet where I made an attempt to read the headers, however I commented out a few lines and added some notes regarding my ...

ajaxangularjshttp-headershttpresponse

Automate the process of adding or removing a class created by material ui through programming

Is there a way to dynamically manage the material-UI classes I declared in makeStyles()? Below is the code snippet: import React from 'react'; import { DropboxIcon, GoogleDriveIcon, BoxIcon } from '../components/icons'; import { makeSt ...

javascriptreactjsmaterial-ui

Safeguard your Firebase database listeners against potential web DOS attacks and unauthorized access to sensitive credentials

Firebase is such a game-changer on mobile devices, but it's not always the best fit for web applications. This is common knowledge. I rely on firebase My users are aware of the database URL They can view certain aspects of the database that I'v ...

javascriptsecurityfirebasefirebase-realtime-databasereal-time