Discussion :

[Miska59]

Bonjour,

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

mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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?

[Doksuri]

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Miska59]

bonjour Doksuri,

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


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

[Doksuri]

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

[Miska59]

je trouver un API qui fonctionne avec Firefox avec showDirectoryPicker.

voici le code modifier :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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?

[Miska59]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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)?

[Miska59]

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

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

le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

le code select-folder.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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' ?

[Dave Hiock]

\ô/

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

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[Miska59]

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.

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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'; ?