Advertisement
  1. Code
  2. Angular

Cara Mengunggah dan Mengunduh File CSV Dengan AngularJS

Scroll to top
Read Time: 7 min

Indonesian (Bahasa Indonesia) translation by Diangr (you can also view the original English article)

Pos ini akan menunjukkan kepada Anda cara mengunggah data file CSV ke AngularJS, membaca data, dan kemudian mengonversinya ke JSON untuk diproses. Kemudian, anda akan melihat bagaimana melakukan semuanya secara terbalik dan mengunduh dump data CSV dari AngularJS.

File CSV lebih disukai karena kesederhanaannya. Mereka juga didukung oleh banyak jenis program dan menyediakan cara yang mudah untuk merepresentasikan data spreadsheet.

Persyaratan

Sebelum memulai tutorial ini, pastikan anda telah menginstal Node.js di komputer anda. Jika anda belum memilikinya, kunjungi situs website resmi dan instal.

Anda juga harus memiliki pemahaman dasar tentang teknologi berikut:

  • HTML
  • CSS
  • JavaScript

Jika anda sudah menginstal Node.js, periksa apakah anda memiliki Node dan NPM versi terbaru.

1
node -v
2
npm -v

Modul CSV dalam Angular

Ada beberapa cara memanipulasi CSV dalam Angular, dan mereka berisi:

  • Papa Parse: Papa Parse adalah parser CSV yang kuat yang mampu menguraikan string CSV dalam file kecil dan besar serta mengkonversi kembali ke JSON. Kami akan menggunakan pustaka ini dalam tutorial ini.
  • csvtojson: Ini adalah paket node yang juga mudah digunakan.
  • Pembaca Berkas: Ini digunakan untuk membaca isi file menggunakan objek File atau Blob untuk menentukan file yang akan dibaca. Namun, ini bukan cara yang efisien karena anda masih harus mengulang melalui semua baris CSV dan kemudian menghasilkan  JSON.stringify.

Memulai

Tujuan kami adalah untuk dapat melakukan hal-hal berikut:

  • unduh file CSV di sisi klien
  • unggah file CSV
  • baca file CSV
  • mengonversi data file CSV ke JSON untuk diproses

Antarmuka kami harus terlihat seperti ini:

Example app interfaceExample app interfaceExample app interface

Kita akan mulai dengan menulis kode HTML untuk antarmuka yang ditunjukkan di atas.

Buat folder bernama my_project, cd ke dalam folder proyek, dan buat dua file: home.html dan app.js.

1
mkdir my_project
2
cd my_project
3
touch home.html
4
touch app.js

Karena kita akan menggunakan modul Papa Parse, kunjungi situs resmi dan unduh librarynya. Selanjutnya, ekstrak konten dan simpan file papaparse.js dan papaparse.min.js di folder proyek anda. Struktur proyek anda akan terlihat seperti ini:

1
my_project/ 
2
  app.js
3
  home.html
4
  papaparse.js
5
  papaparse.min.js

Di bawah ini adalah kode HTML untuk membuat antarmuka kita. Simpan sebagai home.html.

1
<!DOCTYPE html ng-app="myApp" ng-strict-di="true">
2
<html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
3
4
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
5
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
6
<script src="papaparse.js"></script>
7
<script src="papaparse.min.js"></script>
8
<body ng-controller = "CsvCtrl">
9
10
<section class="content">
11
12
    <div class="row">
13
          <div class="col-md-12">
14
              <div class="panel-heading"><strong>BULK TOP UP</strong> <small></small></div>
15
              <div class="box box-info">
16
                <div class =  "instructions"> 
17
                <ol>
18
                  <li>The Excel file should contain three columns </li>
19
                  <li>The first column contains the <strong>Reference</strong></li>
20
                  <li>The second column contains the <strong>First name</strong></li>
21
                  <li>The third column contains the <strong>Last name </strong> </li>
22
                  <li>The second column contains the <strong>Date of Birth</strong></li>
23
                  <li>The third column contains the <strong>Sex</strong>of the person</li>
24
25
              </ol>
26
                <div class="box-body table-responsive">
