get name of files of zip file in javascript

Question

In my application i have a form with some fields and an input file field, and once the user upload a zip file i want to get the names of files that are contained in this zip file.

This is the form:

<input type="text" name="code" value="CodeValue">
<input type="text" name="Comment" value="commentValue">
<input type="file" name="zipFile" value="zipValue" accept="application/zip" 
       onchange="getzipFilesNames();" id="file-input">

<script>
    function getzipFilesNames() {

    }
</script>

I don't need to extract the files, i only need their names. How can i do this using javascript ?

score 5 · Accepted Answer · answered Aug 28 '15 at 21:24

I found an easy way to do it using the JSUnzip library and the JSInflate library : This is a sample code:

        var filesInput = document.getElementById("file-input").files[0];
        var res;

        var reader = new FileReader();
        reader.readAsBinaryString(filesInput);

        reader.onloadend = function(e){
            var myZip = e.target.result;                 
            var unzipper = new JSUnzip(myZip);

            unzipper.readEntries();    
            var myFiles = unzipper.entries;    

            for(var i=0; i<myFiles.length; i++) {
                var name = myFiles[i].fileName; // This is the file name
                var content = JSInflate.inflate(myFiles[i].data); // this is the content of the files within the zip file.
            }
        }

Correct me if I'm wrong, but this requires the whole zip file to be loaded. Is there a way to just get the list of files without loading the while file, either by only reading the initial part of the file (assuming there is a list of contents at the beginning), or by reading the zip in chunks? — Max Waterman, Jun 05 '17 at 15:16

score 1 · Answer 2 · answered Feb 22 '23 at 16:31

JSUnzip and JSInflate are no longer maintained. I had issues using jszip to read the filenames of my large zip files, as jszip does not support files over 2GB, according to its maintainer.

I found a way to read filenames of the zip's contents using zip.js:

import { BlobReader, ZipReader } from "@zip.js/zip.js";

async function getFileNamesFromZip(fileBlob) {
  const zipReader = new ZipReader(new BlobReader(fileBlob));
  const entries = await zipReader.getEntries();
  return entries.map((entry) => entry.filename);
}

score -1 · Answer 3 · edited May 23 '17 at 10:29

-1

To do this client-side you'll need to read the file using the File API (see this answer for examples), and then interpret the zip data to extract the filenames. There are libraries that can help with that second part, such as jszip.

edited May 23 '17 at 10:29

Community

1
1

answered Aug 28 '15 at 09:42

T.J. Crowder

1,031,962
187
1,923
1,875

thanks for your answer. unfortunately, i am not familiar with `javascript`, can you provide an example with the `jszip` libray, so i can use it directely in my application – ihssan Aug 28 '15 at 09:47

score -2 · Answer 4 · answered Aug 09 '18 at 14:49

function readFiles() { var files = document.getElementById('files').files[0];

    var reader = new FileReader()
    reader.readAsBinaryString(files)

    reader.onload = (e) => {
        var myZip = e.target.result            
        var unzipper = new JSUnzip(myZip);            
        var readEntries = unzipper.readEntries();
        var myFiles = unzipper.entries;

        for(var i = 0; i < myFiles.length; i++) {
            var name = myFiles[i].fileName;
            console.log('filename = ', name)                             
        }

    }
}

This appears to be a copy/paste of the existing accepted answer, with a trivial change of console.log versus putting the files in to a local variable. — Ross, Aug 09 '18 at 14:54

get name of files of zip file in javascript

4 Answers4