ManishLSN/read-local-file-api.html Secret

## read-local-file-api.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Create .zip files using Javascript. Provides a simple API to place any content generated by Javascript into a .zip file for your users." />
    <title>Reading a local file with the File API</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">

    <link rel="stylesheet" href="documentation/css/pygments.css">
    <link rel="stylesheet" href="documentation/css/main.css">

    <script type="text/javascript" src="dist/jszip.js"></script>

    <script type="text/javascript" src="https://stuk.github.io/jszip-utils/dist/jszip-utils.js"></script>
    <!--
    Mandatory in IE 6, 7, 8 and 9.
    -->
    <!--[if IE]>
    <script type="text/javascript" src="//stuk.github.io/jszip-utils/dist/jszip-utils-ie.js"></script>
    <![endif]-->
    <script type="text/javascript" src="test/jquery-1.8.3.min.js"></script>

    <script type="text/javascript" src="vendor/FileSaver.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
          <div class="navbar-header">
            <a class="navbar-brand" href="/jszip/"><strong>JS</strong>Zip</a>
          </div>

        </div>
      </div>

      <div class="row">


        <div class="col-md-9">
          <h1>Reading a local file</h1>
          <h3>Choose the local(s) file(s)</h3>
			<p class="note">Note : your browser will process the zip file, don't choose a file too big !</p>
			<input type="file" id="file" name="file" multiple /><br />

			<div id="error_block" class="alert alert-danger hidden">
			  You will need a recent browser to use this demo :(
			</div>

			<div id="result_block" class="hidden">
			  <h3>Content :</h3>
			  <div id="result"></div>
			</div>
			<script type="text/javascript">
			(function () {
			  if (!window.FileReader || !window.ArrayBuffer) {
				$("#error_block").removeClass("hidden").addClass("show");
				return;
			  }

			  var $result = $("#result");
			  $("#file").on("change", function(evt) {
				// remove content
				$result.html("");
				// be sure to show the results
				$("#result_block").removeClass("hidden").addClass("show");

				// Closure to capture the file information.
				function handleFile(f) {
				  var $title = $("<h4>", {
					text : f.name
				  });
				  var $fileContent = $("<ul>");
				  $result.append($title);
				  $result.append($fileContent);

				  var dateBefore = new Date();
				  JSZip.loadAsync(f)
				  .then(function(zip) {
					var dateAfter = new Date();
					$title.append($("<span>", {
					  text:" (loaded in " + (dateAfter - dateBefore) + "ms)"
					}));


					zip.forEach(function (relativePath, zipEntry) {
					  $fileContent.append($("<li>", {
						text : zipEntry.name
					  }));
					});
				  }, function (e) {
					$fileContent = $("<div>", {
					  "class" : "alert alert-danger",
					  text : "Error reading " + f.name + " : " + e.message
					});
				  });
				}


				var files = evt.target.files;
				for (var i = 0, f; f = files[i]; i++) {
					handleFile(f);
				}

				var zip = new JSZip();
				//zip.file("hello.txt", "Hellop myq");
				var manish = zip.folder("raw_data");
				//var data = document.getElementById('file');

				for (var i = 0, f; f = files[i]; i++) {
					manish.file(f.name, f, {base64: true});
				}

				console.log('Generating compressed archive...');
				zip.generateAsync({
					compression: 'DEFLATE',
					type: 'blob'
				}).then(function(zc) { // Function called when the generation is complete
					console.log('Compression complete!');
					// Create file object to upload
					var fileObj = new File([zc], files);
					console.log('File object created:', fileObj);
					var fd = new FormData();
					fd.append('fileName', files);
					fd.append('file', fileObj);
					fd.append('mimeType', 'application/zip');
					// POST Ajax call
					$.ajax({
						type: 'POST',
						url: 'http://192.168.1.117/test/getFile.php',
						data: fd,
						contentType: false,
						processData: false,
					}).done(function() {
						console.log('Ajax post successful.');
					}).fail(function(jqXHR, textStatus, errorThrown) {
						console.log('Ajax post failed. Status:', textStatus);
						console.log(jqXHR);
						console.log(errorThrown);
					});
				});


			  });

			})();
			</script>
					</div>
				  </div>
				</div>
    <script>
      // FIXME find how to do that cleanly
      (function(){
        var tables = document.getElementsByTagName("table");
        for(var i = 0; i < tables.length; i++) {
          tables[i].className += " table table-condensed table-striped table-bordered ";
        }
      })();
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="Create .zip files using Javascript. Provides a simple API to place any content generated by Javascript into a .zip file for your users." />
	<title>Reading a local file with the File API</title>

	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

	<!-- Optional theme -->
	<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">

	<link rel="stylesheet" href="documentation/css/pygments.css">
	<link rel="stylesheet" href="documentation/css/main.css">

	<script type="text/javascript" src="dist/jszip.js"></script>

	<script type="text/javascript" src="https://stuk.github.io/jszip-utils/dist/jszip-utils.js"></script>
	<!--
	Mandatory in IE 6, 7, 8 and 9.
	-->
	<!--[if IE]>
	<script type="text/javascript" src="//stuk.github.io/jszip-utils/dist/jszip-utils-ie.js"></script>
	<![endif]-->
	<script type="text/javascript" src="test/jquery-1.8.3.min.js"></script>

	<script type="text/javascript" src="vendor/FileSaver.js"></script>
	</head>
	<body>
	<div class="container">
	<div class="navbar navbar-default" role="navigation">
	<div class="container-fluid">
	<div class="navbar-header">
	<a class="navbar-brand" href="/jszip/"><strong>JS</strong>Zip</a>
	</div>

	</div>
	</div>

	<div class="row">


	<div class="col-md-9">
	<h1>Reading a local file</h1>
	<h3>Choose the local(s) file(s)</h3>
	<p class="note">Note : your browser will process the zip file, don't choose a file too big !</p>
	<input type="file" id="file" name="file" multiple /><br />

	<div id="error_block" class="alert alert-danger hidden">
	You will need a recent browser to use this demo :(
	</div>

	<div id="result_block" class="hidden">
	<h3>Content :</h3>
	<div id="result"></div>
	</div>
	<script type="text/javascript">
	(function () {
	if (!window.FileReader \|\| !window.ArrayBuffer) {
	$("#error_block").removeClass("hidden").addClass("show");
	return;
	}

	var $result = $("#result");
	$("#file").on("change", function(evt) {
	// remove content
	$result.html("");
	// be sure to show the results
	$("#result_block").removeClass("hidden").addClass("show");

	// Closure to capture the file information.
	function handleFile(f) {
	var $title = $("<h4>", {
	text : f.name
	});
	var $fileContent = $("<ul>");
	$result.append($title);
	$result.append($fileContent);

	var dateBefore = new Date();
	JSZip.loadAsync(f)
	.then(function(zip) {
	var dateAfter = new Date();
	$title.append($("<span>", {
	text:" (loaded in " + (dateAfter - dateBefore) + "ms)"
	}));


	zip.forEach(function (relativePath, zipEntry) {
	$fileContent.append($("<li>", {
	text : zipEntry.name
	}));
	});
	}, function (e) {
	$fileContent = $("<div>", {
	"class" : "alert alert-danger",
	text : "Error reading " + f.name + " : " + e.message
	});
	});
	}


	var files = evt.target.files;
	for (var i = 0, f; f = files[i]; i++) {
	handleFile(f);
	}

	var zip = new JSZip();
	//zip.file("hello.txt", "Hellop myq");
	var manish = zip.folder("raw_data");
	//var data = document.getElementById('file');

	for (var i = 0, f; f = files[i]; i++) {
	manish.file(f.name, f, {base64: true});
	}

	console.log('Generating compressed archive...');
	zip.generateAsync({
	compression: 'DEFLATE',
	type: 'blob'
	}).then(function(zc) { // Function called when the generation is complete
	console.log('Compression complete!');
	// Create file object to upload
	var fileObj = new File([zc], files);
	console.log('File object created:', fileObj);
	var fd = new FormData();
	fd.append('fileName', files);
	fd.append('file', fileObj);
	fd.append('mimeType', 'application/zip');
	// POST Ajax call
	$.ajax({
	type: 'POST',
	url: 'http://192.168.1.117/test/getFile.php',
	data: fd,
	contentType: false,
	processData: false,
	}).done(function() {
	console.log('Ajax post successful.');
	}).fail(function(jqXHR, textStatus, errorThrown) {
	console.log('Ajax post failed. Status:', textStatus);
	console.log(jqXHR);
	console.log(errorThrown);
	});
	});


	});

	})();
	</script>
	</div>
	</div>
	</div>
	<script>
	// FIXME find how to do that cleanly
	(function(){
	var tables = document.getElementsByTagName("table");
	for(var i = 0; i < tables.length; i++) {
	tables[i].className += " table table-condensed table-striped table-bordered ";
	}
	})();
	</script>
	</body>
	</html>