Meteor + React + ReactRouter File Uploads

Question

I am currently developing an application using Meteor, ReactJS and React Router (for routing). I have a requirement where a user should be able to upload a zipped web site and the Meteor application needs to show this web site as a part of one of it's pages.

A typical zip file would contain a similar pattern as below,

ZippedFolder
    |-- css
    |    |-- bootstrap.css
    |    |-- bootstrap.min.css 
    |    +-- style.css
    |-- js
    |    |-- bootstrap.js
    |    |-- bootstrap.min.js
    |    +-- script.js 
    +- index.html

I have set up CollectionFS to store the zip file into the file system and using meteorhacks:npm and several npm packages, I'm able to unzip that file to a known location.

HTMLContent = new FS.Collection("html_content", {
  stores: [new FS.Store.FileSystem("html_content"]
});

HTMLContent.on('stored', Meteor.bindEnvironment(function (fileObj) {
  let unzip = Meteor.npmRequire('unzip'),
    fs = Meteor.npmRequire('fs'),
    path = fs.realpathSync(process.cwd() +  '/../../../cfs/files/html_content/'),
    file = fs.realpathSync(path + '/' + fileObj.copies.html_content.key),
    output = path + '/' + fileObj._id;

    // TODO: Not the best ways to pick the paths. For demo only.

  if (!fs.existsSync(output)) {
    fs.mkdirSync(output);
  }
  fs.createReadStream(file).pipe(unzip.Extract({
    path: output
  }));
}));

On the React Component I'm uploading the zipped HTML content using the following code snippet.

handleZIPUpload(event) {
  FS.Utility.eachFile(event, function(file) {
    HTMLContent.insert(file, function(err, fileObj) {
      if (err) {
        console.log(err);
      } else {
        console.log(fileObj);
      }
    });
  });
},

render(){
  return (
    <input id="html_content" type="file" onChange={this.handleZIPUpload}/>
  )
}

The upload and unzip works. However, CollectionFS does not serve the HTML or the other contents from the unzipped path.

 http://meteorhost/cfs/files/html_content/file_id/index.html

I also tried unzipping the html content to the public folder of the meteor folder structure. However, meteor documentation states that the public folder is meant for static assets. As it maintains an index of the assets in the public folder. So it requires a server restart to update the index.

Is there any other location where I could place the HTML content which can be served as is?

UPDATE I sorted this issue by setting up a nginx virtual directory and uploading the files to that location so that the nginx will serve the HTML content.

Meteor + React + ReactRouter File Uploads

0 Answers0