點燈坊

失くすものさえない今が強くなるチャンスよ

如何不選擇子目錄的檔案 ?

Sam Xiao's Avatar 2021-06-18

當使用 input(type='file', webkitdirectory) 選取目錄下的檔案時，預設會連子目錄下的檔案一起選取，該如何不選取子目錄下的檔案呢 ?

Version

Vue 3.0.11

Point-free

<template lang='pug'>
input(@input='onInput', ref='fileUpload', type='file', webkitdirectory)
</template>

<script setup>
import { ref } from 'vue'
import { read } from 'vue3-fp'
import { pipe, filter, prop, split, length, ifElse, equals, T, F } from 'ramda'
import { log } from 'wink-fp'

let fileUpload = ref (null)

let onlyRootDir = pipe (
  prop ('webkitRelativePath'),
  split ('/'),
  length,
  ifElse (equals (2)) (T) (F)
)

let onInput = pipe (
  read (fileUpload),
  prop ('files'),
  filter (onlyRootDir),
  log
)
</script>

第 2 行

input(@input='onInput', ref='fileUpload', type='file', webkitdirectory)

當要選擇目錄下，要使用 webkitdirectory。

20 行

let onInput = pipe (
  read (fileUpload),
  prop ('files'),
  filter (onlyRootDir),
  log
)

使用 pipe() 組合 onInput()：

  • read (fileUpload)：讀取 fileUpload ref
  • prop ('files')：讀取 files prop
  • filter (onlyRootDir)：過濾不選擇子目錄檔案
  • log：寫入 console.log()

13 行

let onlyRootDir = pipe (
  prop ('webkitRelativePath'),
  split ('/'),
  length,
  ifElse (equals (2)) (T) (F)
)

使用 pipe() 組合 onlyRootDir()：

  • prop ('webkitRelativePath')：讀取 webkitRelative prop
  • split ('/')：由 / 分割成 Array
  • length：取得 Array 的 length
  • ifElse (equals (2)) (T) (F)：若 length 只有 2，表示只有根目錄，否則為子目錄

Conclusion

  • HTML 並沒有 attribute 可設定不取得子目錄檔案，但可由判斷 / 個數確認是否為子目錄檔案

# Vue