Skip to content

Commit 6b4606a

Browse files
javascript-2020javascript-2020
committed
save file
1 parent aa98fb3 commit 6b4606a

File tree

1 file changed

+141
-59
lines changed

1 file changed

+141
-59
lines changed

‎blog/25-07-23/streaming-upload-with-fetch/streaming-upload-with-fetch.html‎

Lines changed: 141 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,178 @@
11

22

3+
<!-- headers
4+
cross-origin-isolate
5+
-->
6+
7+
8+
<!DOCTYPE html>
9+
310

411
<html>
512

613
<head>
14+
<meta charset=UTF-8>
715

8-
<title>streaming upload with fetch in the browser</title>
9-
10-
<base href='https://javascript-2020.github.io/blog/23-07-25/streaming-upload-with-fetch.html'>
16+
<title>
17+
streaming upload with fetch
18+
</title>
19+
<meta name=description content=''>
1120

1221
<link rel=icon type='image/png' href='/blog/image/blog-30.png'>
22+
<meta name=viewport content='width=device-width, initial-scale=1'>
23+
24+
25+
<base href='https://ext-code.com/blog/23-07-25/streaming-upload-with-fetch.html/'>
26+
<link rel=canonical href='https://ext-code.com/blog/23-07-25/streaming-upload-with-fetch.html/streaming-upload-with-fetch.html'>
1327

14-
</head>
15-
16-
17-
<body>
1828

29+
<script type='application/ld+json'>
30+
31+
{
32+
"@context" : "https://schema.org",
33+
"@type" : "TechArticle",
34+
"headline" : "streaming upload with fetch",
35+
"description" : "",
36+
"author" : {"@type":"Person","name":"Matthew Richards"},
37+
"datePublished" : "2025-08-31",
38+
"dateModified" : "2025-10-15",
39+
"mainEntityOfPage" : {"@type":"WebPage","@id":"https://ext-code.com/blog/23-07-25/streaming-upload-with-fetch.html/streaming-upload-with-fetch.html"},
40+
"publisher" : {"@type":"Organization","name":"ext-code.com","logo":{"@type":"ImageObject","url":"https://ext-code.com/favicon.ico"}},
41+
}
42+
43+
</script>
44+
45+
46+
<!--
47+
//:
48+
-->
49+
50+
51+
<script src='https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js'></script>
52+
53+
54+
<script src='https://libs.ext-code.com/js/dom/component/component.js'></script>
55+
56+
<script init>
57+
//console.clear();
58+
console.log('streaming-upload-with-fetch.html');
59+
console.log();
60+
console.json=v=>console.log(JSON.stringify(v,null,4));
61+
var version='v1.0',df=true
62+
;
63+
64+
65+
var ext;
66+
var $;
67+
var datatype;
68+
var menumod;
69+
var code;
70+
var debug;
71+
72+
73+
var rollup;
74+
var test;
75+
76+
//:
77+
78+
79+
async function init(){
80+
//debug('init',version);
81+
82+
menu = menumod();
83+
84+
85+
await Promise.all([
86+
]);
87+
88+
89+
await initdom(document.body);
90+
91+
92+
}//init
93+
94+
95+
//:
96+
97+
98+
(async()=>{
99+
100+
mod.stack.add;
101+
102+
({ext} = await import('https://libs.ext-code.com/js/io/ext-loader/ext-loader.m.js'));
103+
104+
var promise = ext.load.libs(
105+
'js/dom/$.js',
106+
'js/core/datatype.js',
107+
'js/dom/menumod/menumod.js',
108+
'js/dom/keydown/keydown.js',
109+
'js/dom/code/v2.0/code-v2.0.js.api',
110+
'js/debug/debug.js',
111+
);
112+
[$,datatype,menumod,keydown,code] = await promise;
113+
114+
code.initmod({ext,$,datatype,menumod});
115+
116+
mod.stack.complete;
117+
118+
})();
119+
120+
121+
</script init>
122+
123+
124+
125+
126+
<link rel=stylesheet href='/blog/css/blog.css'>
127+
19128
<style>
20129

21130
html
22-
{}
131+
{height:100%;font-family:arial}
23132
body
24-
{font-family:arial;margin:20px}
133+
{min-height:calc(100% - 40px);display:flex;flex-direction:column;gap:10px;margin:20px;align-items:center;
134+
padding-bottom:200px;
135+
}
136+
body>*
137+
{max-width:1400px;width:100%;padding:0 20px;}
138+
25139

26140
code
27141
{display:block;border-radius:5px;background:whitesmoke;font-family:monospace;padding:10px;white-space:pre;
28142
margin:20px 0;
29143
}
144+
30145

31146
</style>
147+
148+
</head>
149+
150+
151+
<body>
152+
153+
<blog-hdr component=grp1 v2.0>
154+
<h1 class=title>
155+
streaming upload with fetch
156+
</h1>
157+
<time slot=date datetime="2025-10-15">
158+
15 Oct 2025
159+
</time>
160+
</blog-hdr>
32161

33162

34-
<h3>
35-
streaming upload with fetch
36-
</h3>
37163

38164

39165
<div>
40166

41-
streaming upload with fetch in the browser, requires http2 on the server
167+
streaming upload with fetch in the browser, requires http2 on the server
42168

43169
</div>
44170

45171

46-
<code>
47-
48-
(async()=>{
49-
50-
51-
var url = 'https://localhost:3010/';
52-
53-
54-
var stream = new ReadableStream({start}).pipeThrough(new TextEncoderStream());
55-
56-
function start(ctrl){
57-
58-
var count = 0;
59-
var timer = setTimeout(send,1000);
60-
61-
62-
function send(){
63-
console.log('sent');
64-
ctrl.enqueue('Hello');
65-
66-
if(count==5){
67-
ctrl.close();
68-
return;
69-
}
70-
count++;
71-
72-
timer = setTimeout(send,1000);
73-
74-
}//send
75-
76-
}//start
77-
78-
172+
<snippet-console id=fetch-ex component v2.0 src='ex/fetch.js'>
173+
</snippet-console>
79174

80175

81-
82-
var res = await fetch(url,{method:'post',body:stream,duplex:'half'});
83-
var txt = await res.text();
84-
console.log(txt);
85-
86-
87-
88-
89-
})();
90-
91-
92-
93-
</code>
94176

95177
</body>
96178

0 commit comments

Comments
 (0)