FileSystemAccessOnAndroid/index.html at main · cs-util-com/FileSystemAccessOnAndroid · GitHub

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Android File System Test</title>
    <style>
        body {
            font-family: system-ui, -apple-system, sans-serif;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f4f4f5;
        }
        h1 { font-size: 1.5rem; color: #333; }

        .card {
            background: white;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }

        button {
            width: 100%;
            padding: 15px;
            margin-bottom: 10px;
            border: none;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.2s;
        }

        .btn-blue { background-color: #007bff; color: white; }
        .btn-green { background-color: #28a745; color: white; }
        .btn-purple { background-color: #6f42c1; color: white; }

        button:active { opacity: 0.8; }
        button:disabled { background-color: #ccc; cursor: not-allowed; }

        #log {
            background: #1e1e1e;
            color: #00ff00;
            padding: 15px;
            border-radius: 8px;
            font-family: monospace;
            height: 250px;
            overflow-y: auto;
            font-size: 0.85rem;
            white-space: pre-wrap;
        }
    </style>
</head>
<body>

    <h1>Android File System Demo</h1>
    <p>Test read/write capabilities on Chrome for Android.</p>

    <div class="card">
        <button id="btnRead" class="btn-blue">📂 Open File (Read)</button>
        <button id="btnSave" class="btn-green">💾 Save New File</button>
        <button id="btnDir" class="btn-purple">📁 Open Directory (Read/Write)</button>
    </div>

    <div id="log">Logs will appear here...</div>

    <script>
        const logBox = document.getElementById('log');

        function log(msg, type = 'info') {
            const timestamp = new Date().toLocaleTimeString();
            const color = type === 'error' ? '#ff6b6b' : '#00ff00';
            logBox.innerHTML += `<div style="color:${color}">[${timestamp}] ${msg}</div>`;
            logBox.scrollTop = logBox.scrollHeight;
            console.log(msg);
        }

        // Feature Detection
        if ('showDirectoryPicker' in window && 'showOpenFilePicker' in window) {
            log("✅ File System Access API is supported!");
        } else {
            log("❌ API NOT supported. Use Chrome 132+ or Desktop.", 'error');
            document.querySelectorAll('button').forEach(b => b.disabled = true);
        }

        // 1. OPEN FILE (Read)
        document.getElementById('btnRead').addEventListener('click', async () => {
            try {
                log("Requesting file picker...");
                const [fileHandle] = await window.showOpenFilePicker();
                const file = await fileHandle.getFile();
                const text = await file.text();

                log(`File opened: ${file.name}`);
                log(`Size: ${file.size} bytes`);
                log(`Content snippet: ${text.substring(0, 50)}...`);
            } catch (err) {
                if (err.name === 'AbortError') log("User cancelled selection.");
                else log(`Error: ${err.message}`, 'error');
            }
        });

        // 2. SAVE FILE (Write)
        document.getElementById('btnSave').addEventListener('click', async () => {
            try {
                const handle = await window.showSaveFilePicker({
                    suggestedName: 'mobile-test.txt',
                    types: [{
                        description: 'Text File',
                        accept: { 'text/plain': ['.txt'] },
                    }],
                });

                const writable = await handle.createWritable();
                await writable.write(`Hello from Android! Timestamp: ${new Date().toLocaleString()}`);
                await writable.close();

                log(`✅ File saved successfully!`);
            } catch (err) {
                if (err.name === 'AbortError') log("User cancelled save.");
                else log(`Error: ${err.message}`, 'error');
            }
        });

        // 3. ROBUST DIRECTORY WRITE (Android Safe)
        document.getElementById('btnDir').addEventListener('click', async () => {
            try {
                log("Requesting directory access...");
                const dirHandle = await window.showDirectoryPicker({ mode: "readwrite" });

                // 1. Create the file handle (This usually works)
                let fileHandle;
                try {
                    fileHandle = await dirHandle.getFileHandle('session-log.txt', { create: true });
                } catch (e) {
                    log("Could not create file handle.", 'error');
                    return;
                }

                // 2. Try to write directly (Works on Desktop, often fails on Android)
                try {
                    log("Attempting direct write...");
                    const writable = await fileHandle.createWritable();
                    await writable.write(`Log Entry: ${new Date().toISOString()}`);
                    await writable.close();
                    log("✅ Success! Direct write worked.");
                } catch (err) {
                    // 3. Catch the specific "Read-only" error
                    if (err.message.includes("read-only") || err.name === "NoModificationAllowedError") {
                        log("⚠️ Direct write failed (Android Restriction).");
                        log("🔄 Falling back to Save Picker...");

                        // Fallback: Ask user to explicitly save this specific file
                        const saveHandle = await window.showSaveFilePicker({
                            suggestedName: 'session-log.txt',
                        });
                        const writable = await saveHandle.createWritable();
                        await writable.write(`Log Entry: ${new Date().toISOString()}`);
                        await writable.close();
                        log("✅ Saved via fallback!");
                    } else {
                        throw err; // Re-throw other errors
                    }
                }

            } catch (err) {
                log(`Error: ${err.message}`, 'error');
            }
        });
    </script>
</body>
</html>