Using NgModel with an input of type file

I am attempting to create a binding for an input field of type file using ngModel in the standard Angular way as shown below:

<input type="file" id="fileUpload" [(ngModel)]="file">

and

files:any

The issue I am facing is that even after selecting a file, the value of my variable files remains undefined. Here is an example with stackblitz: https://stackblitz.com/edit/angular-6mbdww

Answer №1

To accomplish this task, you need to utilize the (change) event externally.

<input (change)="onFileChange($event)" type="file" id="fileUpload">

Then, in your TypeScript file, access it using the code snippet provided below:

  files: any[];

  onFileChange(event){
    this.files = event.target.files;
    console.log(event);
  }

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

A guide on how to effectively simulate a commonJS module that has been imported in

How can I successfully mock a commonJS style module in Jest that I am importing for an external connection? The module is called 'ganblib.js' and it's causing some trouble when trying to mock it with Jest. Any advice or suggestions would be ...

Updating a form submit does not retain the value of the JQueryUI Progress Bar

I am currently working on setting up a JQuery Progress Bar that updates when the user submits a form. The code I am debugging is basic and consists of: <body> <form id="form1" method="GET" runat="server"> <div> <h1>Test</h1& ...

Angular 2, using Jasmine and Karma for testing, encountered an error with the HTTP testing API, which returned an error message stating: {"isTr

I've set up an http test case for my Angular2 app using Jasmine-Karma and encountered an API error: Uncaught API Error. Scenario: I'm trying to test an http service for my Angular2 App using Karma-Jasmine, and I've implemented the method be ...

Generating dynamically loaded components in Angular 2 with lazy loading

We are integrating an angular2 app into a cms (Sitecore) where content editors need the ability to add, remove, and rearrange components on a page, as well as include new components as needed. This is achieved by having the cms generate script tags to loa ...

Switch between two tabs with the convenient toggle button

I have implemented 2 tabs using Bootstrap as shown below: <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">CLient</a></li> <li role="presentatio ...

Parsing JSON strings that contain apostrophes (single quotes)

Can you assist me in decoding the given string? var a = JSON.parse('[' + '{"NoteName":"it's my life","UserId":"100","NoteActive":true,"UserEmail":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="87e6e3eaeee9 ...

Designing a unique CSS menu layout: Effortlessly positioning text beneath an icon

I have a sandbox below. The width of the sidebar has been set to fixed. I am attempting to position the menu text below the icon, but it doesn't show up when I try wrapping it with div or span elements. Do I need to use a flex container? <M ...

Combining values with identical keys in a PHP MySQL D3 data set

Is there a way to convert data from a MySQL database into a D3 line chart? I have the following data: [{"key":"Branch1","values":["21","1961"]},{"key":"Branch2","values":["21","1961"]},{"key":"Branch2","values":["22","20040"]}] And I want to transform i ...

Tips for utilizing multiple components in Angular 2

I am a beginner in angular2 and I am attempting to utilize two components on a single page, but I keep encountering a 404 error. Here are my two .ts files: app.ts import {Component, View, bootstrap} from 'angular2/angular2'; import {events} f ...

Problem with dynamic page routes in Next.js (and using TypeScript)

Hi everyone, I'm currently learning next.js and I'm facing an issue while trying to set up a route like **pages/perfil/[name]** The problem I'm encountering is that the data fetched from an API call for this page is based on an id, but I wa ...

What is the callback function used for a child view in Backbone?

I have scoured the depths of Google in search of a solution to no avail. In my chatView, I am rendering a collectionView of messages (messagesView). However, I need to ensure that all messages are fetched and rendered before triggering a function to scrol ...

ng-class remains stagnant as ng-if dynamically updates when tab is no longer in focus

Implementing an interceptor to display a loader while making API calls can come with its challenges. In this case, two API requests are set at intervals of every 60 seconds using $interval. When the page is in focus, the loader functions correctly by showi ...

The Textbox control will dynamically adjust its width based on the length of the text

In ASP.NET, how can a Textbox control automatically adjust its width based on the text it receives from a database? ...

Combining Wordpress with the power of Ajax

I have set up a custom table in my MySQL database and added some sample data to test the query. The query works fine when run directly in the template, but I'm running into issues when trying to convert it into an AJAX request. It seems like the data ...

Experimenting with adding an anonymous function inside addListener - Angular Jasmine (Isolated Testing)

Recently, I received help from someone here with a function test. However, I am facing difficulty accessing a specific part of that function because it is an anonymous function inside an addListener. Despite reading the documentation thoroughly, I am unabl ...

Having issues with Protractor unable to locate CKEditor during testing proceedings

When working with Protractor on a non-Angular page, I am trying to locate the CKEditor instance in order to update the data. The following code snippet works in the Chrome console: CKEDITOR.instances.html_editor.setData("Hello") However, when I attempt t ...

What's stopping me from being able to "map" this collection of mongooses?

I have been attempting to map a group of user documents within mongoDB. Here's the code snippet I've written for this purpose. User.retrieveUsers = function() { return new Promise(async (resolve, reject) => { try { let ...

Using Fetch API in NextJS requires pressing the Enter key twice for it to work properly

The functionality of this component should display JSON data in the console log after entering input into the search bar and hitting the enter key. However, there is a lag where the data doesn't show until the enter key is pressed a second time. Addit ...

The toggleCategories function seems to be malfunctioning as it is only showing the sequence number as 0 in ReactJS

I am currently working on a portfolio using the React framework. One of the features I have implemented is a project page where multiple projects are displayed within tabs. However, I am facing some issues with the functionality. toggleCategories(){ ...

Troubleshooting the error "The 'listener' argument must be a function" in Node.js HTTP applications

I'm facing an issue resolving this error in my code. It works perfectly fine on my local environment, but once it reaches the 'http.get' call, it keeps throwing the error: "listener argument must be a function." Both Nodejs versions are iden ...