How can I allow users to select multiple files with just one input?

Currently, I am able to retrieve a single file from a single input using the following code:

$scope.$on("fileSelected", function (event, args) {

            $scope.$apply(function () {            

                $scope.files.push(args.file);
            });
        });

I am curious if I can still get multiple files by using a "multiple" file input along with the event "fileSelected"???

<input type='file' id='tempFiles' multiple></input>

If that is possible, would it be something like this:

$scope.$on("fileSelected", function (event, args) {
                                    $scope.$apply(function () {            

                $scope.files.push(args.files);
            });         });

Answer №1

If you're looking to upload files in Angular, consider exploring Daniel Afarid's Angular File Upload.

Managing the Controller:

$scope.selectedFiles = [];
$scope.dataUrls = [];
$scope.model = 'test model';

$scope.onImageSelect = function($files) {

    $scope.selectedFiles['image'] = $files[0];

    var $file = $files[0];
    if (window.FileReader && $file.type.indexOf('image') > -1) {
        var fileReader = new FileReader();
        fileReader.readAsDataURL($files[0]);

        fileReader.onload = function(e) {
            $timeout(function() {
                $scope.dataUrls['image'] = e.target.result;
            });
        }
    }    

}

$scope.save_image =  function(){

    $upload.upload({
             data:$scope.model
              url: 'the/url',
              file: $scope.selectedFiles['image']

    }).then(//success and error callbacks);

}

For the View:

<input type="file" ng-file-select="onImageSelect($files)">
<br />
<img ng-show="dataUrls['image']" ng-src="{{dataUrls['image']}}">

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 is the best way to conceal a specific class of DIV within a container, and how can I also hide another DIV within the same container by

I have a DIV class containing around 10 elements within a container. I am looking to implement a feature where these elements are hidden and shown one by one every 15 seconds using jQuery with a smooth fadeOut() effect. Your assistance in achieving this wo ...

Swap out the HTML button element for text once the form is submitted

On the main page, I have a button that opens a modal when clicked. Inside the modal, there is a form with a submit button that closes the modal and returns to the main page. After closing the modal, I want to change the HTML button on the main page to plai ...

Utilize the dropdown menu to load JSON data and dynamically update the content of a div section on a website

I have been struggling to find a way to load JSON data from a drop down menu into a div area and refresh it with new results. While I was able to display the data in the div area without the dropdown menu, I am facing difficulty in fetching the required da ...

The addClass and removeClass functions seem to be malfunctioning

Hey everyone, this is my first time reaching out for help here. I looked through previous questions but couldn't find anything similar to my issue. I'm currently working on a corporate website using bootstrap3 in Brackets. I've been testing ...

Issue encountered when attempting to convert JSON string into a collection

My JSON string looks like this: "{\"Key\":3296,\"Value1\":\"Test1\",\"Value2\":\"City\",\"Value3\":\"TX\",\"Value4\":null,\"Value5\":null,\"Value6\":null}{ ...

Is there a way to tally the frequency of a specific property appearing in one array within another, and then transfer those matches into a separate array?

My goal is to match the fk_city with the $id of each city in the 'list_cities' array, and then calculate the number of occurrences. const list_cities = [ { $id: '15FG', name: 'Pittsburg' }, { $id: '50HS', name: & ...

Issue with FullPage.js scrollOverflow feature not properly accommodating loaded content

I am currently working on a full-page website and have opted to utilize the Fullpage.js plugin. However, I seem to be facing some challenges when it comes to loading content through an AJAX request. The pages are being populated with JSON content, but for ...

What role does the "deep" parameter serve when declaring a watcher in VueJS?

I recently discovered a feature in Vue.js called watchers while working on my web app. As I was exploring the API documentation, I came across a flag known as deep. This flag caught my attention because it defaults to false. I'm curious to know what s ...

"Sequencing time with Postgres, manipulating views with Angular

I am encountering issues with displaying graphs in AngularJS. My backend is written in nodeJS and includes an aggregator as a buffer for data received from netdata, which is then inserted into the database using a cron job. Now, with a new client request, ...

Can you tell me how to display the currently utilized Node.js version and path within npm?

I’m encountering a similar issue to the one discussed in this Stackoverflow thread: SyntaxError: Use of const in strict mode?. However, my problem arises when attempting to install Flux. I followed the steps outlined in the linked Stackoverflow question ...

Tips for effectively managing loading state within redux toolkit crud operations

Seeking guidance on efficiently managing the loading state in redux-toolkit. Within my slice, I have functionalities to create a post, delete a post, and fetch all posts. It appears that each operation requires handling a loading state. For instance, disp ...

Demonstrate how to modify all elements of an array in AngularJS using a query

Is there a way I can utilize AngularJS to develop a formula for modifying the value assigned to each invoices.items item_name field? invoices: { _id: "78327837" name: "ajay" invoice_no: "23" items: [ 0: { item_name: "nasm" quantity: "god" }] } ...

What is the best way to transform a collection of items into FormData?

In my current project, I have a JavaScript array structured as follows: var items = [{ ID: "1" count:'1', File: (binary file) }, { ID: "2" count:'2', File: (binary file) } ] My goal is to ...

Restarting a JavaScript function upon switching views in Vue.js

I am new to working with Vue.js and I have a Laravel app that utilizes it. One issue I am facing is that when the homepage is loading, all elements like owl carousel and rev slider are initialized. However, if I navigate to other routes such as contact or ...

Guide to customizing the default scrollbar colors in Nextjs

When browsing websites like tailwindcss.com or https://developer.mozilla.org/ in Chrome and Firefox, you may have noticed that they utilize the default scrollbar style but allow users to change its colors through a dark/light mode button. The appearance of ...

Find the nearest iframe relative to a parent element

I am attempting to find the nearest iframe element to a parent element in order to pinpoint the specific iframe that I want to customize using CSS: <div class ="accroche"> <iframe></iframe> <iframe></iframe> &l ...

Struggling to make cookies stick in IE9

Here is the code snippet I am currently using: <script> var time = new Date(); time.setFullYear(time.getFullYear() + 1, time.getMonth(), time.getDay()); expires = ";expires=" + time.toGMTString(); document.write(expires); doc ...

What could be causing the React-Router-Dom Outlet to not show the component?

I am working on a component that houses four different components. const ProtectedRoute = () => { return ( <> <Header /> <div className='flex h-screen overflow-hidden'> <div className="md:block h ...

Paste a data point from an Excel spreadsheet into a JavaScript script

I'm encountering a major challenge. Currently, I am creating a login process for a client and here is the approach I have taken: function Jump(pal){ if (pal=='10528'){window.open('http://www.google.es','_parent')} Subs ...

Ways to retrieve the checkbox value using PHP in conjunction with XML

I am currently in the process of learning PHP, XML, AJAX, and other related technologies. I have a form that is working fine for the most part, but I am facing an issue with passing the value/state of a checkbox to my PHP script. It's worth mentionin ...