电子：从客户端获取文件夹结构

Question

I am developing Angular2+Electron desktop application. As boilerplate I took simple example Angular2 + Electron

I need to get folder structure by drag & drop folder to the area. I found the way how to get information about folder once it dropped to area. Now need to get folder structure with a help of this info. Here is an example of returning object:

{
  lastModified: 1460044264000,
  lastModifiedDate: "Thu Apr 07 2016 18: 51: 04 GMT + 0300(EEST)",
  name: "dna",
  path: "/Users/myUser/Pictures/folder",
  size: 340,
  type: "",
  webkitRelativePath: ""
}

Any information on this issue will be appreciated!

Answer 1

First of all use fs stats to check if that is a directory.

Then use fs node module to read available files and folders in the folder.

UPDATE

If you use webpack as builder be sure to set up target: "electron-renderer" as mentioned in webpack docs .

TS would complain at import * as fs from 'fs' .

First way to solve this issue is to add declare var require:any and use const fs = require('fs') - ugly hack.

Second is to add node typings typings install dt~node -GS , configure tsconfig.json as:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true
  },
  "exclude": [
    "node_modules"
  ],
  "filesGlob": [
    "./src/customDefinitions.d.ts",
    "./src/app/**/*.ts",
    "!./node_modules/**/*.ts",
    "typings/index.d.ts"
  ]
}

And use import * as fs from 'fs';