What is the best way to showcase the content from multiple uploaded files?

Question

What is the best way to showcase the content from multiple uploaded files?

Below is an example demonstrating how to display the contents of a single uploaded file.

.js

$scope.uploadFilename = function (files) {
          if (!files[0]) {
            return;
          }

          var reader = new FileReader();

          reader.onload = function (e) {
            var str = reader.result;
            var csv = str.split(/\n/);
            var headers = csv[0].split(',');
            var str_result = '';
            for (var i = 1; i < csv.length - 1; i++) {
              var curline = csv[i].split(',');
              var tmp = '' + curline[1];
              if (i == csv.length - 2) {
                str_result += tmp.split('"').join('');
              } else {
                str_result += tmp.split('"').join('') + '\n';
              }
            }
            angular.element('#upload_keywords_list').val(str_result);
            $scope.uploadedKeywordsCount = csv.length - 2;
          };
          reader.readAsText(files[0]);
        };

.html

<div class="chosefile">
              <div class="clearfix">
                <input type="file" name="file" class="pull-left" onchange="angular.element(this).scope().uploadFilename(this.files)">
<textarea id="upload_keywords_list" class="form-control" rows="10"></textarea>
              <div class="uploaded-keywords-count" ng-if="uploadedKeywordsCount > 0">
                <strong>Total number: </strong>{{ uploadedKeywordsCount }}
              </div>
            </div>
          </div>

I am looking to display the contents of multiple uploaded files. Could someone guide me on how to achieve this? Also, what is the process to update the total number value when modifying the textarea content that has been previously opened?

Thank you.

javascript angularjs

Answer 1

Answer №1

Hopefully, this solution is effective.

I have made modifications to your HTML by removing uploaded-keywords-count and textarea, and introducing a new div.

<div id="textAreaContainer"></div>

In addition, I have updated your script by enclosing the code within a for loop. This enhancement allows you to select multiple files either simultaneously or individually without any issues.

If you attempt to choose the same file again, a warning will be displayed, and the file selection will be rejected.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <div ng-app="fileApp" ng-controller="myCtrl">

    <script>
      var app = angular.module('fileApp', []);
      app.controller('myCtrl', function($scope) {
        var allFiles = [];
        $scope.uploadFilename = function (files) {
          if (!files[0]) {
            return;
          }

          cnt = files.length;
          for (var k = 0; k < cnt; k++) {
            if(!allFiles.includes(files[k].name)) {
              var reader = new FileReader();
              reader.fileName = files[k].name;
              allFiles.push(reader.fileName);
          reader.onload = function (e) {
            var str = e.target.result;
            var csv = str.split(/\n/);
            var headers = csv[0].split(',');
            var str_result = '';
            for (var i = 1; i < csv.length - 1; i++) {
              var curline = csv[i].split(',');
              var tmp = '' + curline[1];
              if (i == csv.length - 2) {
                str_result += tmp.split('"').join('');
              } else {
                str_result += tmp.split('"').join('') + '\n';
              }
            }
            $scope.uploadedKeywordsCount = csv.length - 2;
            var containerData = "";
            containerData += '<div id="fileContent' + k + '"><textarea>' + str_result + '</textarea>';
            containerData += '<span>' + $scope.uploadedKeywordsCount + '</span></div>'
            var containerHtml = $(containerData);
            angular.element('#textAreaContainer').append(containerHtml);
          };
          reader.readAsText(files[k]);
          //console.log(files[k]);
        } else {
          alert('File already exists');
        }

      }
    }
  });
      $(document).on('keyup', 'textarea', function(){
        $(this).closest("div").find('span').html($(this).val().split(/\n/).length);
      })
    </script>


    <div class="chosefile">
      <div class="clearfix">
        <input type="file" name="file" class="pull-left" onchange="angular.element(this).scope().uploadFilename(this.files)" multiple>
        <div id="textAreaContainer"></div>
      </div>
    </div>

  </div>

