"Efficiently Adding Multiple Files in AngularJS - A Step-by-

I am currently using ngFileUpload to upload files, but it only allows me to upload one file at a time.

I would like to be able to upload both an Image File and a PDF File together. Is there a way to upload multiple files at once?

Any assistance or guidance on how to achieve this would be greatly appreciated.

(function () {
    'use strict';
    var app = angular.module('pageApp', ['ngFileUpload']);

    app.controller('MyCtrl', ['$scope', 'Upload', '$timeout', function ($scope, Upload, $timeout) {
        $scope.uploadPic = function (file) {
            file.upload = Upload.upload({

                url: 'save_form.php',
                data: {
                    file: file,
                    username: $scope.username
                },
            });

            file.upload.then(function (response) {
                $timeout(function () {
                    file.result = response.data;
                });
            }
        };

    }]);

})();
  <form name="myForm">    
      Profile Picture: <input type="file" ngf-select="" ng-model="picFile" name="file" ngf-accept="'image/*'">
      <br>
      Resume(.pdf): <input type="file" ngf-select="" ng-model="resumeFile" name="fileResume">
      <br>

      <button ng-disabled="!myForm.$valid" ng-click="uploadPic(picFile)">Submit</button>
  </form>

Answer №1

To streamline the process of uploading multiple files simultaneously, you can merge two input fields and include the 'multiple' attribute in the input tag. It is essential to ensure that your backend is capable of handling multiple file uploads and supports the necessary functionalities.

<form name="myForm">    
      Picture & Resume: <input type="file" ngf-select="" 
               ng-model="picFile" name="file"  ngf-pattern="'image/*,application/pdf'" multiple>
      <br>

      <button ng-disabled="!myForm.$valid" ng-click="uploadPic(picFile)">Submit</button>
  </form>

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

Using JavaScript, conceal a specific Div by examining the content within another Div

I am attempting to implement some logic using JavaScript. The goal is to hide the "cart-button" div if the innerHTML value of a div with the class "b-format" is set to Audio, otherwise hide the "more-button" div. However, for some reason this functionality ...

How to Deactivate the Default Selection in React-Select

Having trouble with the focus in a React Select dropdown. The first item always gets focused when opening the dropdown, despite passing various props without success. I checked their GitHub for related issues around autofocus but couldn't find a solut ...

Tips for Optimizing Navigation with Jquery Integration

I have implemented a dynamic navigation system using jQuery, where I load the navigation from a separate nav.html file to avoid updating it on every page manually. However, I am facing an issue with targeting elements in the loaded navigation to make them ...

Incorporating diverse objects in JavaScript through click events

In my Javascript code, I work with two arrays named "array1" and "array2". Initially, the currentArray is set to array1. However, when the user clicks on a certain button, the currentArray switches to array2, and then back to array1 if clicked again. Thi ...

"Looking for a quicker way to upload images without the hassle of a long input field? Learn how to use a glyphicon

Is there a way to use a symbol or glyphicon for uploading an image instead of having to use such a long input field? (Specifically for uploading a profile picture) I'd like the ability to click on the glyphicon and choose an image from my computer. T ...

Encountering an issue with Spring and AngularJS, as I am receiving an HTTP Status 404 error message

I'm encountering an HTTP Status 404 error within my controller. Server code @RequestMapping(value="/showMsg/", method=RequestMethod.GET,produces= { "application/json" })' public ResponseBody String show(){ HashMap hash = new HashMap(); ...

Angular displaying undefined for service

I have created a service for uploading images to a server, and I am encountering an issue when calling this service from my controller. The error message indicates that the function 'uploadFileToUrl' is undefined. Below is the code for my servic ...

How to make Bootstrap 4 navbar tabs collapse using card accordion functionality

Check out this interactive example: https://jsfiddle.net/dominijk/bLpach25/1/ The accordion layout I have set up consists of collapsible cards where opening one card causes the others to collapse. The tabs within each card are functioning properly. My go ...

Harness the power of the chessboard.js JavaScript library for enhancing your

I'm not very experienced with JavaScript. I'm trying to implement the chessboard.js library, but the chessboard I'm rendering is not showing the pieces, only the board itself. I followed the instructions provided here: How do I use chessboar ...

Is it possible to execute JavaScript in VSCode without the need for Node.js?

Is there a way to run JavaScript in VSCode using a school-issued laptop that does not allow the download of Node.js? I have searched for alternatives, but most tutorials recommend downloading Node.js. ...

Issue with commenting system: Ajax/PHP integration malfunctioning

I am facing an issue with my commenting system. The comments are getting inserted into the database, but they are not showing up immediately after clicking the submit button. I would like them to appear with a sliding effect right after submission. I susp ...

RequireJs is failing to load a script based on its name

Recently, I delved into the world of RequireJs to enhance my understanding. However, I encountered a hurdle while trying to load a JavaScript dependency using its custom shortened name. Despite my efforts, I can't seem to figure out what I'm doin ...

Forcibly altering the title name in HTML: a step-by-step guide

Currently, I am working on a project that consists of over 30 JS files and an index file. I recently changed the title of the page in the index file, but the new title only displays when I refresh the page. Once the refresh is complete, the old title reapp ...

Retrieving Specific Node Value in Array From XML Document

In my JavaScript function, I have a variable named "result". The value of the variable "result" is an XML. I need to create an array containing only the values of the opportunityid (highlighted in the image). How can I extract the particular node value ...

Having trouble configuring the routes on my MEAN Stack application

I'm currently working on a basic application using the MEAN stack, but I'm facing issues with my routes. When I access localhost:3000, it redirects me to the 404 error page instead of displaying the posts at localhost:3000/#/home as expected. It ...

Struggling with consolidating values in an array of objects - seeking assistance with Javascript

Currently, I am handling a project where I receive data in the form of an Object Array. My task is to merge values with the same key into one key and convert the values into an array of strings. Below is the sample data I am working with: inputArray = [ ...

Highly complex regular expressions in nth-check causing inefficiencies during npm installation of react-router-dom

Feeling new and inexperienced with how to react, I attempted to execute the command "npm i react-router-dom" but it ended up stopping the download process and displaying several errors. In my search for a solution, I stumbled upon this reference to some ...

Items expand and move seamlessly between two columns

My website features a Bootstrap accordion that I have organized into a two-column layout using the following CSS: #accordion { column-count: 2; } .card { margin: 0px 20px 20px 20px; break-inside: avoid-column; -webkit-column-break-inside: avoid; ...

How can I update values in $rootScope using AngularJS?

Can someone please help me figure out how to update variables in $rootScope within Angular? I have a slide-in sidebar that I want to customize based on user interactions with thumbnails. I believe the best way to achieve this is by using global values or $ ...

Encountered a deployment issue when trying to deploy an HTML application on Heroku due

After uploading an html application on GitHub, I encountered an error while attempting to deploy it on Heroku: No default language could be detected for this app. HINT: This happens when Heroku is unable to automatically determine the buildpack to use f ...