From e5690754edf56cbbb538855448fdb1f507c077f9 Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Wed, 15 May 2024 18:15:33 -0300 Subject: client: move fetchWithProgress into xhr-util importable file --- src/static/xhr-util.js | 62 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 62 insertions(+) create mode 100644 src/static/xhr-util.js (limited to 'src/static/xhr-util.js') diff --git a/src/static/xhr-util.js b/src/static/xhr-util.js new file mode 100644 index 00000000..bc0698da --- /dev/null +++ b/src/static/xhr-util.js @@ -0,0 +1,62 @@ +/** + * This fetch function is adapted from a `loadImage` function + * credited to Parziphal, Feb 13, 2017. + * https://stackoverflow.com/a/42196770 + * + * The callback is generally run with the loading progress as a decimal 0-1. + * However, if it's not possible to compute the progress ration (which might + * only become apparent after a progress amount *has* been sent!), + * the callback will be run with the value -1. + * + * The return promise resolves to a manually instantiated Response object + * which generally behaves the same as a normal fetch response; access headers, + * text, blob, arrayBuffer as usual. Accordingly, non-200 responses do *not* + * reject the prmoise, so be sure to check the response status yourself. + */ +export function fetchWithProgress(url, progressCallback) { + return new Promise(resolve => { + const xhr = new XMLHttpRequest(); + let notifiedNotComputable = false; + + xhr.open('GET', url, true); + xhr.responseType = 'arraybuffer'; + + xhr.onprogress = event => { + if (notifiedNotComputable) { + return; + } + + if (!event.lengthComputable) { + notifiedNotComputable = true; + progressCallback(-1); + return; + } + + progressCallback(event.loaded / event.total); + }; + + xhr.onloadend = () => { + const body = xhr.response; + + const options = { + status: xhr.status, + headers: + parseResponseHeaders(xhr.getAllResponseHeaders()), + }; + + resolve(new Response(body, options)); + }; + + xhr.send(); + }); + + function parseResponseHeaders(headers) { + return ( + Object.fromEntries( + headers + .trim() + .split(/[\r\n]+/) + .map(line => line.match(/(.+?):\s*(.+)/)) + .map(match => [match[1], match[2]]))); + } +} -- cgit 1.3.0-6-gf8a5