- getting form input element and data attributes
- multiple upload
- setting up network speed
(for only clients) - realtime stats
- overwrite mode
- restricted file mime-types
- reject option for server side
Install - npm i largedata --save
Madalina Taina @MadyTzn
Example Project or @github/largedata/sample_upload_project/
Node.Js - server.js
const ld = require('largedata').default;const option = {
encoding:'binary', // type [string] : file encoder
storage:"./", // type [string] : your upload folder location
overwrite: true, // type [boolean] : file overwrite option
mime_types : [] // type [Array] : accepts only selected files (empty: accepts all)
} // Express.js
app.use('/upload',ld.router,function (req, res, next) {
/* sample reject option
ld.reject("Permission denied !")
*/
res.render("pages/index",{ title:"render your upload html" });
}) ld.formdata(option,function (fields,files,client){
if(files){ // Input files (It's only return the successful uploads)
console.log(files);
}
if(fields){ // HTML input elements & attributes
for (const items of fields) {
console.log( items );
client.post({
hello: "Good Morning",
language_test: "testing some different languages :> Günaydın, доброе утро,
शुभ प्रभात ,добрий ранок, おはようございます, 早上好, buổi sáng tốt lành"
}); // send data-object from server to client (status:0005)
}
}
})formdata (files) paramater :
{
done: true,
storage: './',
name: 'test_10.iso',
size: '10.00MB'
}formdata (fields) paramater :
{
attribute: [
{ type: 'text' },
{ style: 'width: 100px;' },
{ name: 'test_input' },
{ large: 'your data attr' },
{ test: 'some numbers 123456' },
{ custom: 'your custom type' },
],
id: 'test_input',
value: 'hello'
}<! DOCTYPE html >
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<center>
<form id="my_upload">
<input type='range' id="your_range" /><br>
<input type='text' style="width: 100px;" name="test_input" custom="your custom type" data-large="your data attr" data-test="some numbers 123456" /><br><br>
<input type='file' multiple />
<input type="button" id="send" value="Submit"/>
<br><br>
<div id='output_div' />
</form>
</center>
</html>
<script>
jQuery('#send').click(function(){
// OUTPUT_DIV
var info_output = document.getElementById("info_div");
//OPTIONS
const Options = {
form_id : "my_upload", // Form id
speed : "8000", // Network speed type(Kbps) -> 1000Kbps = 1Mbps
post_url : "/upload", // Post data url
}
SendForm = new LargeData(Options);
//UPLOAD INPUT FILES
SendForm.upload(function( upload_stats , network_stats , err ) {
//OUTPUT_DIV
info_output.innerHTML = JSON.stringify(upload_stats) + "<br>" +
JSON.stringify(network_stats)+"<br>" + JSON.stringify(err)
})
// SEND INPUT FIELDS
SendForm.fields(function(form,err) {
//OUTPUT_DIV
info_output.innerHTML = JSON.stringify(form) + "<br>" + JSON.stringify(err)
})
});
</script>
<script src="largedata.min.js"></script>Upload done (output)
{
"code":"0003",
"msg":"FINISHED",
"list":[
{"name":"test_text_100.txt","size":"100.0MB","mime":"text/plain"},
{"name":"test_iso_1.iso","size":"1.0GB","mime":""},
{"name":"test_video_5.mp4","size":"5.0GB","mime":"video/mp4"},
]
}Your custom data from server to client (output)
{ "code":"0005","msg":"SUCCESS","response":{
"hello":"Good Morning",
"language_test":"testing some different languages :> Günaydın, доброе утро,
शुभ प्रभात ,добрий ранок, おはようございます, 早上好, buổi sáng tốt lành"}
}Upload current process(output)
{
"code":"0004",
"msg":"UPLOADING",
"name":"test_video_5.mp4",
"percent":"20"
}Network (output)
{
"network": {
"speed":"1.0",
"prefix":"Mbps",
"type":"ADSL,LAN,3G,4G"
},
"time": {
"hour":"1",
"minute":"20"
}
}network speed a valid only on the upload proccess. This option is unusable from for the sending form elements.
overwrite (default: true) type: "boolean"
if your set the "false", upload attempt is rejected.
mime_types (default:empty) type: "array"
accepts only your own mime-type list for upload.
//EXAMPLE LIST
mime_types : [
"application/javascript", "application/json", "application/zip",
"audio/mpeg", "image/gif", "image/jpeg","image/png", "text/css",
"text/html", "text/php","text/plain" , "your mime type here" , "etc.."
].reject("your message")
now you can allowed or rejected client formdata to on the server side.
//reject function example usage in express application
app.use('/upload' , largedata.router, function (req, res, next) {
largedata.reject("Permission denied !") // client rejected ...
res.render("pages/index",{ title:"test" });
})Note: if you had the js file path issue on the browser side then you can try changing to full path like
http://<your_host>/<api_url>/largedata.min.jsor semi url<api_url>/largedata.min.js
Build: Node.js,Ts,Js,WebApi