Additionally, I have included a new script to address your second query. Now, whenever you make edits in the textarea, the line count automatically adjusts.

Answer 2

Hopefully, this solution is effective.

I have made modifications to your HTML by removing uploaded-keywords-count and textarea, and introducing a new div.

<div id="textAreaContainer"></div>

In addition, I have updated your script by enclosing the code within a for loop. This enhancement allows you to select multiple files either simultaneously or individually without any issues.

If you attempt to choose the same file again, a warning will be displayed, and the file selection will be rejected.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <div ng-app="fileApp" ng-controller="myCtrl">

    <script>
      var app = angular.module('fileApp', []);
      app.controller('myCtrl', function($scope) {
        var allFiles = [];
        $scope.uploadFilename = function (files) {
          if (!files[0]) {
            return;
          }

          cnt = files.length;
          for (var k = 0; k < cnt; k++) {
            if(!allFiles.includes(files[k].name)) {
              var reader = new FileReader();
              reader.fileName = files[k].name;
              allFiles.push(reader.fileName);
          reader.onload = function (e) {
            var str = e.target.result;
            var csv = str.split(/\n/);
            var headers = csv[0].split(',');
            var str_result = '';
            for (var i = 1; i < csv.length - 1; i++) {
              var curline = csv[i].split(',');
              var tmp = '' + curline[1];
              if (i == csv.length - 2) {
                str_result += tmp.split('"').join('');
              } else {
                str_result += tmp.split('"').join('') + '\n';
              }
            }
            $scope.uploadedKeywordsCount = csv.length - 2;
            var containerData = "";
            containerData += '<div id="fileContent' + k + '"><textarea>' + str_result + '</textarea>';
            containerData += '<span>' + $scope.uploadedKeywordsCount + '</span></div>'
            var containerHtml = $(containerData);
            angular.element('#textAreaContainer').append(containerHtml);
          };
          reader.readAsText(files[k]);
          //console.log(files[k]);
        } else {
          alert('File already exists');
        }

      }
    }
  });
      $(document).on('keyup', 'textarea', function(){
        $(this).closest("div").find('span').html($(this).val().split(/\n/).length);
      })
    </script>


    <div class="chosefile">
      <div class="clearfix">
        <input type="file" name="file" class="pull-left" onchange="angular.element(this).scope().uploadFilename(this.files)" multiple>
        <div id="textAreaContainer"></div>
      </div>
    </div>

  </div>

Additionally, I have included a new script to address your second query. Now, whenever you make edits in the textarea, the line count automatically adjusts.

What is the best way to showcase the content from multiple uploaded files?

Answer №1

Similar questions

JavaScript animation for sequencing traffic lights

Associate an alternate attribute that is not displayed in the HTML component

Struggling to integrate the c3 chart library with Angular, encountering loading issues

What is the recommended way to emphasize an input field that contains validation errors using Trinidad (JSF)?

"Exploring the Power of ZF2 with Restful APIs and Image

Displaying a progress bar while fetching data in Vue: A step-by-step guide

sum inside the while loop

A guide to accessing the currently hovered element on a Line Chart with Recharts

Enhancing Your WordPress Menu with Customized Spans

Utilize the toString function along with the substring method within an ejs template

Choose an option from a list of items in a nested array by

Automatically rehydrate an instance using Angular and JavaScript

Navigating with router.push in Vue.js to the same path but with different query parameters

Encountering build errors in .xproj file when working with Type Script in ASP.Net Core

Tips for avoiding infinite re-render loop when updating state in React/Next.js

How can you hide all siblings following a button-wrapper and then bring them back into view by clicking on that same button?

How to retrieve an anchor element from a list using JavaScript

Manipulating rows [using an input field] within a table

Challenges faced with dividing a string in JavaScript

What is the code in CodeIgniter to retrieve the string 'Sugar & Jaggery, Salt' using <a>?