What is the method for utilizing AngularJS to access the HTML input FileUpload FileList object?

I am looking to retrieve the values of a FileList object after selecting files using an HTML input FileUpload element. Although I can see the FileList object in the console window when I console.log it, I am facing challenges accessing the values using AngularJS.

Below is the code snippet in question:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>

<div ng-app="myApp" ng-controller="MyCtrl">

<input type="file" id="myFile" multiple size="50" ng-model="file" onchange="angular.element(this).scope().myFunction()">

<p id="demo" ng-repeat="file in fileList">
  Name: {{file.name}} </br>
  Type: {{file.type}} </br>
</p>
{{fileList}}

</div>
<script>
var app = angular.module('myApp', []);

app.controller('MyCtrl', ['$scope', function($scope){
 $scope.myFunction = function(){
    var x = document.getElementById("myFile");
    $scope.fileList = x.files;
    console.log($scope.fileList); 
 };
}]);

</script>
</body>
</html>

Answer №1

If you're looking for a convenient way to handle files, I highly recommend checking out the API provided by this repository.

Take a look at the usage section for some practical examples, including guidance on working with multiple files.

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 the issue of this JQuery dropdown plugin not functioning properly on multiple dropdowns?

I have implemented a JQuery plugin for dropdown menus that can be found at the following link: https://code.google.com/p/select-box/ Currently, I am facing an issue where the script only seems to work for the first dropdown menu out of 4. I am unsure abo ...

ReactJs: Struggling to programmatically set focus on an element with React.createRef()

Looking to detect when a user clicks on an arrow using the keyboard? I stumbled upon the Arrow Keys React react module. To make it work, you need to call the focus method on a specific element. Manually clicking on an element does the trick: https://i.s ...

Convert a string to a scope object using Angular

Suppose there is a string with the value 'order.buyer.address.street' and an order object exists on the scope. How can I access the address object from this? Is there any Angular function like $parse, that could help in retrieving the address ob ...

Having difficulty retrieving a dropdown value with reactjs

Seeking assistance with retrieving dropdown values in ReactJS. Despite attempting multiple methods, I have been unsuccessful in obtaining the values. Can someone provide guidance on extracting these values? Below is a snippet of my code: <Grid container ...

Can test files be placed under the pages directory in a Next.js project?

Currently, I am in the process of writing integration tests for the API routes within a Next.js application. One question that has arisen is whether it would be problematic to place the index.test.ts file under the /pages directory. My preference leans tow ...

What is the best way to create a command that updates the status in Discord using discord.js?

I'm currently working on a command for my Discord bot using discord.js. The purpose of this command is to change the bot's status whenever an admin of the server triggers it. I've attempted to create the command, but unfortunately, it's ...

Retrieving JSON information using Angular.js

I have been struggling to fetch JSON data from a URL using the code provided below. Unfortunately, it seems that the data is not being populated as expected. Despite trying various approaches, nothing seems to work out successfully. Below is the basic code ...

Step-by-step guide on sorting WordPress posts by a custom field date

I've created an event sidebar section that will only show the next 3 upcoming events. I have successfully set up the custom post type and custom fields, but I am struggling to figure out how to order the posts based on the start date of the events, wh ...

The function _plugins_vuetify__WEBPACK_IMPORTED_MODULE_136__.default is not usable as a constructor

I have created a Vue application using vue cli 3 and incorporated Vuetify. To optimize the size of my bundle, I decided to modify the way Vuetify is imported: The versions I am working with are vuetify 1.5.5 and vue 3.7.0 import Vue from 'vue'; ...

Utilizing Angular JS to Grab Input from Textbox and Apply it as Background Color

<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <link rel="stylesheet" href="D:\Mano\Angular\Ex1\styles.css"> <body ng-app="myApp" ng- ...

What is the process for retrieving input values in Angular JS?

When using Angular JS, inputs can be created. <input type="text"> <input type="text"> How can I retrieve values from each input and send them to the server? I attempted: <input type="text" ng-model="typeInput"> However, I am only abl ...

Is it possible to perform direct URL searches using react-router-dom?

Encountering an issue when attempting to directly copy a route, resulting in the following error: Error: Cannot Access / home Despite utilizing various methods such as browserHistory, I am unable to successfully render views when navigating with menu i ...

Make sure to remain in the same division area when refreshing the page

Whenever I click the next button and move to step 2, I want the page to stay on the same div even after reloading. The two divs used are join_form_1 and join_form_2 Currently, when I reload the page, it reverts back to the first div. Is there a way to e ...

Incorporate Aria Label into a Website Link

Currently working on enhancing website accessibility. I have identified a close menu button that lacks an Aria Label, and my goal is to rectify this using JavaScript. Although I am utilizing the script below to target the specific ID and add the attribute ...

Verify if a checkbox is selected upon loading the page

Hey there, I have a jQuery change function set up to turn an input text box grey and read-only when a user selects a checkbox. However, I'm interested in adding a check on page load to see if the checkbox is already selected. Any suggestions for enhan ...

Ways to retrieve information when text is modified and a dropdown is selected within an input field

I have an input field with a text box and a dropdown. My goal is to trigger data based on text changes in one method, while using another method for the dropdown. Check out the code below. const allList = [ { id: "1", value: "Fruits" ...

When you hit the enter key in a text input field in JavaScript, it triggers a specific function

http://codepen.io/abdulahhamzic/pen/YqMQwB Is there a way to make it so that when I hit the enter key on a text input, it triggers a specific function? I attempted to achieve this using the following code: <input type="text" onkeypress=" ...

Trigger a series of child functions upon clicking the parent button

I am facing an issue where I am attempting to trigger the functions of each child component from a button click event on the parent component. I have tried using props and setting up a new function in the componentDidMount lifecycle method, but only the la ...

Display a text over a full-screen HTML5 video

Is there a way to display text on a fullscreen video in HTML? I have tried using absolute positioning for the text and relative/fixed/none positioning for the video, but it does not work when the video is in fullscreen mode. I also attempted to call the ...

The controller function is not triggered if the user does not have administrator privileges

I have a code snippet in which my controller function is not being triggered for users who do not have the role of "Admin". Can someone help me identify where I went wrong? Just to clarify, the controller function works fine for users with the role of "Adm ...