feature to load comic internally

assets/js/script.js

 $(document).ready(function(){
-	
+
 	// current year
 	$('#currYear').html((new Date()).getFullYear());
-   
+
     // Load all the archive formats
-	loadArchiveFormats(['rar', 'zip', 'tar']);
-    
-    $("#fileup").change(function(){
-		
-		if($(this)[0].files.length == 0) {
-			$('#output').html("<font color='red'>Please choose a comic file</font><br>");
-		} else {
+		loadArchiveFormats(['rar', 'zip', 'tar']);
+
+		// If user click on any comic
+		$(document).on('click', '#readNow', function() {
 			$('#output').hide();
-			
+
 			// init the gallery plugin, when there is a first click on a image
 			// re-bind this function when opening new comic
 			$(document).one('click','#comicImg',function(){
@@ -27,59 +24,71 @@ $(document).ready(function(){
 				});
 				$(this).click();
 			});
-			
+
 			// Update progress text
 			$('.progress-text').html("Reading 0/0 pages");
-			
+
 			// show loading
 			$('.se-pre-con').fadeIn('slow');
-			
+
 			// destroy lightGallery
 			var $lg = $('#output');
 			$lg.lightGallery();
 			$lg.data('lightGallery').destroy(true);
-			
+
 			// clear previous blobs
 			clearBlobs();
-			
+
 			// clear previous output data
 			$('#output').empty();
-			
-			var file = $(this)[0].files[0];
-			
-			// Open the file as an archive
-			archiveOpenFile(file, function(archive, err) {
-				if (archive) 
-				{
-					$('#output').append("<b>"+archive.file_name+"</b><br><i>Click on the image to enlarge</i><br><br>");
-					readContents(archive);
-				} 
-				else 
-				{
-					$('#output').append("<font color='red'>"+err+"</font><br>");
-					
-					// hide loading
-					$('.se-pre-con').fadeOut('slow');
-					
-					// show output box
-					$('#output').fadeIn('slow');
-				}
-			});
-		}
+
+			// get the comic file name
+			var comictitle = $(this).attr('comic_title');
+
+			var blob = null;
+			var xhr = new XMLHttpRequest();
+			xhr.open("GET", "/comics/"+comictitle); // make sure to put all the comics inside "comics" directory in the root directory
+			xhr.responseType = "blob";
+			xhr.onload = function()
+			{
+			    blob = xhr.response;
+					var file = new File([blob], comictitle);
+
+					// Open the file as an archive
+					archiveOpenFile(file, function(archive, err) {
+						if (archive)
+						{
+							$('#output').append("<b>"+archive.file_name+"</b><br><i>Click on the image to enlarge</i><br><br>");
+							readContents(archive);
+						}
+						else
+						{
+							$('#output').append("<font color='red'>"+err+"</font><br>");
+
+							// hide loading
+							$('.se-pre-con').fadeOut('slow');
+
+							// show output box
+							$('#output').fadeIn('slow');
+						}
+					});
+			}
+			xhr.send();
+
     });
-    
+
     // function for reading the contents of the archive
     function readContents(archive)
     {
         var entries = archive.entries;
-        
+
         // iterate through all the contents
         for(var i=0;i<entries.length;i++)
-        {	
+        {
 			processEntries(entries, i, entries.length);
         }
     }
-	
+
 	// implement setTimout()
 	// This can minimize browser from overprocessing and end up freezing
 	// simple way to mimics multi threading
@@ -95,20 +104,20 @@ $(document).ready(function(){
 			}
 		}, i*700);
 	}
-    
+
     // function to return file extension based on file name
     function getExt(filename)
     {
         var ext = filename.split('.').pop();
         return (ext == filename) ? '' : ext;
     }
-    
+
     // function to return MIME type based on the file extension
     // NOTE: THIS FUNCTION IS NOT EFFICIENT
     function getMIME(filename)
     {
         var ext = getExt(filename).toLowerCase();
-        
+
         switch(ext)
         {
             case 'jpg':
@@ -131,7 +140,7 @@ $(document).ready(function(){
                 return 'image/jpeg';
         }
     }
-    
+
     // function to convert the archive contents into blobs, and return URL
     function createBlobs(entry, i, max)
     {
@@ -139,26 +148,26 @@ $(document).ready(function(){
             // Convert the data into an Object URL
             var blob = new Blob([data], {type: getMIME(entry.name)});
             var url = URL.createObjectURL(blob);
-            
+
             // output the images
             $('#output').append("<a href='"+url+"' id='comicImg'><img src='"+url+"' class='imgUrl'/></a>");
-			
+
 			// Update progress text
 			$('.progress-text').html("Reading "+i+"/"+max+" pages");
-			
+
 			// only hide loading spinnder when done process all
 			if(i == (max-1)) {
 				$('.progress-text').html("<font color='lime'>Completed!</font>");
-				
+
 				// hide loading
                 $('.se-pre-con').fadeOut('slow');
-                
+
                 // show output box
                 $('#output').fadeIn('slow');
 			}
-        }); 
+        });
     }
-    
+
     // function to clear all previous blobs, free up memory
     function clearBlobs()
     {
@@ -166,5 +175,5 @@ $(document).ready(function(){
             URL.revokeObjectURL($(this).attr('src'));
         });
     }
-    
-});
\ No newline at end of file
+
+});

index.html

@@ -15,9 +15,22 @@
 
         <center>
             <fieldset>
-                <legend>Open Comic</legend>
-                <input type="file" name="fileup" id="fileup" accept=".cbr,.cbz,.cbt"><br>
-                <i>(cbr,cbz,cbt files only)</i>
+                <legend>Choose Comic</legend>
+
+                <button id="readNow" comic_title="whizzkids_united.cbz">
+                  <img src='./comics/whizzkids_united_thumb.jpg' class='imgUrl'/>
+                  <br>Whizzkids United vs HIV
+                </button>
+
+                <button id="readNow" comic_title="zack_and_max.cbz">
+                  <img src='./comics/zack_and_max_thumb.jpg' class='imgUrl'/>
+                  <br>The Adventures of Zack &amp; Max
+                </button>
+
+                <button id="readNow" comic_title="comic_strip.cbz">
+                  <img src='./comics/comic_strip_thumb.jpg' class='imgUrl'/>
+                  <br>Alien Comic Strip
+                </button>
             </fieldset>
             <br><br>