/
demo3_load_files2zip.mini.html
86 lines (81 loc) · 3.53 KB
/
demo3_load_files2zip.mini.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo 3: Load Files into ZIP file with JSZip - minimal example</title>
<!-- Main CSS -->
<link href="css/main.css" rel="stylesheet">
<!-- JSZip is needed to handle ZIP files -->
<script src="js/jszip.js"></script>
<!-- FileSaver is needed to save the generated ZIP file as Download -->
<script src="js/filesaver.js"></script>
<script src="js/loadfile4dom.js"></script>
<script>
var zip = new JSZip();
zip.file("README.txt","LoadFile4DOM - Demo: Upload to ZIP\n\nThis is a ZIP-file created with LoadFile4DOM, that shows how to upload files into a ZIP-file with LoadFile4DOM. See https://niehausbert.gitlab.io/loadfile4dom/upload2zip.html ");
var lf4d = new LoadFile4DOM();
var options = {
"debug": false // if true, it will show the hidden <input type="file" ...> loaders in DOM
};
lf4d.init(document,options);
//-----------------------------------------------
//----- Create a new Loader "file2zip" -----------
//-----------------------------------------------
var file2zip = lf4d.get_loader_options("addfile2zip","all");
file2zip.returntype = "filehash";
// Define what to do with the loaded data
file2zip.onload = function (data,err) {
if (err) {
// do something on error, perr contains error message
console.error(err);
} else {
// do something with the file content in data e.g. store in a HTML textarea (e.g. <textarea id="mytextarea" ...>
console.log("CALL: file2zip.onload('" + data.name + "')");
var vNode = document.getElementById("outlist");
if (vNode) {
vNode.innerHTML = vNode.innerHTML + "<li>" + data.name + "</li>";
zip.file(data.name, data.file, {base64: true})
} else {
console.error("ERROR: DOM Element 'outlist' does not exist!");
}
}
};
// create the load dialog 'file2zip'
lf4d.create_load_dialog(file2zip);
//-----------------------------------------------
//--- DOWNLOAD ZIP ------------------------------
//---Use FileSaver.js by Eli Grey to save ZIP----
//-----------------------------------------------
function download_zip(pFilename,pZIP) {
var vFilename = pFilename || "my_loaded_files.zip";
pZIP.generateAsync({type:"blob"}).then(function (blob) { // 1) generate the zip file
saveAs(blob, vFilename); // 2) trigger the download
}, function (err) {
console.error("ERROR: generation of zip-file '" + vFilename + "' - "+err);
});
}
//-----------------------------------------------
</script>
</head>
<body onload="lf4d.create()">
<h2>LoadFile4DOM - Demo Load Files into ZIP file</h2>
<h3>Minimal</h3>
<hr>
<!-- Inject Loaded Filenames into 'outlist' -->
<b>Loaded Files:</b>
<button onclick="lf4d.open_dialog('addfile2zip');return false">Add File to ZIP Dialog</button>
<br>
<ul id="outlist">
</ul>
<hr>
<!-- generate ZIP -->
<b>ZIP-Filename:</b> <input type="text" id="tFilename" value="myfiles.zip">
<button onclick="download_zip(document.getElementById('tFilename').value,zip);return false">Save Generated ZIP</button>
<hr>
<center>
<b>
<a href="index.html"><< Demo Applications with LoadFile4DOM</a>
</b>
</center>
</body>
</html>