What is the best way to upload multiple files using AngularJS?

Question

What is the best way to upload multiple files using AngularJS?

Seeking assistance with uploading multiple files using AngularJS... Any advice?

I currently have code that only allows for the upload of a single file. How can I modify it to support multiple file uploads?

Below is my HTML code snippet:

 <uib-tab index="5" heading="{{'uploadFile' | translate}}" select="tab.tabName = 'uploadFile'">
    <div class="form-group">
        <div class="row">
            <div class="col-md-12">
                <span class="dicom_uploader_title">{{'fileToUpload' | translate}}</span>
                <input type="file" class="dicom_uploader_input"  file-model="myFile" accept="*" multiple />
                <button ng-click="uploadFileNotDicom();"  class="btn btn-default">{{'uploadFile' | translate}}</button>
            </div>
        </div>
    </div>
    <div>
        <h4>{{'otherFilesForPatient' | translate}}</h4>
        <button ng-repeat="otherFile in otherFiles" class="btn btn-flat margin-item" ng-click="getDicomFile(otherFile.id,$index)" >{{otherFile.file_name}}.{{otherFile.extention}}</button>
    </div>
</uib-tab>

Here is a snippet of my AngularJS code:


$scope.uploadFileNotDicom = function(){
    var file = $scope.myFile;
    UploadFileService.upload_file(file,null,$scope.patientID).then(function(response){
        // Code for displaying success modal
    },function(err){
        // Code for displaying error modal
    })
};

Snippet from the UploadFileService service :


// Code for UploadFileService utilizing Angular

And here is an excerpt from my Yii2 PHP code snippet:


public function actionCreateFiles()
{
    // Code for handling file uploads in Yii2
}

Thank you!

javascript angularjs yii2

Answer 1

Answer №1

It seems that the fileModel directive is not properly handling multiple file bindings upon change events.

Below is a functional example where the fileModel directive updates the model when there is a change. In the uploadFileService service, the files are added to the FormData object.

angular.module('app', [])
  .controller('uploadCTrl', uploadCTrl)
  .directive('fileModel', fileModelDirective)
  .service('uploadFileService', uploadFileService);

// Controller
uploadCTrl.$inject = ['uploadFileService'];

function uploadCTrl(uploadFileService) {
  var vm = this;
  vm.files = [];
  vm.upload = upload;

  function upload() {
    uploadFileService.upload(vm.files);
  }
}

// Directive
fileModelDirective.$inject = ['$parse'];

function fileModelDirective($parse) {
  return {
    restrict: 'A',
    link: function(scope, el, attrs) {

      var
        filesModel = $parse(attrs.fileModel),
        filesSet = filesModel.assign;

      el.bind('change', function() {

        var files = [];
        angular.forEach(el[0].files, function(item) {

          files.push({
            name: item.name,
            size: item.size,
            url: URL.createObjectURL(item),
            _file: item
          });

          scope.$apply(function() {
            filesSet(scope, files);
          });

        });

      });

    }
  }
}

// Service
uploadFileService.$inject = ['$http'];
function uploadFileService($http) {
  var _form
  Data = new FormData();
  var service = {
    upload: upload
  }

  return service;

  function upload(files) {
    _formData = new FormData();

    angular.forEach(files, function(file) {
      _formData.append('files', file._file, file.name);
    });
    
    // Post '_formData'
    console.log(_formData.getAll('files'));

  }

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>

<body ng-app="app">

  <div ng-controller="uploadCTrl as up">
    <form>
      <input type="file" file-model="up.files" multiple />
      <br>
      <br>
      <button ng-click="up.upload()">UPLOAD</button>
    </form>
  </div>

</body>

Answer 2

It seems that the fileModel directive is not properly handling multiple file bindings upon change events.

Below is a functional example where the fileModel directive updates the model when there is a change. In the uploadFileService service, the files are added to the FormData object.

angular.module('app', [])
  .controller('uploadCTrl', uploadCTrl)
  .directive('fileModel', fileModelDirective)
  .service('uploadFileService', uploadFileService);

// Controller
uploadCTrl.$inject = ['uploadFileService'];

function uploadCTrl(uploadFileService) {
  var vm = this;
  vm.files = [];
  vm.upload = upload;

  function upload() {
    uploadFileService.upload(vm.files);
  }
}

// Directive
fileModelDirective.$inject = ['$parse'];

function fileModelDirective($parse) {
  return {
    restrict: 'A',
    link: function(scope, el, attrs) {

      var
        filesModel = $parse(attrs.fileModel),
        filesSet = filesModel.assign;

      el.bind('change', function() {

        var files = [];
        angular.forEach(el[0].files, function(item) {

          files.push({
            name: item.name,
            size: item.size,
            url: URL.createObjectURL(item),
            _file: item
          });

          scope.$apply(function() {
            filesSet(scope, files);
          });

        });

      });

    }
  }
}

// Service
uploadFileService.$inject = ['$http'];
function uploadFileService($http) {
  var _form
  Data = new FormData();
  var service = {
    upload: upload
  }

  return service;

  function upload(files) {
    _formData = new FormData();

    angular.forEach(files, function(file) {
      _formData.append('files', file._file, file.name);
    });
    
    // Post '_formData'
    console.log(_formData.getAll('files'));

  }

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>

<body ng-app="app">

  <div ng-controller="uploadCTrl as up">
    <form>
      <input type="file" file-model="up.files" multiple />
      <br>
      <br>
      <button ng-click="up.upload()">UPLOAD</button>
    </form>
  </div>

</body>

What is the best way to upload multiple files using AngularJS?

Answer №1

Similar questions

Is there a way for my code to detect when a function and a timeout are in progress?

Issue with my "message.reply" function malfunctioning in Discord.JS

What is the method to retrieve the total number of days in a moment-jalaali using NodeJS?

ERROR: Expo TaskManager Notifications [TypeError: Attempting to call an undefined function (near '...Notifications.presentLocalNotificationAsync...')]

error in routing using koa-router with koa

Is it correct to use React Router's useNavigate with a useEffect hook for navigation?

Guide to updating information in Firestore using Node.js, embedded in a map array

Error encountered during Jest snapshot testing: Attempting to destructure a non-iterable object which is invalid

Problem Encountered with Kendo Angular Grid during npm Installation

Enhancing infinite scroll functionality with ajax integration

Guide to implementing PCF (SOFT) shadows with three.js

The reducer I have is inexplicably returning undefined even though I'm certain it was added to combineReducers

Removing items in vue.js

I'm currently working with ReactJS and attempting to retrieve JSON data from a REST API in JIRA, but I'm facing challenges in achieving this

Enhancing the efficiency of nested ajax calls loop

Error: Unable to locate module: 'material-ui/styles/colors'

Expanding functionality: Steps to integrating a new endpoint into your AWS Amplify Express Server

Maximizing Code Reusability in Angular: Leveraging Services and Controllers

Test a JavaScript function within an Angular service using the Jasmine framework

Utilizing Numerous JavaScript Functions within jQuery