Login
Read, Edit, Download File menggunakan Javascript tanpa Serverside

Read, Edit, Download File menggunakan Javascript tanpa Serverside

Hallo sob, barusan saya menemukan 2 tutorial yang mantap di internet yaitu:

  1. Read Text Files Using the JavaScript FileReader  yap cara melihat isi konten file menggunakan FileReader javascript. Jadi kita ga perlu mengupload filenya terlebihdahulu ke server, misalnya menggunakan PHP lalu untuk menampilkannya menggunakan fungsi file_get_contents(). Namun disimpan di local storage, berikut kodenya:

    <input type="file" id="fileinput" />
    <script type="text/javascript">
      function readSingleFile(evt) {
        //Retrieve the first (and only!) File from the FileList object
        var f = evt.target.files[0]; 
    
        if (f) {
          var r = new FileReader();
          r.onload = function(e) { 
    	      var contents = e.target.result;
            alert( "Got the file.n" 
                  +"name: " + f.name + "n"
                  +"type: " + f.type + "n"
                  +"size: " + f.size + " bytesn"
                  + "starts with: " + contents.substr(1, contents.indexOf("n"))
            );  
          }
          r.readAsText(f);
        } else { 
          alert("Failed to load file");
        }
      }
    
      document.getElementById('fileinput').addEventListener('change', readSingleFile, false);
    </script>
  2. Blob saving  yaitu menggunakan data blob untuk menyimpan secara lokal dan kemudian mendownloadnya. Seperti contoh di atas, ini juga tidak memerlukan serverside untuk mengedit dan menyimpan isi content file. Berikut kodenya:

    var saveData = (function () {
      var a = document.createElement("a");
      document.body.appendChild(a);
      a.style = "display: none";
      return function (data, fileName) {
      var json = JSON.stringify(data),
      blob = new Blob([json], {type: "octet/stream"}),
      url = window.URL.createObjectURL(blob);
      a.href = url;
      a.download = fileName;
      a.click();
      window.URL.revokeObjectURL(url);
      };
    }());

    var data = { x: 42, s: "hello, world", d: new Date() },
      fileName = "my-download.json";

    saveData(data, fileName);

Mantap bukan.. berikut contoh kode yang saya buat dengan menggabungkan 2 kode di atas. Yaitu read file, edit file lalau donwload file:

Cara ini juga saya implementasikan di Aplikasi/Tools Subtitle Synchronization yang saya buat. Sekian semoga bermanfaat.. :)