You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 5-network/09-resume-upload/article.md
+14-7Lines changed: 14 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -16,18 +16,20 @@ Unfortunately, it won't help us to resume the upload here, as it triggers when t
16
16
17
17
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.
18
18
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.
20
20
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.
22
22
23
23
## Algorithm
24
24
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:
26
26
```js
27
27
let fileId =file.name+'-'+file.size+'-'++file.lastModifiedDate;
28
28
```
29
29
That's needed for resume upload, to tell the server what we're resuming.
30
30
31
+
If the name or the size or the last modification date changes, then there'll be another `fileId`.
32
+
31
33
2. Send a request to the server, asking how many bytes it already has, like this:
32
34
```js
33
35
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
42
44
43
45
This assumes that the server tracks file uploads by `X-File-Id` header. Should be implemented at server-side.
44
46
47
+
If the file don't yet exist at the server, then the server response should be `0`
48
+
45
49
3. Then, we can use `Blob` method `slice` to send the file from `startByte`:
46
50
```js
47
51
xhr.open("POST", "upload", true);
48
52
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
50
54
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
52
57
xhr.setRequestHeader('X-Start-Byte', startByte);
53
58
54
59
xhr.upload.onprogress = (e) => {
55
-
console.log(`Uploaded ${startByte +e.loaded} of ${startByte +e.total}`);
60
+
console.log(`Отправлено ${startByte +e.loaded} из ${startByte +e.total}`);
56
61
};
57
62
58
63
// 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:
72
77
73
78
[codetabs src="upload-resume" height=200]
74
79
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.
0 commit comments