zip.js to read file name inside zip . (Client side scripting only)

Question

have multiple file inputs in form now I have to check for each file input that zip file doesn't contain any invalid files (doc, docx and pdf only allow).

I wrote

 <script   src="https://code.jquery.com/jquery-2.2.1.js"   integrity="sha256-eNcUzO3jsv0XlJLveFEkbB8bA7/CroNpNVk3XpmnwHc=" crossorigin="anonymous"></script>    
<script type="text/javascript" src="/js/zip.js"/>
<script type="text/javascript" src="/js/inflate.js"/>
<script type="text/javascript" src="/js/deflate.js"/>
<script type="text/javascript" src="/js/z-worker.js"/>
<script type="text/javascript">
    $(document).ready(function () {
        if((window.location.href.indexOf("LibraryItemUpload`1&ParentId=7d428470-2234-41c0-85f4-a512d51198c6") > -1) || (window.location.href.indexOf("LibraryItemUpload%601&ParentId=7d428470-2234-41c0-85f4-a512d51198c6") > -1)) 
        {
            $("input:file").change(function () {
               var regex=new RegExp("^[A-Za-z0-9 ]+$");
               var file=this.files[0];
                var key = this.value;
                var ze = key.split('\\').pop();
                var filename = ze.split('.')[0];
                var extension=key.split('.').pop().trim().toLowerCase();
                if(extension == 'zip')
                {               
                    zip.createReader(new zip.BlobReader(file), function(reader) {

                      // get all entries from the zip
                      reader.getEntries(function(entries) {
                        if (entries.length) {

                          // get first entry content as text
                          entries[0].getData(new zip.TextWriter(), function(text) {
                            // text contains the entry data as a String
                            console.log(text);

                            // close the zip reader
                            reader.close(function() {
                              // onclose callback
                            });

                          }, function(current, total) {
                            // onprogress callback
                          });
                        }
                      });
                    }, function(error) {

                    });
                }
               if (!regex.test(filename))  {                
                    alert('Please do not use special characters in file name please rename file name and upload it again.');
                    location.reload();
                }
                else {
                    return true;
                }
            });
        }
    });
  </script> 

and written code to read file name from zip.js but flow doen't go in zip.createReader function.

please suggest me if another javascript available for read zip file, I just want entries object to read files name.

Answer 1

function readEntries(entries) {
    var entryLength = entries.length;
    for (i = 0; i < entryLength; i++) {
        var entry = entries[i];
        var fileName = entry.filename.substring(entry.filename.lastIndexOf("/") + 1); //if inside folder
        var ext = fileName.split(".").pop().toLowerCase();
        if (ext.toUpperCase() == 'DOC' || ext.toUpperCase() == 'PDF' ||
            ext.toUpperCase() == 'DOCX') {
            //logic
        }
    }
}

zip.useWebWorkers = false;//explicitly include (required) zip-workers ['zip.js','zip-fs.js','z-worker.js','inflate.js','deflate.js']

var fileInput = document.getElementById("zipfile");//Input File
fileInput.addEventListener('change', function(event) {
    zip.createReader(new zip.BlobReader(fileInput.files[0]), function(zipReader) {
        zipReader.getEntries(readEntries);
    }, function (error) {
         console.log(error);
    });
});

I have not tested this piece of code, but I have used similar logic before.