Tips for uploading a file to an Angular component and transmitting it through HTTP

Currently working on a project that involves the following files:

app.component.html

<div>
    <input type="file" ([ngModel])="file" accept="application/pdf" onChange="change()">
</div>

app.module.ts:

file: File = null;

change(){
    console.log(file);
}

Despite setting up the file input, nothing happens when I select a PDF file. I've searched for solutions but haven't found anything useful. My main goal is to send this selected file via Http, at the very least sending the file name. The project is built with Angular4 using npm.

Answer №1

Give this a shot.

    <div>
        <input type="file" ([ngModel])="file" accept="application/pdf" (change)="fileChange($event)">
    </div>



    function fileChange(fileInput: any){
          if (fileInput.target.files && fileInput.target.files[0]) {                
                console.log(fileInput.target.files && fileInput.target.files[0]);
          }
    }

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

What could be causing a timepiece to be one tick off in vue.js?

I am looking to synchronize the height of one element with another, where the content in the second element changes dynamically. Below is an example code snippet (also available on JSFiddle): var vm = new Vue({ el: "#root", data: { growingTex ...

`Is it time to persist the reducer in redux-persist?`

The redux-persist library offers a way to save the redux state tree in storage and reload it when reopening the app. I understand the importance of restoring the state tree due to its valuable data, but I am puzzled by the concept of persisting reducers w ...

Updating a value using jQuery AJAX techniques

Using jQuery AJAX, I am loading the content of a page in this way: $(document).ready(function(){ $('#next').click(function(event){ $.ajax({ url: "load.php?start="+$('#lastid').text(), success: function(html){ $("#results"). ...

Setting a custom color for a *.obj model in three.js when no *.mtl file is provided: How to do it?

When working with models in *.obj format that do not have material files (*.mtl files), I have noticed that some online services like and display them correctly. However, in my project, I am experiencing issues as per the three.js documentation, where th ...

Updates made in MobX store are not displaying in the web browser

Why are the data changes not reflecting in the view after the api call? Here is the code snippet that might help: store.js import axios from 'axios'; import {encrypt, decrypt} from '../utils/pgp.js' import {observable, action, compute ...

Guide to setting the ng-selected value within AngularJS

I am currently working on a project where I have a select element in my AngularJS application. I am populating the options using JSON values with ng-repeat, and I want to display the first value from the JSON as selected by default. I have tried two diffe ...

New feature in jQuery inputmask enables placeholder text to be retained

I have integrated the inputmask feature from https://github.com/RobinHerbots/jquery.inputmask in my project, and I am applying the mask to all textboxes with the class "date". However, I am encountering a problem where if the user leaves one or more letter ...

Steps for sending Ajax data to your server in order to make changes to your SharePoint list information

After spending a considerable amount of time working on my DataTable, I've managed to incorporate all the necessary functionalities except for one. Currently, my table retrieves data from a SharePoint list through an AJAX "GET" Request and organizes i ...

Relocating the Asp.Net WebAPI to its own domain apart from the Asp.Net MVC site in preparation for the AngularJS

We currently have an Asp.Net MVC 5.0 project that utilizes AngularJS for the front end. The project includes a WebAPI Controller within the same project and is deployed on the same website. This application was created using the Individual User Account pro ...

HTML5 Audio using AudioJS may not function reliably when loaded remotely

I have been encountering frustrating issues with loading audio tags for a while now. Despite spending nearly two weeks trying to solve the problems, every fix seems to create another one. My webpage includes an < audio > tag that utilizes audio.js t ...

Combining two objects by aligning their keys in JavaScript

I have two simple objects that look like this. var obj1 = { "data": { "Category": "OUTFLOWS", "Opening": 3213.11, "Mar16": 3213.12, "Apr16": 3148.13, "May16": 3148.14, "Jun16" ...

Clicking on a link with an onclick method renders selenium ineffective in producing any action

The specified element is: <a href="#" onclick="submitViaAjax(null, url);return false;">Add</a> After using element.click() to try clicking the link, the onclick method fails to execute. Is there a way to ensure the method is executed success ...

Tips for resolving the issue of "Warning: validateDOMNesting(...): <div> cannot be a child of <tbody>"

Users list is passed as a prop to the UserItem Component in order to iterate over the user list and display them on a table. The list is being displayed correctly, and there are no divs in the render return, but an error persists: tried many solutions fou ...

Is it feasible to implement multiple selection columns in ng-grid, such as columns with checkboxes and radio buttons?

I'm in the process of building a table utilizing ng-grid (still learning about angularjs and ng-grid). The table should have the following columns: A column for checkbox selection. A column for radio button selection. Additional columns for data. H ...

Is it true that JavaScript Date.parse doesn't recognize Alaska Timezones?

When using JavaScript's Date.parse, it handles Pacific Time without any issues: Date.parse('June 20 2015 10:22 PDT') However, it encounters issues with Alaska Time: Date.parse('June 20 2015 10:22 AKDT') Does anyone have a relia ...

Even with the text field populated and clearly existing, Firefox is still throwing a null error when trying to retrieve it using

Hey there! I'm currently working on a sample HTML page and I'm facing an issue with retrieving data from a text field. No matter what I try, I keep encountering the following error: TypeError: document.getElementById(...) is null Let me share t ...

tips for sending a chosen item to the Vujes API

How can I send the selected item from a dropdown to an API in Vue.js? <select :v-model="selectedRole" class="custSelect"> <option v-for="option in options" v-bind:value="option.value"> {{option.role}} </option> ...

Assigning a value to a variable outside of a function in AngularJS using $on: Is it possible?

Before calling $on, I need to assign the value of $scope.attestorObj.riskAssessmentRoleAsgnKey to a global variable called roleAsgnKy. I am new to angularJS and would appreciate any help on how to achieve this. This is what I have tried so far... In main ...

Combining two AngularJS scopes into one without merging them

I'm attempting to merge two scopes into one with a unique set of labels. I'm not sure if this is doable, but here's where my code stands at the moment. .controller('eventsCtrl', ['$scope', '$rootScope', &apos ...

How do I combine Firefox binary specification with adding the Firebug extension when using Selenium?

Presently I am utilizing the code below. var co = require('co'); var WebDriver = require('selenium-webdriver'); var SeleniumServer = require('selenium-webdriver/remote').SeleniumServer; co(function *() { // async var ser ...