You can use JSZIP.

**use npm to install JSZIP

let zip = require('jszip')();
//hoping you have already taken input
let input = document.getElementById('fileInput'); // fileInput is id of my input element
let file = input.files[0];
let allZip =  zip.file(file.name, file);
console.log(allZip)

you can use jszip npm module.

For example:

var zip = new JSZip();

zip.file("Hello.txt", "Hello World\n");
var img = zip.folder("images"); //images is the folder which will be zip

img.file("smile.gif", imgData, {base64: true});

zip.generateAsync({type:"blob"}).then(function(content) {

    saveAs(content, "example.zip");
});

To use it without jszip, you can try the following code:

function str2bytes (str) {
    var bytes = new Uint8Array(str.length);
    for (var i=0; i<str.length; i++) {
        bytes[i] = str.charCodeAt(i);
    }
    return bytes;
}

and its usage:

var blob = new Blob([str2bytes(myData)], {type: "application/zip"});
saveAs(blob, "data.zip"); 

But jszip is a better alternative approach.

You can use JsZip on Client Side. For example, if you want to download an image, you need its url. Then, do a request with axios. Like this:

request = (currentUrl: string): Promise<void> => axios({
    url: currentUrl,
    method: 'GET',
    responseType: 'blob',
}).then((response) => {
    const url: string = window.URL.createObjectURL(new Blob([response.data]));
});

then use the url that axios gave you in response to download your file

figured I would share my solution, as i've seen alot of questions about this, but not many helpful answers.

using JSZip: https://stuk.github.io/jszip/

using saveAs from fileSaver.js: https://github.com/eligrey/FileSaver.js

First: it loops through downloading each file individually from s3, creates a blob, and puts each blob/file into a "folder".

Second: after each file has been downloaded from s3, it will then use the saveAs method to download/save the zipped folder.

function NewEditInfo(props) {
const [job, setJob] = useState([]);
const [imagesUploaded, setImagesUploaded] = useState(null); 

//initialize jsZip
var JSZip = require("jszip");
let zip = new JSZip();
let photoZip = zip.folder(`${job.streetAddress}`);

useEffect(() => { 
     //// API call to load job info from dynamo db
  function loadJob() {
    return API.get("api name", "/tablename/tableinfo", {
  'queryStringParameters': {jobId: props.match.params.id}    
   }); 
  } 
   /// onload function to load job info and get a count of files
    async function onLoad() {   

      try {
        const job = await loadJob();
        setJob(job[0])

        const ImagesUploaded = await Storage.list(`${job[0].jobId}`);
        setImagesUploaded(ImagesUploaded);

        } catch (e) {
          alert(e);
      }

    }

    onLoad();
  }, [props.match.params.id,]);


  /// On download button click, loop through / download images using the key given from storage.list in onload function
  async function handleDownloadClick(event) {
         event.preventDefault();    
      const imagesAsArray = [...imagesUploaded];

    for (let i = 0; i < imagesAsArray.length; i++) {                                                                                          
      await DownloadFileFromS3(imagesAsArray[i]); 
        }
       /// waits for "await DownloadFileFromS3, then executes the save as which saves the zipped folder created in "DownloadFileFromS3"
        zip.generateAsync({type:"blob"})
             .then(function(content) {
        saveAs(content, `${job.streetAddress}`);
        });
   }


    /// download each file from s3 and put it in the zip folder
    async function DownloadFileFromS3(fileToDownload) {

        const result = await Storage.get(fileToDownload.key, {download: true})

        let mimeType = result.ContentType
        let fileName = fileToDownload.key
        let blob = new Blob([result.Body], {type: mimeType})

        photoZip.file(fileName[1], blob)

   }

 return(

      <IonPage>
      <IonHeader>
        <IonToolbar>
      <IonButtons slot="start">
          <IonBackButton/>
      </IonButtons>
          <IonTitle>Download Images</IonTitle>
        </IonToolbar>
      </IonHeader>  
      <IonContent className="ion-padding">   
      <IonButton onclick={handleDownloadClick}> download </IonButton>
      </IonContent>
      </IonPage>
    );


  }


export default withRouter(NewEditInfo);