download progress & js

[xgqfrms]

download progress & js

how to get download progress in js?

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress

https://stackoverflow.com/questions/18126406/how-can-i-get-the-progress-of-a-downloading-script
https://stackoverflow.com/questions/16690740/how-to-show-loading-status-in-percentage-for-ajax-response
https://stackoverflow.com/questions/18323152/get-download-progress-in-node-js-with-request

https://www.w3schools.com/howto/howto_js_progressbar.asp
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_progressbar_3

https://ourcodeworld.com/articles/read/56/how-to-get-the-progress-of-an-upload-or-download-with-jquery-ajax
https://zinoui.com/blog/ajax-request-progress-bar
https://coderwall.com/p/je3uww/get-progress-of-an-ajax-request

[xgqfrms]

processing.js

https://processing.org/
http://processingjs.org/articles/jsQuickStart.html#whyprocessingjs

https://lethain.com/getting-started-with-processing-js/

[xgqfrms]

JakeChampion/fetch#89

https://stackoverflow.com/questions/35711724/upload-progress-indicators-for-fetch
https://stackoverflow.com/questions/36453950/upload-file-with-fetch-api-in-javascript-and-show-progress

https://developer.mozilla.org/zh-CN/docs/Web/API/Response/status
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

function consume(stream, total = 0) {
    while (stream.state === "readable") {
        var data = stream.read();
        total += data.byteLength;
        console.log("received " + data.byteLength + " bytes (" + total + " bytes in total).");
    }
    if (stream.state === "waiting") {
        stream.ready.then(() => consume(stream, total));
    }
    return stream.closed;
}

fetch("https://cdn.xgqfrms.xyz/json/data.json")
.then(res => consume(res.body))
.then(() => console.log("consumed the entire body without keeping the whole thing in memory!"))
.catch((e) => console.error("something went wrong", e));

https://davidwalsh.name/fetch

[xgqfrms]

Fetch & Streams API

Progress Indicator Examples

https://fetch-progress.anthum.com/
https://github.com/AnthumChris/fetch-progress-indicators

https://github.com/xyz-data/fetch-progress-indicators

[xgqfrms]

axios & progress

https://github.com/axios/axios
https://github.com/axios/axios#request-config

{
  // `onUploadProgress` allows handling of progress events for uploads
  onUploadProgress: function (progressEvent) {
    // Do whatever you want with the native progress event
  },

  // `onDownloadProgress` allows handling of progress events for downloads
  onDownloadProgress: function (progressEvent) {
    // Do whatever you want with the native progress event
  },
}

[xgqfrms]

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 *
 * @description Fetch & Streams API & Progress Indicator Examples
 * @link https://github.com/xyz-data/fetch-progress-indicators
 * @augments
 * @example fetchProgress();
 *
 */

const fetchProgress = (url = `https://cdn.xgqfrms.xyz/json/data.json`, debug = false) => {
    const streamConsume = (stream, total = 0) => {
        while (stream.state === "readable") {
            let data = stream.read();
            total += data.byteLength;
            console.log(`received ${data.byteLength} bytes; (${total} bytes in total).`);
        }
        if (stream.state === "waiting") {
            stream.ready.then(() => consume(stream, total));
        }
        return stream.closed;
    };
    fetch(url)
    .then(res => streamConsume(res.body))
    .then(() => console.log("consumed the entire body without keeping the whole thing in memory!"))
    .catch((e) => console.error("something went wrong", e));
};

export default fetchProgress;

export {
    fetchProgress,
};

[xgqfrms]

ueditor

https://github.com/fex-team/ueditor
https://ueditor.baidu.com/website/download.html#ueditor

http://fex.baidu.com/ueditor/#start-start
http://fex.baidu.com/ueditor/#server-deploy

[xgqfrms]

https://ueditor.baidu.com/website/onlinedemo.html
https://ueditor.baidu.com/website/umeditor.html
https://ueditor.baidu.com/doc/

[xgqfrms]

wangEditor

基于 javascript 和 css 开发的 Web富文本编辑器， 轻量、简洁、易用、开源免费

http://www.wangeditor.com/index.html
https://github.com/wangfupeng1988/wangEditor/

https://www.kancloud.cn/wangfupeng/wangeditor3/335769

$ npm i -S wangeditor

var E = window.wangEditor;
var editor = new E('#div1');
editor.create();

https://github.com/wangfupeng1988/wangEditor/blob/master/example/demo/in-react/src/App.js

// React refs

---

https://github.com/wangfupeng1988/wangEditor/issues/1746

https://codepen.io/webgeeker/pen/EdNoEJ

[xgqfrms]

$ npm audit
$ npm audit fix

https://nodesecurity.io/advisories/328

[xgqfrms]

XSS

https://jsxss.com/zh/index.html

https://github.com/leizongmin/js-xss

[xgqfrms]

Chinese character bug

中文乱码 & UTF-8

[xgqfrms]

Node.js & Unix/Linux & NVM

nvm

https://github.com/creationix/nvm

https://github.com/xyz-data/RAIO/issues/242

https://github.com/xyz-data/RAIO/issues/230

---

https://zhuanlan.zhihu.com/p/22493707
http://logs.libuv.org/node.js/2016-06-28

[xgqfrms]

FormData

https://www.raymondcamden.com/2016/05/10/uploading-multiple-files-at-once-with-fetch/

function processForm(e) {
    e.preventDefault();
    
    var formData = new FormData();
    if($f1.val()) {
        var fileList = $f1.get(0).files;
        for(var x=0;x<fileList.length;x++) {
            formData.append('file'+x, fileList.item(x));    
        }
    }

    fetch('http://localhost:3000/upload', {
        method:'POST',
        body:formData   
    }).then(function(res) {
        console.log('Status', res);
    }).catch(function(e) {
        console.log('Error',e);
    });
    
}

[xgqfrms]

https://www.cnblogs.com/xgqfrms/p/10458475.html

[xgqfrms]

formData

https://www.cnblogs.com/xgqfrms/p/12336376.html