Uploading multiple files simultaneously with AngularJS through FTP

I've been attempting to utilize AngularJS for uploading multiple files, but for some reason, the values are not being stored in the model filestore.

HTML Code:

 <div ng-app="myApp">
   <div ng-repeat="file in filelist">
          <label>{{file.name}} </label> 
          <input type="file" ng-model="filestore[$index]" />
   </div>  
</div>

<div>
     <input type="button" value="submit" ng-click="savefiles(filestore)"/>
</div>

JavaScript:

 myApp.controller('uploadCtrl', function ($scope,$http) {

 //List of file names
 $scope.filelist = ["file1", "file2", "file3"];

 //Save file list
 $scope.savefilelist = function(filestore) {
    $http({
        method: 'POST',
        url: '/api/SaveFiles',
        data: filestore
    });
 };

})

Answer №1

http://example.com/custom-directive

Here is a great example showcasing how to implement a custom directive in your code.

app.directive("fileBind", function() {
  return function( scope, elm, attrs ) {
    elm.bind("change", function( evt ) {
      scope.$apply(function() {
        scope[ attrs.fileBind ] = evt.target.files;
      });
    });
  };
});

If you are looking to incorporate ng-repeat, here is an alternative solution.

http://example.com/ng-repeat-solution

  1. Consider using objects when working with bindings within ng-repeat loops.
  2. Utilize binding in the directive for easier realization of complex references.

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

Adjusting the alignment of Bootstrap navbar items upon clicking the toggle button

When I click the toggle button on a small screen, my navbar items appear below the search bar instead of aligning with the home and about elements. Below is an image depicting this issue: https://i.stack.imgur.com/4rabW.png Below is the HTML code structu ...

Using the data from two input fields, an ajax request is triggered to dynamically populate the jQuery autocomplete feature

I've been struggling with this issue for quite some time now. My goal is to pass 2 arguments (the values of 2 input fields in a form) in my ajax call so I can use them for a jQuery autocomplete feature (the search is based on a MySQL query using the v ...

What is the best way to ensure a specific section of a website remains visible and fixed at the bottom of the page

I want to set up a simple toolbar with divs and uls containing both anchors and tabs. The position of the toolbar needs to be fixed at the bottom of the page. <%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...

Transforming the CanvasRenderer into a WebGLRenderer

I'm interested in implementing a visual effect similar to the one demonstrated in the example here: To achieve this, I want to modify the renderer to use WebGLRenderer instead of CanvasRenderer by changing: renderer = new THREE.CanvasRenderer(); to ...

Sending asynchronous requests to handle data within various functions based on different links

I'm currently facing a major roadblock when it comes to resolving my issues with callbacks. I've gone through resources like How to return value from an asynchronous callback function? and How to return the response from an Ajax call?, among seve ...

Designing a versatile pop-up window with jQuery or JavaScript that functions seamlessly across all web browsers

I've encountered an issue with my code where it displays a popup message correctly in Chrome, but when testing it on Firefox and Edge, it creates a strange box at the end of the page instead. Here is the code snippet I'm referring to: var iframe ...

The most effective method for calculating overhead is through the utilization of synchronous techniques

I'm currently developing a nodeJS app that heavily relies on synchronous methods, particularly for file operations and spawning child processes. I am looking to assess the impact of these blocking main thread activities in terms of overhead. What woul ...

Step-by-step guide on populating input fields with JSON data for each row

As a beginner in Programming, I have been searching for an answer to the following problem on this site for days but haven't been able to figure it out yet. To explain briefly, there will be an input form where the user can define the number of rows ...

Unveiling the magic: Dynamically displaying or concealing fields in Angular Reactive forms based on conditions

In my current scenario, there are three types of users: 1. Admin with 3 fields: email, firstname, lastname. 2. Employee with 4 fields: email, firstname, lastname, contact. 3. Front Office with 5 fields: email, firstname, lastname, airline details, vendo ...

What could be causing my chessboard to not wrap around properly with flexbox?

I have been working on creating an 8x8 chessboard by following this example: https://codepen.io/sammyslamma/pen/gJeOwY .flex-container { display: flex; flex-flow: row; flex-wrap: wrap; ...

How can I display JSON data received from an AJAX request within a personalized modal dialogue box?

I am new to this and I want to implement a feature where I have a link to open a custom modal dialog (not a bootstrap modal) like this: <a href="#edit_quiz"></a> <div class="uk-modal" id="edit_quiz"> <div class="uk-modal-dialog"& ...

Enhancing List Page Functionality with AngularJS/MVC5 Search Feature

As I work on enhancing the List page, my main focus is on implementing a search feature. While the code below effectively displays data in a list format, I am uncertain about how to start incorporating a search functionality into this page. HTML: <bo ...

Can anyone suggest a way to iterate over an object and substitute spaces in the keys?

I need to iterate through a dynamically-created object that contains properties with values. The issue is that the property names in this dynamic object contain spaces, which are not allowed in JavaScript object properties. How can I loop through this ob ...

Looking to halt navigation in a Chrome browser immediately after performing a click action with Selenium?

Is there a way to prevent the browser from loading immediately after a click event? Are there any workarounds or JavaScript implementations for achieving this? ...

Maintaining the current image while awaiting the completion of the new image update

I have successfully implemented a script using setInterval along with the jQuery load function to periodically update an image tag. var refresh_days = setInterval(function() { $('#box_name').load("dynamic.php");}, 1000 ); While this setup wo ...

Tips for preventing click events from interfering with execution in React

On my screen, there is a specific image I am looking to prevent all actions while a process is running. When I trigger the Execute button, it initiates an API call that can take 4-5 minutes to complete. During this time, I need to restrict user interacti ...

Utilizing the real module instead of resorting to mock usage

I've configured Jest as follows: jest: { configure: { testEnvironment: 'jsdom', preset: 'ts-jest', transform: {...}, moduleNameMapper: { antd: '<rootDir>/__mocks__/antd/index.tsx&apo ...

Restore Bootstrap Dropdown values to their initial settings when clicked

I need a button that can reset all filter dropdown values to their default values. The current code I have only changes all values to "Filter" when reset, but I specifically need it to reset to "Car brand" and "Model". Here's my code: // set.... $(" ...

Tips on sending filter parameters from AngularJS to Spring RestController using @MatrixVariable

I’m struggling to figure out how to use $http.get in AngularJS to pass filter parameters. The URL is: http://localhost:8080/template/users/query;username=abcd;firstName=ding... The RestController looks like this: @RequestMapping(value={"/users/{query ...

Node JS Axios Network Error due to CORS Policy Restrictions

When attempting to make a put axios request, I encounter the following error: https://i.sstatic.net/aBQGI.png I have installed and enabled the CORS module in the server.js file, but it doesn't seem to be working. Additionally, there are no CORS head ...