Dizin açma

Thomas Steiner'ın yer aldığı daha fazla içerik
Thomas Steiner

Dizinlerle ilgilenmek, günlük olarak uğraşacağınız bir şey değildir, ancak bazen bir dizindeki tüm resimleri işlemeyi istemek gibi bir kullanım alanı ortaya çıkar. File System Access API ile kullanıcılar artık dizinleri tarayıcıda açabilir ve yazma erişimine ihtiyaç duyup duymayacağına karar verebilir.

Bir dizini açmak için showDirectoryPicker() çağrısı yapın. Bu çağrı, seçilen dizinle ilgili bir söz döndürür. Yazma erişimine ihtiyacınız varsa { mode: 'readwrite' } öğesini yönteme aktarabilirsiniz.

Tarayıcı Desteği

  • 86
  • 86
  • x
  • x

Kaynak

Klasik yöntem

<input type="file" webkitdirectory> öğesini kullanma

Sayfadaki <input type="file" webkitdirectory> öğesi, kullanıcının bu öğeyi tıklayıp bir dizin açmasına olanak tanır. Buradaki ipucu, öğeyi JavaScript içeren bir sayfaya görünmez bir şekilde eklemek ve programlı bir şekilde tıklamaktır.

Tarayıcı Desteği

  • 7
  • 13
  • 50
  • 11.1

Kaynak

Progresif geliştirme

Aşağıdaki yöntem, desteklendiğinde File System Access API'yi kullanır, aksi takdirde klasik yaklaşıma döner. İşlev her iki durumda da bir dizin döndürür, ancak File System Access API'nin desteklendiği durumlarda her dosya nesnesinin directoryHandle özelliğinde depolanan bir FileSystemDirectoryHandle ve handle özelliğinde depolanan bir FileSystemFileHandle vardır. Böylece, tutma yerlerini isteğe bağlı olarak diske serileyebilirsiniz.

const openDirectory = async (mode = "read") => {
 
// Feature detection. The API needs to be supported
 
// and the app not run in an iframe.
 
const supportsFileSystemAccess =
   
"showDirectoryPicker" in window &&
   
(() => {
     
try {
       
return window.self === window.top;
     
} catch {
       
return false;
     
}
   
})();
 
// If the File System Access API is supported…
 
if (supportsFileSystemAccess) {
    let directoryStructure
= undefined;

   
// Recursive function that walks the directory structure.
   
const getFiles = async (dirHandle, path = dirHandle.name) => {
     
const dirs = [];
     
const files = [];
     
for await (const entry of dirHandle.values()) {
       
const nestedPath = `${path}/${entry.name}`;
       
if (entry.kind === "file") {
          files
.push(
            entry
.getFile().then((file) => {
              file
.directoryHandle = dirHandle;
              file
.handle = entry;
             
return Object.defineProperty(file, "webkitRelativePath", {
                configurable
: true,
                enumerable
: true,
               
get: () => nestedPath,
             
});
           
})
         
);
       
} else if (entry.kind === "directory") {
          dirs
.push(getFiles(entry, nestedPath));
       
}
     
}
     
return [
       
...(await Promise.all(dirs)).flat(),
       
...(await Promise.all(files)),
     
];
   
};

   
try {
     
// Open the directory.
     
const handle = await showDirectoryPicker({
        mode
,
     
});
     
// Get the directory structure.
      directoryStructure
= getFiles(handle, undefined);
   
} catch (err) {
     
if (err.name !== "AbortError") {
        console
.error(err.name, err.message);
     
}
   
}
   
return directoryStructure;
 
}
 
// Fallback if the File System Access API is not supported.
 
return new Promise((resolve) => {
   
const input = document.createElement('input');
    input
.type = 'file';
    input
.webkitdirectory = true;

    input
.addEventListener('change', () => {
      let files
= Array.from(input.files);
      resolve
(files);
   
});
   
if ('showPicker' in HTMLInputElement.prototype) {
      input
.showPicker();
   
} else {
      input
.click();
   
}
 
});
};

Daha fazla bilgi

Demo

<!DOCTYPE html>
<html lang="en">
 
<head>
   
<meta charset="utf-8" />
   
<meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="icon"
      href="data:image/svg+xml,
<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📂</text></svg>"
    />
   
<title>How to open a directory</title>
 
</head>
 
<body>
   
<h1>How to open a directory</h1>
   
<button type="button">Open directory</button>
   
<pre></pre>
 
</body>
</html>

       
:root {
 
color-scheme: dark light;
}

html
{
 
box-sizing: border-box;
}

*,
*:before,
*:after {
 
box-sizing: inherit;
}

body
{
 
margin: 1rem;
 
font-family: system-ui, sans-serif;
}
       

       
const button = document.querySelector('button');
const pre = document.querySelector('pre');

const openDirectory = async (mode = "read") => {
 
// Feature detection. The API needs to be supported
 
// and the app not run in an iframe.
 
const supportsFileSystemAccess =
   
"showDirectoryPicker" in window &&
   
(() => {
     
try {
       
return window.self === window.top;
     
} catch {
       
return false;
     
}
   
})();
 
// If the File System Access API is supported…
 
if (supportsFileSystemAccess) {
    let directoryStructure
= undefined;

   
const getFiles = async (dirHandle, path = dirHandle.name) => {
     
const dirs = [];
     
const files = [];
     
for await (const entry of dirHandle.values()) {
       
const nestedPath = `${path}/${entry.name}`;
       
if (entry.kind === "file") {
          files
.push(
            entry
.getFile().then((file) => {
              file
.directoryHandle = dirHandle;
              file
.handle = entry;
             
return Object.defineProperty(file, "webkitRelativePath", {
                configurable
: true,
                enumerable
: true,
               
get: () => nestedPath,
             
});
           
})
         
);
       
} else if (entry.kind === "directory") {
          dirs
.push(getFiles(entry, nestedPath));
       
}
     
}
     
return [
       
...(await Promise.all(dirs)).flat(),
       
...(await Promise.all(files)),
     
];
   
};

   
try {
     
const handle = await showDirectoryPicker({
        mode
,
     
});
      directoryStructure
= getFiles(handle, undefined);
   
} catch (err) {
     
if (err.name !== "AbortError") {
        console
.error(err.name, err.message);
     
}
   
}
   
return directoryStructure;
 
}
 
// Fallback if the File System Access API is not supported.
 
return new Promise((resolve) => {
   
const input = document.createElement('input');
    input
.type = 'file';
    input
.webkitdirectory = true;

    input
.addEventListener('change', () => {
      let files
= Array.from(input.files);
      resolve
(files);
   
});
   
if ('showPicker' in HTMLInputElement.prototype) {
      input
.showPicker();
   
} else {
      input
.click();
   
}
 
});
};

button
.addEventListener('click', async () => {
 
const filesInDirectory = await openDirectory();
 
if (!filesInDirectory) {
   
return;
 
}
 
Array.from(filesInDirectory).forEach((file) => (pre.textContent += `${file.name}\n`));
});