使用 javascript 将文件保存在我的项目文件夹中

Question

I am VERY new to reactJS and I am trying to create a simple web app that allows me to upload a file and then save that file to my projects directory.

I have tried browserify-fs but its doesn't seem to create the file when I use fs.writeFile

The below code allows me to upload a file but I am struggling to save the file in my project directory

import ReactDOM from 'react-dom';
import Dropzone from 'react-dropzone';

class App extends Component {

  onDrop = (acceptedFiles) => {
    // Save acceptedFiles in this scripts directory
  }

  render() {
    return (
        <Dropzone onDrop={this.onDrop}>
          {({getRootProps, getInputProps}) => (
            <div {...getRootProps()}>
              <input {...getInputProps()} />
              Click me to upload a file!
            </div>
          )}
        </Dropzone>
    );
  }
}

export default App;
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Answer 1

browserify-fs stores data in the browser (I'm assuming using local storage, but I can't find a clear statement to that effect).

If you want to store data on the server then you'll need to:

1. Send the data to the server (using Ajax)
2. Store that data using server-side code

Answer 2

Use the following function...

function download(content, fileName, contentType) {
    var a = document.createElement("a");
    var file = new Blob([content], {type: contentType});
    a.href = URL.createObjectURL(file);
    a.download = fileName;
    a.click();
}

...and call as follows...

 download('Text to Save to the File', 'TestSave.txt', 'text/plain')