27
                  <p>The column headers should be <strong>Reference</strong> ,<strong>First_name</strong> ,<strong>Last_name</strong>,<strong>Dob</strong>,<strong>Sex</strong></p>
28
                  <p>  A sample file is available for download</p>
29
                  <form>
30
                    <button data-ng-click="download()">Download CSV</button> 
31
                    </form>
32
               </div>
33
             </div>
34
                <div class="box-body table-responsive">
35
                    <hr>
36
                    <hr>
37
                    <!-- form start -->
38
                    <p>Your uploaded csv file will be shown to you in a preview  for Confirmation</p>
39
                    <form role="form" class="form-horizontal" name="bulkDirectForm" method="post" enctype="multipart/form-data" novalidate>
40
                      <div class="box-body">
41
                        <div id="messages" class="alert alert-success" data-ng-show="messages" data-ng-bind="messages"></div>
42
                        <div id="warning" class="alert alert-warning" data-ng-show="warning" data-ng-bind="warning"></div>
43
                        
44
                        <div class="form-group">
45
                          <div class="col-sm-10">
46
                            <input type="file" class="form-control" id="bulkDirectFile" placeholder="CSV file with phone numbers and amount" ng-model="prd.bulk_direct_file" required accept=".csv">
47
                          </div>
48
                          <div class="col-sm-2">
49
                            <button type="submit" class="btn btn-block btn-info" ng-hide="myVar" data-ng-click="submitForm(bulkDirectForm)">Upload!</button>
50
                          </div>
51
                          
52
53
                          <br>
54
                          <br>
55
                          
56
                  
57
                          <div class="col-sm-10" ng-show = title id ="Table">
58
                          <h5>Confirm file to be uploaded and Click the Proceed Button Below</h5>
59
                         
60
              
61
                          <div id="dvCSV"></div>
62
63
                          <br>
64
                          
65
                          <button type="button" class="btn btn-success" data-ng-click="add()">Proceed!</button>
66
                          </div>
67
68
69
                          
70
                        </div>
71
72
                      </div>
73
                    </form>
74
                     
75
                </div>
76
              </div>
77
          </div>
78
     </div>
79
80
81
</section>
82
83
</body>
84
</html>

Dalam kode di atas, kita menggunakan arahan ng-app untuk mendefinisikan aplikasi kita. Kemudian kita tambahkan library AngularJS dan jQuery ke halaman web kita serta sisa file skrip, yaitu app.js, papaparse.js, dan papaparse.min.js.

Kemudian kita tentukan pengontrol aplikasi dan mengikat kontrol HTML ke data aplikasi.

Unduh file CSV

Karena kita sudah memiliki antarmuka dengan tautan tempat pengguna dapat mengunduh file CSV, kita sekarang melanjutkan untuk menulis kode Angular yang berisi data yang akan diunduh, dan kemudian mengikatnya dengan kontrol HTML.

Kemudian kita membuat CSV yang sudah tersedia untuk diunduh di sisi klien.

Di app.js, inisialisasi aplikasi Angular dan tentukan pengontrol CsvCtrl.

1
'use strict';
2
3
4
/* App Module */
5
var app = angular.module("myApp", []);

Selanjutnya, tentukan data sampel dalam JSON dan ubah menjadi file CSV dengan bantuan modul Papa Parse.

1
app.controller("CsvCtrl", ["$scope", "$q", function($scope,$q) {
2
    
3
    var clearAlerts = function() {
4
      $scope.error = {}, $scope.warning = null
5
    };
6
      
7
    $scope.download = function(){
8
      var a = document.createElement("a");
9
      var json_pre = '[{"Reference":"1","First_name":"Lauri","Last_name":"Amerman","Dob":"1980","Sex":"F"},{"Reference":"2","First_name":"Rebbecca","Last_name":"Bellon","Dob":"1977","Sex":"F"},{"Reference":"3","First_name":"Stanley","Last_name":"Benton","Dob":"1984","Sex":"M"}]'
10
     
11
      var csv = Papa.unparse(json_pre);
12
13
      if (window.navigator.msSaveOrOpenBlob) {
14
        var blob = new Blob([decodeURIComponent(encodeURI(csv))], {
15
          type: "text/csv;charset=utf-8;"
16
        });
17
        navigator.msSaveBlob(blob, 'sample.csv');
18
      } else {
19
20
        a.href = 'data:attachment/csv;charset=utf-8,' + encodeURI(csv);
21
        a.target = '_blank';
22
        a.download = 'sample.csv';
23
        document.body.appendChild(a);
24
        a.click();
25
      }
26
    }
27
}]);

