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

Personalized HTML selection list

Iterate through the loop to add data to the table

Choosing multiple values in the selectize plugin from the controller: A step-by-step guide

Using backslashes to escape JSON values within a value in Angular

NestJS: Specify the data type for @Body()

Tips for isolating data on the current page:

My browser isn't triggering the jQuery change event, although it does work in jsfiddle

What is the best way to adjust the specific scope of every element generated by ng-repeat within a directive?

Guide on adjusting PHP variable values and updating functions with ajax requests

An alternative method for storing data in HTML that is more effective than using hidden fields

Incremental migration to Next.js within the current React application

What confusion do I have regarding resolving promises in Angular's state management?

Error in the Angular-UI calendar

Press the [Submit] button to conceal DIV Container 1, reveal DIV Container 2, and populate DIVs discovered in a .PHP file within DIV Container 2

Modify the text inside a div based on the navigation of another div

Incorporating jquery-ui Datepicker with dynamic text input functionality

Guide on retrieving POST data in sveltekit

Express.js experienced a 404 error when processing POST requests

Implementing the Applet Param Tag using JavaScript or jQuery

Can you explain the distinction between the GenerateSW and InjectManifest choices within the vue ui pwd configuration?