Skip to content

Commit e55de15

Browse files
javascript-2020javascript-2020
committed
save file
1 parent f7b1392 commit e55de15

File tree

1 file changed

+115
-43
lines changed

1 file changed

+115
-43
lines changed

‎utils/misc/base64-encode-file/v2.0/base64-encode-file-v2.0.html‎

Lines changed: 115 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,24 @@
11

22

3+
<!DOCTYPE html>
34

45
<html>
56

67
<head>
8+
<meta charset=utf-8>
79

8-
<title>base64 encode file</title>
10+
<title>
11+
Base64 Encode File
12+
</title>
13+
914
<meta name=description content='base64 encode files, optional dataurl'>
1015

11-
<base href='https://ext-code.com/utils/misc/base64-encode-file/'>
12-
<base href='https://javascript-2020.github.io/utils/misc/base64-encode-file/base64-encode-file.html'>
13-
<link rel=canonical href='https://ext-code.com/utils/misc/base64-encode-file/base64-encode-file.html'>
14-
15-
<meta name=viewport content='width=device-width, initial-scale=1'>
1616
<link rel=icon type='image/png' href='image/base64-30.png'>
17+
<meta name=viewport content='width=device-width, initial-scale=1'>
1718

19+
<base href='https://ext-code.com/utils/misc/base64-encode-file/'>
20+
<link rel=canonical href='https://ext-code.com/utils/misc/base64-encode-file/base64-encode-file.html'>
1821

19-
2022
<script type='application/ld+json'>
2123
{
2224
"@context" : "https://schema.org",
@@ -33,7 +35,6 @@
3335
}
3436
</script>
3537

36-
3738

3839
<script src='https://libs.ext-code.com/js/dom/component/component.js'></script>
3940

@@ -42,7 +43,7 @@
4243
console.log('base64-encode-file-v2.0.html');
4344
console.log();
4445
console.json=v=>console.log(JSON.stringify(v,null,4));
45-
var df=true,did='base64-encode-file'
46+
var df=true,version='v2.0'
4647
;
4748

4849
var ext;
@@ -68,15 +69,15 @@
6869
async function init(){
6970

7071
//keydown = keydown();
71-
menu = mod.menumod();
72+
menu = menumod();
7273

7374
hdr = mod['hdr-base64'];
7475
//mod.menu.main = mod.menu.main();
75-
preview.filemod = mod['filemod[preview]'];
76-
preview.filename = mod['filename-ui[preview]'];
77-
output.filemod = mod['filemod[output]']
78-
output.filename = mod['filename-ui[output]'];
79-
log = mod.log;
76+
preview.filemod = mod['file-preview'];
77+
preview.filename = mod['fn-preview'];
78+
output.filemod = mod['file-output']
79+
output.filename = mod['fn-output'];
80+
log = mod['log-mod'];
8081

8182
hdr.initmod({ext,$,menu,menumod});
8283
//mod.menu.main.initmod({ext,$,menumod,editor,filemod});
@@ -135,9 +136,13 @@
135136
<style id=page-inline>
136137

137138
html
138-
{height:100%}
139+
{height:100%;font-family:arial}
139140
body
140-
{height:calc(100% - 40px);display:flex;flex-direction:column;gap:10px}
141+
{min-height:calc(100% - 40px);display:flex;flex-direction:column;gap:20px;margin:20px;align-items:center;
142+
padding-bottom:200px;
143+
}
144+
body>*
145+
{max-width:1400px;width:100%;padding:0 20px;}
141146

142147

143148
.icon
@@ -170,11 +175,19 @@
170175
#blob label
171176
{width:100px;text-align:right;margin-right:20px}
172177

178+
#encode-root
179+
{display:flex}
173180
#dataurl-root
174-
{margin-left:20px;display:inline-flex;align-items:center}
175-
181+
{margin-left:20px;display:inline-flex;align-items:center;border:1px solid lightgray;border-radius:5px;padding:5px 10px}
176182
#dataurl
177183
{width:20px;height:20px;margin:0;margin-left:10px}
184+
#pretty-root
185+
{margin-left:20px;display:inline-flex;align-items:center;border:1px solid lightgray;border-radius:5px;padding:5px 10px}
186+
#pretty-len
187+
{width:50px;margin-left:10px}
188+
#pretty
189+
{width:20px;height:20px;margin:0;margin-left:10px}
190+
178191

179192
#b64
180193
{border:1px solid lightgray;padding:10px;flex:1;}
@@ -183,7 +196,7 @@
183196

184197

185198
#output
186-
{display:flex;flex-direction:column;gap:10px;border:1px solid lightgray;padding:10px}
199+
{display:flex;flex-direction:column;gap:10px;border:1px solid lightgray;padding:10px;margin-top:50px}
187200
#output-hdr
188201
{display:flex;align-items:center}
189202
#output .user
@@ -208,22 +221,11 @@
208221

209222
<hdr-base64 component=grp v2.0>
210223
<img class=title src='image/base64-file-50.png' style='top:5px;height:40px'>
211-
<span slot=date>03 Aug 2025</span>
224+
<time slot=date datetime=2025-10-18>18 Oct 2025</time>
212225
</hdr-base64>
213226

214227

215228

216-
<div id=hdr>
217-
218-
<!--
219-
<main-menu-page>
220-
<script src='https://html-loader-1024713184986.us-central1.run.app/'></script>
221-
</main-menu-page>
222-
-->
223-
224-
</div>
225-
226-
227229
<div id=preview>
228230

229231
<div>
@@ -268,12 +270,17 @@
268270
</div>
269271

270272

271-
<div>
273+
<div id=encode-root>
272274
<input value=encode type=button>
273275
<span id=dataurl-root>
274276
dataurl
275277
<input id=dataurl type=checkbox>
276278
</span>
279+
<span id=pretty-root>
280+
pretty string
281+
<input id=pretty-len value=140>
282+
<input id=pretty type=checkbox>
283+
</span>
277284
</div>
278285

279286

@@ -412,8 +419,7 @@
412419
return;
413420
}
414421

