Posted By

Dmix on 07/29/14


Tagged

javascript file system in Development demos


Versions (?)

File System and JavaScript. Processing Files in Browser


 / Published in: JavaScript
 

URL: http://xbsoftware.com/blog/file-system-javascript-processing-files-browser/

This article is about processing files in a browser. It explains how you can read and change files data, drag-and-drop files to/from browser, parse excel and pdf on the client side without server.This article also includes caching media data and playing them offline.

  1. var template = "<div><span>Name: </span><span>{{Name}}</span></div><div><span>Size: </span><span>{{Size}}</span></div><div><span>Data: </span><span>{{Data}}</span></div>",
  2. data = document.getElementById("fileData"),
  3. preventDefault = function(e){
  4. e.preventDefault();
  5. },
  6. highlight = {
  7. add: function(e){
  8. preventDefault(e);
  9. e.target.classList.add("hoverClass");
  10. },
  11. remove: function(e){
  12. preventDefault(e);
  13. e.target.classList.remove("hoverClass");
  14. }
  15. },
  16. uploader = document.getElementById("fileElement");
  17.  
  18. if (window.FileReader){
  19. uploader.addEventListener("dragover", highlight.add, false);
  20. uploader.addEventListener("mouseout", highlight.remove, false);
  21. uploader.addEventListener("drop", function(e){
  22. var file = e.dataTransfer.files[0],
  23. fileReader = new FileReader();
  24.  
  25. if (file) {
  26. if (fileReader){
  27. fileReader.addEventListener("loadend", function(e){
  28. data.innerHTML = template.replace("{{Name}}", file.name).replace("{{Size}}", file.size).replace("{{Data}}", e.target.result.substring(0, 10));
  29. }, false);
  30. fileReader.readAsText(file);
  31. } else {
  32. alert("Sorry, but this browser isn't smart enough( Choose another one");
  33. }
  34. }
  35. preventDefault(e);
  36. }, false);
  37. } else {
  38. alert("Sorry, but this browser isn't smart enough( Choose another one");
  39. }

Report this snippet  

You need to login to post a comment.