在响应快递中呈现带有文件的页面

Question

want to send files from server to be rendered in browser in index pug

   extends layout block content h1= 'saved files' #recordings.recordings.row script(src='/javascripts/listrecordings.js')

    function fetchRecordings() {
      fetch('/')
        .then((response) => response.json())
        .then((response) => {
          console.log("response " + response);
          if (response.success && response.files) {
            //remove all previous recordings shown
            recordingsContainer.innerHTML = '';
            response.files.forEach((file) => {
              //create the recording element
              const recordingElement = createRecordingElement(file);
              //add it the the recordings container
              recordingsContainer.appendChild(recordingElement);
            })
          }
        })
        .catch((err) => console.error(err));
    };

And the part of index js:

    router.get('/', (req, res) => {
      let files = fs.readdirSync('./public/upploads');
      console.log(__dirname + " files length  " + files.length);
      files = files.filter((file) => {
        // check that the files are audio files
        const fileNameArr = file.split('.');
        return fileNameArr[fileNameArr.length - 1] === 'mp3';
      }).map((file) => `/${file}`);
      //res.json({ success: true, files });
      res.render('index', files);// stuck here ???

    });

how to do this part to shoot response to index

Answer 1

I think a better way to do it is to return an array of paths of the .mp3 files for example:

['upploads/a.mp3', 'upploads/b.mp3' ]

And in the client just need to load the audio using the url:

http://localhost:3000/upploads/a.mp3

To setup your public directory read this docs .