Directory in html page

Directory Chooser in HTML Page

Can’t be done in pure HTML/JavaScript for security reasons.

Selecting a file for upload is the best you can do, and even then you won’t get its full original path in modern browsers.

You may be able to put something together using Java or Flash (e.g. using SWFUpload as a basis), but it’s a lot of work and brings additional compatibility issues.

Another thought would be opening an iframe showing the user’s C: drive (or whatever) but even if that’s possible nowadays (could be blocked for security reasons, haven’t tried in a long time) it will be impossible for your web site to communicate with the iframe (again for security reasons).

What do you need this for?

Folder Choose in Html

you can see the folder name in alert when select a file

Select folder location in HTML input

No on clientside with plain html and javascript it isn’t possible. Your browser handle file downloads. So you can only specify download location in the browser settings!

There are solutions for IE and Chrome but this is very browser specific:

For chrome you can use FSO.js, which is a JavaScript library for temporary and permanent client-side file storage.

In IE you can create an ActiveXObject like this:

// initialize ActiveXObject and create an object of Scripting.FileSystemObject. 
var fso = new ActiveXObject("Scripting.FileSystemObject"); 

// creates a folder with specified name at the specified location 
fso.CreateFolder("C:\\Temp\\myFolder"); 

fso = null;

html5/Javascript — How to get the Selected folder name?

function selectFolder(e) var theFiles = e.target.files; 
var relativePath = theFiles[0].webkitRelativePath; 
var folder = relativePath.split("/"); 
alert(folder[0]);
>

Источник

: The Directory element

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The HTML element is used as a container for a directory of files and/or folders, potentially with styles and icons applied by the user agent. Do not use this obsolete element; instead, you should use the element for lists, including lists of files.

Warning: Do not use this element. Though present in early HTML specifications, it has been deprecated in HTML 4, and has since been removed entirely. No major browsers support this element.

DOM interface

This element implements the HTMLDirectoryElement interface.

Attributes

Like all other HTML elements, this element supports the global attributes.

This Boolean attribute hints that the list should be rendered in a compact style. The interpretation of this attribute depends on the user agent and it doesn’t work in all browsers.

Specifications

Not part of any current specifications.

Browser compatibility

BCD tables only load in the browser

See also

• Other list-related HTML Elements: , , , and ;
• CSS properties that may be specially useful to style the element:
  • The list-style property, useful to choose the way the ordinal is displayed.
  • CSS counters, useful to handle complex nested lists.
  • The line-height property, useful to simulate the deprecated compact attribute.
  • The margin property, useful to control the indent of the list.

  Found a content problem with this page?

  This page was last modified on Jul 17, 2023 by MDN contributors.

  Your blueprint for a better internet.

  MDN

  Support

  Our communities

  Developers

  Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
  Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

  Источник

  How to open a directory

  

  Dealing with directories is not something you will cope with on a daily basis, but occasionally the use case arises, such as wanting to process all images in a directory. With the File System Access API, users can now open directories in the browser and decide if they need write access or not.

  The modern way #

  Using the File System Access API’s showDirectoryPicker() method #

  To open a directory, call showDirectoryPicker() , which returns a promise with the picked directory. If you need write access, you can pass < mode: 'readwrite' >to the method.

  • Chrome 86, Supported 86
  • Firefox, Not supported
  • Edge 86, Supported 86
  • Safari, Not supported

  The classic way #

  Using the &LTinput type=»file» webkitdirectory> element #

  The &LTinput type=»file» webkitdirectory> element on a page allows the user to click it and open a directory. The trick now consists of inserting the element invisibly into a page with JavaScript and click it programmatically.

  • Chrome 7, Supported 7
  • Firefox 50, Supported 50
  • Edge 13, Supported 13
  • Safari 11.1, Supported 11.1

  Progressive enhancement #

  The method below uses the File System Access API when it’s supported and else falls back to the classic approach. In both cases the function returns a directory, but in case of where the File System Access API is supported, each file object also has a FileSystemDirectoryHandle stored in the directoryHandle property and a FileSystemFileHandle stored in the handle property, so you can optionally serialize the handles to disk.

  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(); 
  > 
  >);
  >;

  Further reading #

  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> 

  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`)); >); 

  :root  color-scheme: dark light; > html  box-sizing: border-box; > *, *:before, *:after  box-sizing: inherit; > body  margin: 1rem; font-family: system-ui, sans-serif; > 

  Источник