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="mentValue">
<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 ?

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="mentValue">
<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 ?

• javascript
• zip
• filenames
• unzip

4 Answers 4

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.
            }
        }   

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);
}

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.

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)                             
        }

    }
}