Using WebKitDirectory for getting Full Directory Path

help
1

I started a new project in plain html javascript, jquery, css, and Electron.

While learning about some of the nice offerings available to make desktop apps with these things, I found WebKitDirectory which in the plain app allows me to prompt the user for a directory with a file input, and get the full path.

Now I’m doing the exact same code in Meteor, and I get ‘undefined’ for the file path.

Is there something special I need to do in meteor to get this to work properly? As far as I know, webkitdirectory is not anything specific to Electron.

Here’s my code for reference in the electron app.

<div class="row">
            <div class="column">
                <div id="selectSource">
                    <input type="file" name="folderName" id="folderName" class="inputfile" webkitdirectory />
                    <label for="folderName"><i class="fa fa-folder-open-o"></i>&nbsp; Select a Source Directory</label>
                </div>
            </div>
            <div class="column">
                <input type="text" id="sourceDirPath" class="myInput" />
            </div>
        </div>

And the JS that goes with it

$("#folderName").change(function() {
        var sourceVal = document.getElementById("folderName").files[0].path;
        $("#sourceDirPath").val(sourceVal);
    });

the above gives me the proper full folder / directory path and I can do what i need to with it.

The below is the code I have in Meteor.

<template name="syncSourceInput">
    <div class="row">
        <div class="column">
            <div id="selectSource">
                <input type="file" name="folderName" id="folderName" class="inputfile" webkitdirectory />
                <label for="folderName"><i class="fa fa-folder-open-o"></i>&nbsp; Select a Source Directory</label>
            </div>
        </div>
        <div class="column">
            <input type="text" id="sourceDirPath" class="myInput" />
        </div>
    </div>
</template>

and the template event code is

Template.syncSourceInput.events({
    'change #folderName': function() {
        console.log("Source Changed");
        var sourceVal = document.getElementById("folderName").files[0].path;
        console.log("Source Path: " + sourceVal)
        $("#sourceDirPath").val(sourceVal);
    },
});

Any help with this is greatly appreciated, as always.

2

Hello @bmcgonag1 - Were you able to use WebKitDirectory successfully?

3

I never did. I continue to have an issue when using Meteor and trying to get the full directory path. It’s odd. I moved on at this point. I was just testing and playing with some different things to see what I could do. It would be useful for exporting / dumping the mongo db and allowing the user to select a folder to dump to, but I can’t grab that path.

I may just be doing something wrong (<-- quite likely), but I haven’t tried it in a while.

4

Additionally, it may be that Chrome blocks this functionality (can’t prove that), and Chromium doesn’t. I haven’t tried to run my little test meteor app using chromium, but that’s what Electron apps load into, so there could just be a difference there.

5

Thanks @bmcgonag1 - thanks for your response. We’ll try to use it in our meteor app later this month and will let you know our findings.

1 Like
6

I’m reading file path on Angular app, running inside the electron.net wrapper. (Not using webkitdirectory here)

export interface HTMLInputEvent extends Event {
        target: HTMLInputElement & EventTarget;
    }
    public actionOnInputHtml(event: HTMLInputEvent): void {
        const file = event.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.readAsText(file, 'UTF-8');
            reader.onload = (evt) => {
                const filesList = (<HTMLInputElement>document.getElementById('fileInput')).files;
// where fileInput is: id="fileInput" on the input HTML element
                const filePath = (filesList[0] as any).path;
                console.log(filePath) // here is the path
            };
            reader.onerror = function (evt) {
                console.log('error reading file');
            };
        }
    }