Possible to load files into text area?

#1

I am trying to load 3 files from a file directory where files are already present.

Files are in the following format. Let’s say they are in the following location (inside file folder): C:\jack\file

file1_1555077233.csv
file2_1555077233.csv 
file3_1555077233.csv

Below code displays a text area after 1 second as soon as Download File button is clicked.


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8"/>
    <title>LoadFiles</title>
    <link rel="stylesheet" href="built/style.css"/>
    <script type="text/javascript">
        function loadFiles() {
            let interval = setInterval(displayTextArea, 1000);
			function displayTextArea() {
              console.log(new Date() + " ");

              document.getElementById("downloadtextArea").innerHTML =
                 '<textarea maxlength="500" cols="30" rows="5"></textarea>'; 
                  
              
              clearInterval(interval);

            }

          /* function stopInterval() {
               clearInterval(interval);
           }
           */

        }

        

    </script>
</head>
<body>


<button id="downloadFileButton" onclick="loadFiles()">Download File</button>
<div id ="downloadtextArea"></div>


</body>
</html>

Question : Is it possible to load all the three files in the text area using javascript? And once, the files start showing in the text area, I could have the user click on Download File button and have them download the files in zip format. Once the files start showing in the text area, I think I should be able to manage the download part from the discussion I had in my previous post. What would be the best way to go about it?

P.s. Probably the naming of my button is not that good. I should probably call it as “Generate File” or “Load File” and change it to “Download File” as soon as files start showing up in the text area.

0 Likes

#2

You can’t load those files from the users file system, if this is what you want to do. If they are hosted on the same server (same origin to be exact), you can use a regular AJAX request though; the fetch API, being promise-based, is particularly suitable here:

const container = document.getElementById('downloadtextArea')

// Load a single file
fetch('/jack/file/file1_1555077233.csv')
  .then(response => response.text())
  .then(content => {
    container.innerHTML = `<textarea>${content}</textarea>`
  })
  .catch(console.error)

// Load multiple files by mapping each file name to a fetch 
// promise, which eventually resolve with the file contents
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 => contents.join('\n'))
  .then(content => {
    container.innerHTML = `<textarea>${content}</textarea>`
  })

Yes but you don’t have to get it from the textarea then, you can just save the data right away:

// Chaining on the same fetch promises...
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')
  })
0 Likes

#3

Thanks very much. Yes, I just want to pick it up from a particular location on the server as you mentioned as the files are hosted on the same server.

Quick question, you showed two examples if I understood correctly, one for loading single file (below this comment // Load a single file) and other for loading multiple files (below this comment // Load multiple files...) but in your multiple files loading example, you didn’t use something like container.innerHTML = <textarea>${content}</textarea>. Is it like the second multiple file example you showed, doesn’t load the files to the text area? Please let me know if I misunderstood something.

And when you say this Yes but you don’t have to get it from the textarea then, you can just save the data right away:, you mean, it’s not necessary to use textarea to display the files? Thanks again ! Appreciated !

1 Like

#4

Okay. :-)

Yes it does – you have to scroll it down a bit.

For the download itself, displaying the files is not necessary; you can of course display them additionally if desired, or first display them for review and then show or enable a separate “download as zip” button or something. Using a textarea would only make sense if the user was allowed to edit the files before generating the zip files though.

0 Likes

#5

Sorry, didn’t realize scroll button exists there until I start scrolling below :slight_smile:

Thanks. I’ll try your approach.

Enabling a separate button sounds like a good approach.

Actually, as soon as a user clicks on the `Download File button, it’s going to take 30 minutes or more for the file to appear on the server from the backend process.In this scenario, I am also planning to display a notification to the user every 5 sec or so so that they are aware that the file is not yet present and as soon as it appears there, I could use your logic to grab it.

One question regarding timestamp. Since, I would need the timestamp to identify the latest files, which approach would be better according to you to have the latest timestamp available:

  1. I generate the timestamp using javascript and send it along with the web service that triggers the process which is responsible for generating and placing the file at an appropriate location on the server.

OR

  1. I should generate the timestamp on the backend side and then have it send it back to the UI in JSON format. This is what I am doing right now (haven’t sent it back to JSON format yet). But I feel like first approach would be much easier, right?
0 Likes

Tracking unique file names for download purpose
#6

In this case I wouldn’t require the user to keep the page open; schedule the required calculations to a separate thread / process / worker, and send a push notification or email to the user when it’s ready. But otherwise definitely the 2nd option – if the token is supposed to be unique on the server side, then the client shouldn’t be responsible for creating it. BTW, you might actually use a proper UUID rather than the request timestamp, just to be safe.

0 Likes

#7

Thanks @m3g4p0p. Yeah, I am trying to figure out solution of the scenario where a user might shut down his/her computer and come back after few hours to look for the latest files for download. I think sending email notification might require some SMTP settings on the server. even if I accomplish this task, I am always going to run into the following issue:

How do I figure out to get the latest file based on the timestamp?

I think you were trying to suggest UUID approach which I believe I would have to add that unique identifier in my file name just like I am adding the timestamp? If this is the case, then I am wondering if both things are same since timestamp in milliseconds is also a unique thing? Let me know if I can answer more questions.Thanks

0 Likes

#9

Don’t just serve the latest file but the file identified by the UUID you created when initiating the process. But if you’re not sure how to proceed regarding the backend, I’d suggest to start a new topic specific to the language you’re using…

0 Likes

#10

Thanks @m3g4p0p . I created a new discussion topic here.

0 Likes