Membaca dan Mengunggah File CSV

Berikut adalah fungsi Angular yang digunakan untuk membaca dan mengunggah file CSV.

1
app.controller("CsvCtrl", ["$scope", "$q", function($scope,$q) {
2
    
3
    // ...  the rest of the code

4
    
5
    // Upload and read CSV function

6
    $scope.submitForm = function(form) {
7
        clearAlerts();
8
        var filename = document.getElementById("bulkDirectFile");
9
        if (filename.value.length < 1 ){
10
            ($scope.warning = "Please upload a file");
11
        } else {
12
            $scope.title = "Confirm file";
13
            var file = filename.files[0];
14
            console.log(file)
15
            var fileSize = 0;
16
            if (filename.files[0]) {
17
                 
18
                var reader = new FileReader();
19
                reader.onload = function (e) {
20
                    var table = $("<table />").css('width','100%');
21
                    
22
                    var rows = e.target.result.split("\n");
23
                    for (var i = 0; i < rows.length; i++) {
24
                        var row = $("<tr  />");
25
                        var cells = rows[i].split(",");
26
                        for (var j = 0; j < cells.length; j++) {
27
                            var cell = $("<td />").css('border','1px solid black');
28
                            cell.html(cells[j]);
29
                            row.append(cell);
30
                        }
31
                        table.append(row);
32
                    }
33
                    $("#dvCSV").html('');
34
                    $("#dvCSV").append(table);
35
                }
36
                
37
                reader.readAsText(filename.files[0]);
38
            
39
            }
40
            return false;
41
        }
42
    }
43
         
44
}]);

Di sini, kita mengonfirmasi apakah CSV valid dan tidak kosong. Jika kosong atau tidak ada file CSV yang diunggah, kita kasih pengguna pesan peringatan: "Silakan unggah sebuah file." Jika CSV valid, kami mengonversi data ke format tabel dan menyajikannya seperti yang ditunjukkan di bawah ini.

Mengubah File CSV ke JSON

Di bagian terakhir dari tutorial ini, yaitu mengkonversi data CSV ke format JSON (formulir yang dapat dibuat oleh API). Di bawah ini adalah fungsi yang mengubah data CSV menjadi JSON. Kita hanya akan mencetak data ke konsol karena kita tidak memiliki API untuk membuat data.

1
app.controller("CsvCtrl", ["$scope", "$q", function($scope,$q) {
2
    
3
    // ...

4
    
5
    //   Convert to JSON function

6
    $scope.add = function(){
7
        var Table = document.getElementById('Table');
8
        var file = document.getElementById("bulkDirectFile").files[0];
9
        $('.loading').show();
10
        var allResults = [];
11
        
12
        Papa.parse(file, {
13
            download: true,
14
            header: true,
15
            skipEmptyLines: true,
16
            error: function(err, file, inputElem, reason) { },
17
            complete: function(results) {
18
                allResults.push(results.data);
19
                console.log(results.data)
20
                
21
            }
22
          });   
23
        }
24
    }    
25
}]);

Pada fungsi di atas, kita mendapatkan file CSV dan menggunakan Papa Parse untuk mengonversinya ke JSON. Kode lengkapnya di app.js seperti dibawah ini.

Kesimpulan

Di pos ini, anda bisa melihat cara mengunduh dan mengunggah data CSV, dan cara mengurai data CSV ke dalam dan keluar dari JSON.

Saya harap tutorial ini telah membantu anda memahami cara memanipulasi file CSV dengan modul Papa Parse dan menabjubkannya library itu. Jangan ragu untuk bereksperimen dengan file yang lebih besar untuk melihat fungsionalitas penuh library Papa Parse.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.