Save the data in the UI of react in the form of file-CodePudding

I am reading the data from an API and downloading a file. I want to save the same file in public folder of react application.

 this.state = {
      fileDownloadUrl: null,
      fileName: '',
    };

below is the method.

 downLoadFile(e) {
    e.preventDefault();
    axios
      .get(
        'http://localhost:8080/file_download/en'
      )
      .then((res) => {
       var output = res.data;
        const blob = new Blob([output]);
        const fileDownloadUrl = URL.createObjectURL(blob);
        this.setState({ fileDownloadUrl: fileDownloadUrl }, () => {
          this.dofileDownload.click();
          URL.revokeObjectURL(fileDownloadUrl);
          this.setState({ fileDownloadUrl: '' });
        });
      });
  }

code for downloading the file.

           <a
            className="hidden"
            download={this.state.fileName   '.json'}
            href={this.state.fileDownloadUrl}
            ref={(e) => (this.dofileDownload = e)}
          >
            download it
          </a>

Is there anyway I can modify the code so that file can be saved in the public folder of react application. later this file will be used for translation.

CodePudding user response：

There's no way to automatically download a file and save it in a specific location on your hard disk from a frontend app running inside a browser. The users of your app will decide how the file is saved based on their browser settings.

If you're trying to achieve that kind of thing, then that's wrong and you should consider another approach.

CodePudding user response：

It's not possible because this poses a security risk.

Most of the OS will defaults the download to download folder.

Pure browser-JavaScript is not be able to get information about the user's filesystem. The default download path might also contain sensible information, which is risky.