поместите несколько файлов в одну папку zip перед загрузкой на стороне клиента reactJS

Question

У меня есть две функции, которые принимают массив файловых ключей и передают его в функцию загрузки, которая загружает каждый файл отдельно с aws s3.

Я хотел бы собрать все файлы в одну папку zip и просто загрузить эту одну папку zip, чтобы все файлы были вместе.

Вопросы:

1-й Как сначала установить каталог для сохранения файлов?

2-й Как поместить все файлы, которые загружаются в в одну папку zip, затем загрузите папку zip?

любая помощь или понимание очень приветствуется.

текущий код

async function handleDownloadClick(event) {
         event.preventDefault();

      const imagesAsArray = [...imagesUploaded];

        for (let i = 0; i < imagesAsArray.length; i++) {                      

            await DownloadFile(imagesAsArray[i]);

        }
    }


    async function DownloadFile(fileToDownload) {

    const filename = `${fileToDownload.key}`;

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

        console.log(result)
        let mimeType = result.ContentType

        let fileName = fileToDownload.key.split(`${job.jobId},/`)

        console.log(fileToDownload.key)

        try {
          let blob = new Blob([result.Body], {type: mimeType})

          //downloading the file depends on the browser
          //IE handles it differently than chrome/webkit
          if (window.navigator && window.navigator.msSaveOrOpenBlob) {
            window.navigator.msSaveOrOpenBlob(blob, fileName)
          } else {
            let objectUrl = URL.createObjectURL(blob);
            let link = document.createElement('a')
            link.href = objectUrl
            link.setAttribute('download', fileName)
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
          }
        } catch (exc) {
          console.log("Save Blob method failed with the following exception.");
          console.log(exc);
        }

   }

Обновленный код делает то, что мне нужно было сделать

решил, что поделюсь своим решением, так как я видел много вопросов по этому поводу, но не так много полезных ответов.

используя JSZip: https://stuk.github.io/jszip/

с использованием saveAs из fileSaver. js: https://github.com/eligrey/FileSaver.js

Первый: он циклически загружает каждый файл из s3, создает большой двоичный объект и помещает каждый большой двоичный объект / файл в «папку».

Секунда: после каждого файла был загружен с s3, затем он будет использовать метод saveAs для загрузки / сохранения zip-папки.

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

Answer 1

решил, что поделюсь своим решением, поскольку я видел много вопросов по этому поводу, но не много полезных ответов.

с использованием JSZip: https://stuk.github.io/jszip/

используя saveAs из fileSaver. js: https://github.com/eligrey/FileSaver.js

Первое: он циклически загружает каждый файл по отдельности из s3, создает большой двоичный объект и помещает каждый большой двоичный объект / файл в " папка ".

Второй: после того, как каждый файл был загружен с s3, он будет использовать метод saveAs для загрузки / сохранения архива.

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