I'm trying to use npm file-system to list the files and folders on my server at a given path. I understand that accessing the file system using Javascript is not allowed from the browser (client-side) but that it should be allowed if I run the javascript from the server.
Therefore I've created a ReactJS application that performs server-side rendering by following the tutorial here (or you get git the code and build/run it out of the box here).
I can call basic functions like Date.now() with the browser's javascript disabled proving that javascript is running on the server but when I insert the following code I receive an error.
Why does my server code not recognize fs?
Component Code:
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as userActions from '../actions/user'
import { Link } from 'react-router-dom'
import './FirstPage.css'
var fileSystem = require("file-system")
class FirstPage extends Component {
render() {
fileSystem.recurse('./', ['*.*'],
function(filepath, relative, filename) {
if (filename) {
console.log("FILE"+filename);
} else {
console.log("FOLDER"+filepath);
}
});
let time = Date.now();
const b64 = this.props.staticContext ? 'wait for it' : window.btoa('wait for it')
return (
<div className='bold'>
<h2>First Page</h2>
<p>{`Email: ${this.props.user.email}`}</p>
<p>{`b64: ${b64}`}</p>
<p>{time}</p>
<Link to={'/second'}>Second</Link>
</div>
)
}
}
const mapStateToProps = state => ({
user: state.user
})
const mapDispatchToProps = dispatch => ({
userActions: bindActionCreators(userActions, dispatch)
})
export default connect(
mapStateToProps,
mapDispatchToProps
)(FirstPage)
Error:
file-system.js:223 Uncaught TypeError: i.readdir is not a function
at r (file-system.js:223)
at Object.t.recurse (file-system.js:244)
at t.value (FirstPage.js:14)
at p._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:796)
at p._renderValidatedComponent (ReactCompositeComponent.js:819)
at performInitialMount (ReactCompositeComponent.js:359)
at p.mountComponent (ReactCompositeComponent.js:255)
at Object.mountComponent (ReactReconciler.js:43)
at performInitialMount (ReactCompositeComponent.js:368)
at p.mountComponent (ReactCompositeComponent.js:255)
r @ file-system.js:223
t.recurse @ file-system.js:244
value @ FirstPage.js:14
_renderValidatedComponentWithoutOwnerOrContext @ ReactCompositeComponent.js:796
_renderValidatedComponent @ ReactCompositeComponent.js:819
performInitialMount @ ReactCompositeComponent.js:359
mountComponent @ ReactCompositeComponent.js:255
mountComponent @ ReactReconciler.js:43
performInitialMount @ ReactCompositeComponent.js:368
mountComponent @ ReactCompositeComponent.js:255
mountComponent @ ReactReconciler.js:43
performInitialMount @ ReactCompositeComponent.js:368
mountComponent @ ReactCompositeComponent.js:255
mountComponent @ ReactReconciler.js:43
performInitialMount @ ReactCompositeComponent.js:368
mountComponent @ ReactCompositeComponent.js:255
mountComponent @ ReactReconciler.js:43
mountChildren @ ReactMultiChild.js:234
_createInitialChildren @ ReactDOMComponent.js:701
mountComponent @ ReactDOMComponent.js:520
mountComponent @ ReactReconciler.js:43
performInitialMount @ ReactCompositeComponent.js:368
mountComponent @ ReactCompositeComponent.js:255
mountComponent @ ReactReconciler.js:43
performInitialMount @ ReactCompositeComponent.js:368
mountComponent @ ReactCompositeComponent.js:255
mountComponent @ ReactReconciler.js:43
performInitialMount @ ReactCompositeComponent.js:368
mountComponent @ ReactCompositeComponent.js:255
mountComponent @ ReactReconciler.js:43
performInitialMount @ ReactCompositeComponent.js:368
mountComponent @ ReactCompositeComponent.js:255
mountComponent @ ReactReconciler.js:43
performInitialMount @ ReactCompositeComponent.js:368
mountComponent @ ReactCompositeComponent.js:255
mountComponent @ ReactReconciler.js:43
a @ ReactMount.js:102
perform @ Transaction.js:141
u @ ReactMount.js:124
perform @ Transaction.js:141
batchedUpdates @ ReactDefaultBatchingStrategy.js:60
i @ ReactUpdates.js:95
_renderNewRootComponent @ ReactMount.js:317
_renderSubtreeIntoContainer @ ReactMount.js:399
render @ ReactMount.js:420
(anonymous) @ index.js:15
t @ bootstrap 7ba872b0d973a86c97b4:19
(anonymous) @ main.0dc33d67.js:30531
t @ bootstrap 7ba872b0d973a86c97b4:19
(anonymous) @ bootstrap 7ba872b0d973a86c97b4:65
(anonymous) @ bootstrap 7ba872b0d973a86c97b4:65
You can do it using:
List React component files inside a directory
https://www.npmjs.com/package/list-react-files
Install
$ npm install --save list-react-files
Usage
import listReactFiles from 'list-react-files'
listReactFiles(__dirname).then(files => console.log(files))
Try using the, list-files npm package, as it can be used to list all the files in a directory with a particular 'string' present in it.
Refer to the link below to know abt it:
https://www.npmjs.com/package/list-files
Installation:
npm i list-files
Sample use case: To find all the files with "pdf" in a particular directory named "dir"
var find = require('list-files');
find(function(result) {
console.log(result);
}, {
dir: 'dir',
name: 'pdf'
});