demo.html 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="tarball.js"></script>
  5. <script>
  6. function load() {
  7. let $elem = document.getElementById("tar-file-input");
  8. let tarFile = $elem.files[0];
  9. let tar = new tarball.TarReader();
  10. let $fileList = document.getElementById('file-list');
  11. $fileList.innerHTML = "";
  12. tar.readFile(tarFile).then(function(fileInfo) {
  13. for(let i = 0; i < fileInfo.length; i++) {
  14. let file_name = fileInfo[i].name;
  15. console.log("file name: ", file_name);
  16. console.log("file size: ", fileInfo[i].size);
  17. console.log("file type: ", fileInfo[i].type);
  18. if(file_name.indexOf(".json") >= 0 || file_name.indexOf(".txt") >= 0) {
  19. console.log(tar.getTextFile(file_name));
  20. }
  21. if(fileInfo[i].type == "file") {
  22. let blob = tar.getFileBlob(file_name);
  23. let fileUrl = window.URL.createObjectURL(blob);
  24. $fileList.innerHTML += "<li><a href='" + fileUrl + "' download='" + file_name + "'>" + file_name + "</a></li>";
  25. }
  26. }
  27. }, function(err) {
  28. console.log("error:", err);
  29. });
  30. }
  31. function generate() {
  32. let tar = new tarball.TarWriter();
  33. let $elem = document.getElementById("source-files-input");
  34. let files = $elem.files;
  35. for(let fileIdx = 0; fileIdx < files.length; fileIdx++) {
  36. tar.addFile($elem.files[fileIdx].name, $elem.files[fileIdx]);
  37. }
  38. tar.download("tarball.tar");
  39. }
  40. </script>
  41. </head>
  42. <body>
  43. <h1>tarballjs</h1>
  44. <hr/>
  45. <h2>Read .tar</h2>
  46. <p>File to extract: <input type="file" id="tar-file-input" onchange="load();"/><input type="button" value="Extract" onclick="load();"/></p>
  47. <br/>
  48. <p>Files:</p>
  49. <ul id="file-list">
  50. </ul>
  51. </p>
  52. <hr/>
  53. <h2>Generate .tar</h2>
  54. <p>Load File(s): <input type="file" id="source-files-input" multiple/><input type="button" value="Generate" onclick="generate();"/></p>
  55. <hr/>
  56. <a href="https://github.com/ankitrohatgi/tarballjs">https://github.com/ankitrohatgi/tarballjs</a>
  57. </body>
  58. </html>