Uploading a zip file directly to s3 from browser after unzipping it at browser

Question

I have a react environment where I am uploading files in small chunks to s3. Now I am supposed to upload zips as well but in unzipped state from the browser itself.After much findings I worked out the following,

jsZip.loadAsync(zipFileAsBuffer).then(function (zip) {
            Object.keys(zip.files).forEach(function (filename) {
                console.log(filename)
                zip.files[filename].async('string').then(function (fileData) {

                })
            })
        })

Later when I do fileData.byteLength for chunking it gives an error saying cannot find byteLength of undefined.I assume this is because the process I am using requires buffer but instead I get blob from jsZip. How can I convert blob to buffer or if some better approach is required then please do tell.

you want to unzip the contents of the zip file and then upload every file inside that zip file right ? — Aravind, Nov 12 '18 at 06:33
guess you need to chain the promise to one more level. or to simplify it first unzip to a folder and then loop through all the files then upload. — Aravind, Nov 12 '18 at 06:54
@Aravind Storing in the folder is not an option for me sadly :) . Also the chaining of files would come into place once even one gets uploaded instead I am getting an error. — SHIKHAR SINGH, Nov 12 '18 at 06:59
it could be the case since the whole zip is in memory and somehow the individual files are not fully available for you to use . Another option you can try is to upload the zip file and unzip them via lambda functions( zip file upload trigger) so that you can decouple the unzip and the upload functionalities. — Aravind, Nov 12 '18 at 07:11
@Aravind Thanks aravind.I will try the lambda part.However is there an option to convert the blob I am getting as file contents of the zip to buffer.That would be a one step solution for me. — SHIKHAR SINGH, Nov 12 '18 at 07:18
am not sure about it in js , python has options https://stackoverflow.com/questions/23569659/extract-zip-to-memory-parse-contents/23571919 — Aravind, Nov 12 '18 at 07:21

score 0 · Answer 1 · answered Nov 14 '18 at 05:05

The only change that I needed to make in the existing code was to use "ArrayBuffer" instead of "string".So the modification looks like,

jsZip.loadAsync(zipFileAsBuffer).then(function (zip) {
        Object.keys(zip.files).forEach(function (filename) {
            console.log(filename)
            zip.files[filename].async('ArrayBuffer').then(function (fileData) {

            })
        })
    })

Uploading a zip file directly to s3 from browser after unzipping it at browser

1 Answers1