0

How do I open a local path on my computer, say /home/mypath/Desktop/Projects/projectFolder1/ using an HTML button on my webpage? I am trying to do this because I would like to dump a certain amount of .pdf documents inside the folder.

Below the code that I am using:

import React from 'react';
import { Card, CardImg, CardText, CardBody, CardTitle, CardSubtitle } from 'reactstrap';
import '../components/SideBar.css';
import { Link } from 'react-router-dom';

import example from '../documents/sample.zip';
import example2 from '../documents/example1.pdf';


class AtchafalayaButton extends React.Component {
    render() {
        return <DownloadLink src={example}>Download Project Specs</DownloadLink>;
    }
}
class DownloadLink extends React.Component {
    render() {
        return (
            <form method="get" action={this.props.src}>
                <button type="submit" class="btn btn-primary mr-3">
                    {this.props.children}
                </button>
            </form>
        );
    }
}


const Sidebar = () => (
    <div className="map-sidebar">
        <Card className="mb-2">
            <CardImg />
            <CardBody>
                <CardTitle>
                    <h3>Title</h3>
                </CardTitle>
                <CardSubtitle>Title Section</CardSubtitle>
                <CardText>
                    <h6>Project Details</h6>
                </CardText>
                <div class="btn-toolbar">
                    <AtchafalayaButton />
                </div>
            </CardBody>
        </Card>

1) I tried the following approach but realized that it was not correct as I am not trying to download 

            <a href="path_to_file" download="proposed_file_name">

but I am trying to open /home/mypath/Desktop/Projects/projectFolder1/ using an HTML button on my webpage.

2) Therefore I dug more into the problem and found this source and this one too. However they don't seem to address properly the problem.

3) I stepped back and tried to look at something less advanced but with more explanation on how to do that and found this basic example which sort of helps me but than it nevers explains how to open up or set a local folder.

4) After digging more I came across this other source which makes me a bit concerned as in the same source there is a link to this other source which explain that apparently it is not possible. However that link is almost 5 years old and maybe something else that I am not aware of already exists.

Please point to the right direction as I am running out of ideas and options on how to solve this problem.

Emanuele
  • 2,194
  • 6
  • 32
  • 71

1 Answers1

1

Client-side JS does not have access to files and folders on User's PC. I doubt that will be changed anytime in future. The only thing you can do with JS is initiate save dialog using package like file-saver.

Gennady Dogaev
  • 5,902
  • 1
  • 15
  • 23
  • Thanks for reading the question. I am reading this source but have a quick question. If I would like to dump say 10 `pdf` in my local path `/home/mypath/Desktop/Projects/projectFolder1/` via button on my webpage I can still do it? From the `file-saver` it seems possible but the operation seems to happen asynchronously? – Emanuele Feb 04 '20 at 19:34
  • You can offer user to download file but you can't select folder or control download process. For example, when you call `FileSaver.saveAs(blob, "hello world.txt");`, browser would just open File save dialog and it's up to user to decide where to store it – Gennady Dogaev Feb 04 '20 at 19:45
  • Perfect, and one last question. Can the user decide to upload files? – Emanuele Feb 04 '20 at 19:51
  • For example the user click the button and decides to upload a file in the same folder `/home/mypath/Desktop/Projects/projectFolder1/`? – Emanuele Feb 04 '20 at 19:52
  • What do you mean, upload? Uploading files to server is totally different operation – Gennady Dogaev Feb 04 '20 at 20:06