Preface
File and Blob in JS
File
Creating File objects
<text>: File content
<filename>: File name
1
| var file = new File(["<text>", "<filename>"]);
|
Getting byte arrays
Reading files
1
2
3
4
5
| var fileReader = new FileReader();
fileReader.onload = function(event) {
console.log(fileReader.result);
}
fileReader.readArrayBuffer(file);
|
1
2
3
4
5
| var fileReader = new FileReader();
fileReader.onload = function(event) {
console.log(event.target.result);
}
fileReader.readArrayBuffer(file);
|
Blob
Creating Blob objects
<text>: File content
1
| var blob = new File(["<text>"]);
|
Getting byte arrays
Getting strings
Modifying byte data
Getting DataView object
1
| var dataView = new DataView(await blob.arrayBuffer());
|
Viewing bytes based on byte address
<index>: byte address
1
| dataView.getUint8(<index>);
|
Modifying bytes based on byte address
<index>: byte address
<value>: modified byte value
1
| dataView.setUint8(<index>, <value>);
|
Obtaining files through browsers
1
2
3
4
5
6
7
| <input type="file" onchange="fun(event)">
<script>
const fun = function(event) {
console.log(event.target.files[0]);
}
</script>
|
By dragging and dropping
1
2
3
4
5
6
7
8
9
10
11
| <div style="width: 100px; height: 100px; background-color: red;" ondrop="fun1(event)" ondragover="fun2(event)"></div>
<script>
const fun1 = function(event) {
event.preventDefault();
console.log(event.dataTransfer.files[0]);
}
const fun2 = function(event) {
event.preventDefault();
}
</script>
|
By Fetch
accept: The allowed file types to choose
1
2
3
4
5
6
7
8
9
10
11
12
| <input type="button" onclick="fun()">
<script>
const fun = function() {
fetch("./index.json").then(function(response) {
return response.blob();
}).then(function async (result) {
console.log(result.text());
console.log(result.arrayBuffer());
});
}
</script>
|
By showOpenFilePicker
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <button onclick="fun()"></button>
<script>
async function fun() {
const pickerOpts = {
types: [
{
description: "Images",
accept: {
"image/*": [".png", ".gif", ".jpeg", ".jpg"],
},
},
],
excludeAcceptAllOption: true,
multiple: false,
};
let fileHandle;
[fileHandle] = await window.showOpenFilePicker(pickerOpts);
const file = await fileHandle.getFile();
console.log(await file.arrayBuffer());
}
</script>
|
FilePicker for file operations
Creating a file
1
2
3
4
5
6
7
8
| <button onclick="fun()"></button>
<script>
async function fun() {
const fileHandle = await window.showSaveFilePicker();
console.log(fileHandle);
}
</script>
|
Opening a file
1
2
3
4
5
6
7
8
9
10
| <button onclick="fun()"></button>
<script>
async function fun() {
const [fileHandle] = await window.showOpenFilePicker();
const file = await fileHandle.getFile();
const result = await file.text();
console.log(result);
}
</script>
|
Saving a file
- Open file and write to file
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <button onclick="fun()"></button>
<script>
const text = "test";
async function fun() {
const [fileHandle] = await window.showOpenFilePicker();
const stream = await fileHandle.createWritable();
await stream.write(text);
await stream.close();
}
</script>
|
Saving as a file
- Create a new file and write to file
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <button onclick="fun()"></button>
<script>
const text = "test";
async function fun() {
const fileHandle = await window.showSaveFilePicker();
const stream = await fileHandle.createWritable();
await stream.write(text);
await stream.close();
}
</script>
|
URL
- The obtained URL can be accessed in the browser through the address bar, but cannot be used to navigate to a page through an
a tag
DataURL
<input type="button" onclick="fun()">
<s