mirror of
https://github.com/wailsapp/wails.git
synced 2026-03-15 15:15:51 +01:00
30ffbba060* feat(v3): add file-input example for issue #4862 Minimal example demonstrating HTML file input functionality: - Single file selection - Multiple file selection - Files or directories (webkitdirectory) - Accept filter (note: not enforced by macOS) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * refactor(example): use JS runtime dialog API instead of Go backend Update file-input example to use wails.Dialogs.OpenFile() from the JS runtime instead of a custom Go FileService backend. This demonstrates the recommended approach for dialog functionality. Fixes #4862 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * refactor(example): use generated bindings for dialog API Update file-input example to use proper generated bindings instead of inline JS runtime calls. The example now demonstrates: - HTML file input elements (single, multiple, webkitdirectory) - Wails Dialog API via generated FileService bindings Fixes #4862 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * docs: add changelog entry for macOS file input fix Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
101 lines
3.2 KiB
HTML
101 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>File Input Test</title>
|
|
<script src="/wails/runtime.js"></script>
|
|
<style>
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
|
|
padding: 20px;
|
|
background: #f5f5f5;
|
|
}
|
|
h1 { color: #333; font-size: 18px; margin-bottom: 20px; }
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 15px;
|
|
}
|
|
.card {
|
|
background: white;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
.card h2 { font-size: 14px; margin: 0 0 10px 0; }
|
|
input[type="file"] { font-size: 12px; width: 100%; }
|
|
button { font-size: 12px; padding: 6px 12px; cursor: pointer; }
|
|
#result {
|
|
margin-top: 15px;
|
|
padding: 10px;
|
|
background: #e8f5e9;
|
|
border-radius: 4px;
|
|
white-space: pre-wrap;
|
|
font-size: 12px;
|
|
max-height: 120px;
|
|
overflow-y: auto;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>File Input Test (#4862)</h1>
|
|
<div class="grid">
|
|
<div class="card">
|
|
<h2>1. Single File</h2>
|
|
<input type="file" onchange="show(this)">
|
|
</div>
|
|
<div class="card">
|
|
<h2>2. Multiple Files</h2>
|
|
<input type="file" multiple onchange="show(this)">
|
|
</div>
|
|
<div class="card">
|
|
<h2>3. Files or Directories</h2>
|
|
<input type="file" webkitdirectory onchange="show(this)">
|
|
</div>
|
|
<div class="card">
|
|
<h2>4. Directory Only (Wails API)</h2>
|
|
<button onclick="openDir()">Choose Directory</button>
|
|
</div>
|
|
<div class="card">
|
|
<h2>5. Filtered .txt (Wails API)</h2>
|
|
<button onclick="openFiltered()">Choose .txt File</button>
|
|
</div>
|
|
</div>
|
|
<div id="result">Click a file input or button to test...</div>
|
|
<script type="module">
|
|
import { OpenDirectoryOnly, OpenFilteredFile } from './bindings/github.com/wailsapp/wails/v3/examples/file-input/fileservice.js';
|
|
|
|
window.show = function(input) {
|
|
const r = document.getElementById('result');
|
|
if (!input.files.length) {
|
|
r.textContent = 'Cancelled';
|
|
return;
|
|
}
|
|
let t = 'Selected ' + input.files.length + ' file(s):\n';
|
|
for (const f of input.files) {
|
|
t += '• ' + f.name + ' (' + f.size + ' bytes)\n';
|
|
}
|
|
r.textContent = t;
|
|
};
|
|
|
|
window.openDir = async function() {
|
|
const r = document.getElementById('result');
|
|
try {
|
|
const path = await OpenDirectoryOnly();
|
|
r.textContent = path;
|
|
} catch (e) {
|
|
r.textContent = 'Error: ' + e;
|
|
}
|
|
};
|
|
|
|
window.openFiltered = async function() {
|
|
const r = document.getElementById('result');
|
|
try {
|
|
const path = await OpenFilteredFile();
|
|
r.textContent = path;
|
|
} catch (e) {
|
|
r.textContent = 'Error: ' + e;
|
|
}
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|