Sélectionner un dossier avec showDirectoryPicker

Bonjour,

j'aimerai afficher sur un texte le répertoire en sélectionner un dossier sur le bureau.

mon code :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

async function GetDir() { try { const dirHandle = await window.showDirectoryPicker({startIn: 'desktop'}); if(dirHandle) { document.getElementById("Folder").value = dirHandle; } } catch (error) { alert('Erreur lors de la sélection du répertoire.'); } }   document.getElementById('FolderButton').addEventListener("click", GetDir);

---

il m'afficher un erreur lors de la sélection du répertoire dans alert. comment puis-je faire pour pour sélectionner un dossier en afficher son répertoire dans un texte qui s'appelle dans Folder?

developer.mozilla.org/en-US/docs/Web/API/Window/showDirectoryPicker d'apres la doc, ce n'est valable qu'en HTTPS, et surtout... c'est exeperimental, uniquement supporte par chrome.

sinon, je te conseil de passer par des console.log() et non des alert() pour debugger.

Code:

---

1 2	const dirHandle = await window.showDirectoryPicker(); console.log(dirHandle); // FileSystemDirectoryHandle {kind: 'directory', name: 'test'}

---

bonjour Doksuri,

merci d'avoir répondu. Voici ce que ça donne dans console.log :
Pièce jointe 654546

avez-vous une solution pour sélectionner le dossier en affichent le répertoire du dossier dans un texte?

je vois dans ton screenshot, que tu utilises firefox ... ce n'est pas compatible firefox

je trouver un API qui fonctionne avec Firefox avec showDirectoryPicker.

voici le code modifier :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

async function GetDir() { const supportsFileSystemAccess = "showDirectoryPicker" in window && (() => { try { return window.self === window.top; } catch { return false; } })(); if (supportsFileSystemAccess) { try { const directoryHandle = await window.showDirectoryPicker({startIn: 'desktop'}); document.getElementById("Folder").value = directoryHandle.value } catch (err) { if (err.name !== "AbortError") { alert(err.name, err.message); } } return directoryHandle; } return new Promise((resolve) => { const input = document.createElement('input'); input.type = 'directories'; input.webkitdirectory = true; if ('showPicker' in HTMLInputElement.prototype) { input.showPicker(); } else { input.click(); } }); }

---

le lien du code original : https://web.dev/patterns/files/open-a-directory?hl=fr

est-il possible d'avoir le nom destination du dossier dans un texte?

Bonsoir,

j'avais trouver ceci aussi : https://github.com/nwutils/nw-progra...-folder-select

le code ne fonctionne pas chez moi avec require.

mon code :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

import { openFolderExplorer } from './folder-select/index.js';   function callback(selection) { if (selection) { document.getElementById("Folder").value = selection; } else { alert('Vous avez annulé la destination du dossier.'); } }   function GetFolder() { openFolderExplorer(window, {directory: 'Desktop', title: 'Sélectionnez un dossier dans lequel stocker le fichier.'}, callback); }

---

button :

Code:

---

document.getElementById('FolderButton').addEventListener("click", GetFolder);

---

j'arrive pas à obtenir le application folder en sélectionnent le dossier. avez-vous une solution comment puis-je avoir le folder (voir image en dessous)?
Pièce jointe 654568

Bonjour, j'ai trouver la solution à mon problème mais j'ai un message erreur :

Citation:

---

Uncaught SyntaxError: import declarations may only appear at top level of a module

---

le code :

Code:

---

import { selectFolder } from './select-folder.js';

---

le code select-folder.js :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

import { spawn } from 'child_process';   const selectFolder = ({description, root, newFolderButton}) => ` function selectFolder { [System.Reflection.Assembly]::LoadWithPartialName("System.windows.forms") | Out-Null   $form = New-Object System.Windows.Forms.FolderBrowserDialog $form.showNewFolderButton = ${newFolderButton} $form.rootfolder = '${root}' $form.description = '${description}' $show = $form.showDialog() if ($show -eq "OK"){ return $form.selectedPath } else { write-error "cancelled" } }   $folder = selectFolder write-host $folder `;   /**  * @param {string} [root='desktop'] - check [specialfolder](https://docs.microsoft.com/en-us/dotnet/api/system.environment.specialfolder?view=netframework-4.7.2) for more options  * @param {string} [description='Select Folder'] - description  * @param {boolean} [newFolderButton='true'] - show newFolderButton or not  *  * @return {Promise} selected folder or cancelled string  */ export default (options = {}, folder) => new Promise((resolve, reject) => { const {root = 'desktop', description = 'Select Folder', newFolderButton = 1} = options;   const child = spawn('powershell.exe', [selectFolder({description, root, newFolderButton})]); child.stdout.on('data', data => { data = data.toString(); if (data.length > 1) folder = data; }); child.stderr.on('data', data => { data = data.toString(); if (data.includes('cancelled')) resolve('cancelled'); else reject(data); }); child.on('exit', () => { resolve(folder) }); child.stdin.end(); })

---

tous les infirmations folderbrowserdialog : https://github.com/VandeurenGlenn/wi...er/tree/master

avez-vous une solution pour enlever le message erreur avec import { selectFolder } from './select-folder.js' ?

\ô/

Citation:

---

Bonjour, j'ai trouver la solution à mon problème mais j'ai un message erreur :

Citation:

---

Uncaught SyntaxError: import declarations may only appear at top level of a module

---

---

comme tu utilises les directives import/export il te faut déclarer tes scripts avec le type="module".

Quelque chose comme :

Code:

---

1 2 3 4 5

<script type="module" src="nom-fichier-module.js"></script> <script type="module"> import {ma_variable} from "./nom-fichier-module.js" ; // utilisation de ma_variable </script>

---

Bonsoir Dave Hiock,

Avec plusieurs jours tentative que j'ai pas réussi de lancer folderbrowserdialog avec le fichier select-folder.js qui m'afficher une erreur mais le modification dans le html et popup toujours le mème message erreur.

Citation:

---

Uncaught SyntaxError: import declarations may only appear at top level of a module

---

alors je l'ai refait dans le fichier popup.js mais il reconnais pas ce code car il m'affiche le mème erreur.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

import { spawn } from 'child_process'; <= erreur   function selectFolder(dest, tit, dos) { const child = spawn('powershell.exe', [FolderBrowserDialog({dest, tit, dos})]); child.stdout.on('data', data => { data = data.toString(); if (data.length > 1) folder = data; }); child.stderr.on('data', data => { data = data.toString(); if(data.includes('cancelled')) { resolve('cancelled'); } else { reject(data); } }); child.on('exit', () => { resolve(folder) }); child.stdin.end(); }

---

comment puis-je lancer powershell dans le fichier popup.js car il reconnais pas ce code import { spawn } from 'child_process'; ?