CODEWITHSUNDEEP
javascriptzipfilenamesunzip
ihssan
ihssan

Reputation: 369

get name of files of zip file in 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="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 ?

Upvotes: 4

Views: 13517

Answers (4)

Nick Silvestri
Nick Silvestri

Reputation: 321

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

Upvotes: 1

Moiza Olimpio
Moiza Olimpio

Reputation: 1

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

    }
}

Upvotes: -2

ihssan
ihssan

Reputation: 369

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

Upvotes: 5

T.J. Crowder
T.J. Crowder

Reputation: 1074295

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.

Upvotes: -1

Related Questions