js/InputFile.js at master · code4sabae/js · GitHub

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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
import{ImageUploader}from"./ImageUploader.js";
import{uploadFile}from"./uploadFile.js";

classInputFileextendsHTMLElement{
constructor(){
super();

constname=this.getAttribute("name");
constaccept=this.getAttribute("accept");
//console.log(uploadurl, maxwidth, maxsize);
constmultiple=this.getAttribute("multiple")!=null;

constinp=document.createElement("input");
this.appendChild(inp);
inp.type="file";
inp.accept=accept;
if(multiple){
inp.multiple=true;
}

constinp2=document.createElement("input");
this.appendChild(inp2);
inp2.type="hidden";
inp2.name=name;

constimgc=document.createElement("div");
this.imgc=imgc;
this.appendChild(imgc);
inp.onchange=async(e)=>{
constuploadurl=this.getAttribute("uploadurl");
constmaxwidth=this.getAttribute("maxwidth");
constmaxsize=this.getAttribute("maxsize");

if(!multiple){
while(this.imgc.firstElementChild){
this.imgc.removeChild(this.imgc.firstElementChild);
}
}
constfiles=[];
for(constfileofe.target.files){
files.push(file);
}
// files.sort((a, b) => a.lastModified - b.lastModified); // 更新古い順
files.sort((a,b)=>(a<b ? -1 : ((a>b ? 1 : 0))));// 名前順
// console.log(files.map(f => f.name + " " + f.lastModified));
constps=[];
for(constfileoffiles){
consttype=file.type;
constp=newPromise((res,rej)=>{
try{
if(type.startsWith("image/")){
constimgup=newImageUploader(uploadurl);
imgup.onload=res;
imgup.setFile(file,maxwidth,maxsize);
imgc.appendChild(imgup);
}else{
constinpurl=document.createElement("input");
imgc.appendChild(inpurl);
uploadFile(uploadurl,file,maxsize).then((url)=>{
inpurl.value=url;
res();
});
}
}catch(e){
rej(e);
}
});
ps.push(p);
if(!multiple){
break;
}
}
awaitPromise.all(ps);
inp2.value=this.value;
this.onupload({target: this});
};
}

getname(){
returnthis.getAttribute("name");
}

getvalue(){
consturls=[];
for(leti=0;i<this.imgc.children.length;i++){
urls.push(this.imgc.children[i].value);
}
returnurls.join(",");
}

setvalue(urls){
if(urls==null||urls.length===0){
return;
}
constuploadurl=this.getAttribute("uploadurl");
consturl=urls.split(",");
for(constnofurl){
constimgup=newImageUploader(uploadurl);
imgup.setImage(n);
this.imgc.appendChild(imgup);
}
}
}
customElements.define("input-file",InputFile);

export{InputFile};