Changing file names at the time of downloading a zip file

JavaScript
1

Please consider the following code, which is taken from the solution of my earlier post.

const requests = [
  'file1_1555077233.csv',
  'file2_1555077233.csv',
  'file3_1555077233.csv'
].map(file => {
  return fetch('/jack/file/' + file)
    .then(response => response.text())
    .catch(console.error)
})

Promise.all(requests)
  .then(contents => {
    const zip = new JSZip()

    contents.forEach((content, index) => {
      zip.file(`file-${index}.csv`, content)
    })

    return zip.generateAsync({ type: 'blob' })
  })
  .then(blob => {
    saveAs(blob, 'files.zip')
  })

So, the above code gives me the file names like this :

file-0.csv 
  
file-1.csv 
  
 file-2.csv

Let’s say if I have the file names like this (planning to add UUID to maintain uniqueness):

const requests = [
  'employee_arrival_123e4567-e89b-12d3-a456-426655440000.csv',
  'employee_departure_123e4567-e89b-12d3-a456-426655440000.csv',
  'employee_performance_123e4567-e89b-12d3-a456-426655440000.csv'
].map(file => {
  return fetch('/jack/file/' + file)
    .then(response => response.text())
    .catch(console.error)
})

In this line of code zip.file(file-${index}.csv, content), is it possible to print the name of the above files?
I mean, I don’t want it to print like this file-0.csv,file-1.csv,file-2.csv in files.zip but my files.zip should contain

employee_arrival_123e4567-e89b-12d3-a456-426655440000.csv, employee_departure_123e4567-e89b-12d3-a456-426655440000.csv, employee_performance_123e4567-e89b-12d3-a456-426655440000.csv

Thanks!

2

duplicate the requests array (without the map), and then use zip.file(mycopyofrequests[index], content)

3

Could you edit the code and explain please? Not sure if I understood it properly. Thanks

4

Hey @m3g4p0p, Sorry to tag you again here. I was wondering if you could share your thoughts on this requirement which I mentioned in this thread below (it may require to modify your solution that you mentioned above). Thanks again!

5

IDK you’ve already been given a straightforward solution to your problem… not sure what I could add here other than doing the coding for you. Maybe try asking a more specific question what exactly you didn’t understand, or where your implementation didn’t work as expected. ;-)

6

Thanks. I didn’t quite understand this part duplicate the requests array (without the map), and then use zip.file(mycopyofrequests[index], content)

const requests = [
  'employee_arrival_123e4567-e89b-12d3-a456-426655440000.csv',
  'employee_departure_123e4567-e89b-12d3-a456-426655440000.csv',
  'employee_performance_123e4567-e89b-12d3-a456-426655440000.csv'
].map(file => {
  return fetch('/jack/file/' + file)
    .then(response => response.text())
    .catch(console.error)
})

Like, how do I duplicate the array in this scenario with different file names and then how would I go about adding the following things if I am not using map :

return fetch(‘/jack/file/’ + file)
.then(response => response.text())
.catch(console.error)

7

What the code does is mapping an array of file names to an array of requests, which eventually resolve to the plain text content of the responses. So you have an array of promises, each mapping to an element in the file names array. When all these promises are fulfilled, you loop over the text contents they resolved with, and create new file names from each file’s index.

Instead, you can just duplicate the array of file names, or keep the original array in a dedicated variable for that matter (IRL it’s presumably not hard-coded anyway but getting passed in from somewhere). You can then map the original array to fetch requests as before, and later look up the file names corresponding to each response by their indices.

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.