415-
var dataurl = preview.dataurl.checked;
416-
cur.b64 = await encode(cur.blob,dataurl);
422+
cur.b64 = await encode(cur.blob);
417423

418424
b64.display();
419425

@@ -488,15 +494,9 @@
488494
//:
489495

490496

491-
async function encode(blob,dataurl){
497+
async function encode(blob){
492498

493499
var b64 = await blob_b64(blob);
494-
if(dataurl){
495-
496-
//var mime = getmime(blob.name);
497-
var mime = blob.type;
498-
b64 = `data:${mime};base64,${b64}`;
499-
}
500500
return b64;
501501

502502
}//encode
@@ -527,15 +527,87 @@
527527

528528

529529

530-
b64.display = function(){
530+
b64.display = async function(){
531531

532532
var str = '---';
533+
533534
if(cur.b64){
534535
str = cur.b64;
536+
537+
var dataurl = preview.dataurl.checked;
538+
if(dataurl){
539+
540+
var mime = 'application/octet-stream';
541+
if(cur.blob){
542+
if(cur.blob.type){
543+
mime = cur.blob.type;
544+
}else{
545+
if(blob.name){
546+
mime = getmime(blob.name);
547+
}
548+
}
549+
}
550+
str = `data:${mime};base64,${str}`;
551+
}
552+
553+
var pretty = $('#pretty').checked;
554+
if(pretty){
555+
var txt = str;
556+
var s = $('#pretty-len').value;
557+
var len = Number(s);
558+
if(isNaN(len)){
559+
log.red('invalid pretty lenth');
560+
return;
561+
}
562+
563+
var lines = [];
564+
var n = txt.length;
565+
for(var i=0;i<n;i+=len){
566+
567+
var line = txt.slice(i,i+len);
568+
lines.push(line);
569+
570+
}//for
571+
lines = lines.map((line,i)=>{
572+
573+
line = "'"+line+"'";
574+
if(i+1<lines.length){
575+
line = line.padEnd(len+5);
576+
line += '+';
577+
}else{
578+
line += ';';
579+
}
580+
return line;
581+
582+
});
583+
//lines.forEach(line=>console.log(line));
584+
str = lines.join('\n');
585+
}
586+
535587
}
536588

537589
$(b64.root,'#text').textContent = str;
538590

591+
if(str!='---'){
592+
var err;
593+
try{
594+
595+
await navigator.clipboard.writeText(str);
596+
597+
}
598+
catch(err2){
599+
600+
err = err2;
601+
602+
}//catch
603+
if(err){
604+
log.red(err.message);
605+
return;
606+
}
607+
608+
log.green('copied to clipboard');
609+
}
610+
539611
}//display
540612

541613

0 commit comments

Comments
 (0)