Skip to content

Commit 0a4f321

Browse files
committed
minor
1 parent 48e8f65 commit 0a4f321

File tree

1 file changed

+14
-7
lines changed

1 file changed

+14
-7
lines changed

5-network/09-resume-upload/article.md

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,18 +16,20 @@ Unfortunately, it won't help us to resume the upload here, as it triggers when t
1616

1717
Maybe it was buffered by a local network proxy, or maybe the remote server process just died and couldn't process them, or it was just lost in the middle and didn't reach the receiver.
1818

19-
So, this event is only useful to show a nice progress bar.
19+
That's why this event is only useful to show a nice progress bar.
2020

21-
To resume upload, we need to know exactly the number of bytes received by the server. And only the server can tell that.
21+
To resume upload, we need to know *exactly* the number of bytes received by the server. And only the server can tell that, so we'll make an additional request.
2222

2323
## Algorithm
2424

25-
1. First, we create a file id, to uniquely identify the file we're uploading, e.g.
25+
1. First, create a file id, to uniquely identify the file we're going to upload:
2626
```js
2727
let fileId = file.name + '-' + file.size + '-' + +file.lastModifiedDate;
2828
```
2929
That's needed for resume upload, to tell the server what we're resuming.
3030

31+
If the name or the size or the last modification date changes, then there'll be another `fileId`.
32+
3133
2. Send a request to the server, asking how many bytes it already has, like this:
3234
```js
3335
let response = await fetch('status', {
@@ -42,17 +44,20 @@ To resume upload, we need to know exactly the number of bytes received by the se
4244
4345
This assumes that the server tracks file uploads by `X-File-Id` header. Should be implemented at server-side.
4446
47+
If the file don't yet exist at the server, then the server response should be `0`
48+
4549
3. Then, we can use `Blob` method `slice` to send the file from `startByte`:
4650
```js
4751
xhr.open("POST", "upload", true);
4852
49-
// send file id, so that the server knows which file to resume
53+
// File id, so that the server knows which file we upload
5054
xhr.setRequestHeader('X-File-Id', fileId);
51-
// send the byte we're resuming from, so the server knows we're resuming
55+
56+
// The byte we're resuming from, so the server knows we're resuming
5257
xhr.setRequestHeader('X-Start-Byte', startByte);
5358
5459
xhr.upload.onprogress = (e) => {
55-
console.log(`Uploaded ${startByte + e.loaded} of ${startByte + e.total}`);
60+
console.log(`Отправлено ${startByte + e.loaded} из ${startByte + e.total}`);
5661
};
5762
5863
// file can be from input.files[0] or another source
@@ -72,4 +77,6 @@ But you can download it and run locally for the full demonstration:
7277
7378
[codetabs src="upload-resume" height=200]
7479
75-
As you can see, modern networking methods are close to file managers in their capabilities -- control over headers, progress indicator, sending file parts, etc.
80+
As we can see, modern networking methods are close to file managers in their capabilities -- control over headers, progress indicator, sending file parts, etc.
81+
82+
We can implement resumable upload and much more.

0 commit comments

Comments
 (0)