Skip to content

Commit 16dd37c

Browse files
syntaxbendersyntaxbender
committed
rc v0.1.0
1 parent d4a073b commit 16dd37c

File tree

6 files changed

+1148
-191
lines changed

6 files changed

+1148
-191
lines changed

‎LICENSE.md‎

Lines changed: 675 additions & 0 deletions
Large diffs are not rendered by default.

‎README.md‎

Lines changed: 61 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,61 @@
1-
# sbImageUploader
1+
# HTML5 Javascript Image Uploader
2+
3+
## Usage
4+
5+
First import javascript file.
6+
``` html
7+
<script type="text/javascript" src="assets/js/sbImageUploader.js"></script>
8+
```
9+
10+
Add textbox area inside body tags.
11+
```html
12+
<body>
13+
...
14+
.
15+
.
16+
17+
<div class="sbImageContainer"></div>
18+
19+
.
20+
.
21+
...
22+
</body>
23+
```
24+
25+
Call init method, it will be ready for use.
26+
``` javascript
27+
sbImageUploader.init();
28+
```
29+
30+
Inıt method with additional parameters.
31+
32+
``` javascript
33+
sbImageUploader.init();
34+
{
35+
uploadButtonText : "Yükle",
36+
startNumber : 3,
37+
maxImageNumber : 10,
38+
contentTypeErrorMessage : "Yalnızca jpeg, gif, bmp ve png dosyaları yükleyebilirsiniz.",
39+
acceptableTypes : ["image/gif", "image/jpeg", "image/png","image/bmp"],
40+
}
41+
```
42+
Get uploaded files with get method.
43+
44+
``` javascript
45+
sbImageUploader.get();
46+
```
47+
48+
## Notes
49+
Need json array output from backend.
50+
- First element of array indicate as boolean, upload succes or fail.
51+
- Second element of array indicate uploaded image filename.
52+
53+
Example output :
54+
``` javascript
55+
[true,"img.jpg"]
56+
```
57+
## The next commits targets
58+
- Register done function after image uploads.
59+
- Store filename received from backend or client.
60+
- Upload error message from backend.
61+
- Improvement for style.css, right now like a trash.

‎assets/css/style.css‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -113,8 +113,7 @@ div.uploadPercentage > img{
113113
position:absolute;z-index:999;width:calc(100% - 30px);height:calc(100% - 30px);top:15px;left:15px;display:block;
114114
}
115115
.uploadButtonBox > span{
116-
font-size: 18px;
117-
margin-top: 3px;
116+
font-size: 16px;
118117
display: block;
119118
font-weight: 700;
120119
}

‎assets/js/sbImageUploader.js‎

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
var sbImageUploader = {
2+
uploadButtonText : "Yükle",
3+
startNumber : 3,
4+
maxImageNumber : 10,
5+
contentTypeErrorMessage : "Yalnızca jpeg, gif, bmp ve png dosyaları yükleyebilirsiniz.",
6+
acceptableTypes : ["image/gif", "image/jpeg", "image/png","image/bmp"],
7+
imageCollector : {},
8+
uploadedImages : {},
9+
lock : false,
10+
uploadStartButton(text){
11+
let uploadStartIcon = document.createElement("img");
12+
uploadStartIcon.setAttribute("src","./assets/img/upload.svg");
13+
let uploadStartTextSpan = document.createElement("span");
14+
uploadStartTextSpan.innerHTML = text;
15+
let uploadButtonBox = document.createElement("div");
16+
uploadButtonBox.setAttribute("class","uploadButtonBox");
17+
uploadButtonBox.appendChild(uploadStartIcon);
18+
uploadButtonBox.appendChild(uploadStartTextSpan);
19+
return uploadButtonBox;
20+
},
21+
uploadDefContainer(index){
22+
let addIcon = document.createElement("img");
23+
addIcon.setAttribute("src","./assets/img/add.svg");
24+
let uploadLabel = document.createElement("label");
25+
let uploadInput = document.createElement("input");
26+
uploadInput.setAttribute("data-index",index);
27+
uploadInput.setAttribute("type","file");
28+
let uploadDefDiv = document.createElement("div");
29+
uploadDefDiv.setAttribute("class","imgPreview");
30+
uploadLabel.appendChild(uploadInput);
31+
uploadDefDiv.appendChild(addIcon);
32+
uploadDefDiv.appendChild(uploadLabel);
33+
return uploadDefDiv;
34+
},
35+
uploadImageChoosedContainer(index){
36+
let deleteIcon = document.createElement("img");
37+
deleteIcon.setAttribute("src","./assets/img/cancel.svg");
38+
let deleteIconDiv = document.createElement("div");
39+
deleteIconDiv.setAttribute("class","deleteImage");
40+
deleteIconDiv.setAttribute("data-index",index);
41+
deleteIconDiv.appendChild(deleteIcon);
42+
let uploadDefDiv = document.createElement("div");
43+
uploadDefDiv.setAttribute("class","imgPreview");
44+
uploadDefDiv.appendChild(deleteIconDiv);
45+
return uploadDefDiv;
46+
},
47+
uploadDoneContainer(index){
48+
let doneIcon = document.createElement("img");
49+
doneIcon.setAttribute("src","./assets/img/done.svg");
50+
let deleteIcon = document.createElement("img");
51+
deleteIcon.setAttribute("src","./assets/img/cancel.svg");
52+
let doneIconDiv = document.createElement("div");
53+
doneIconDiv.setAttribute("class","uploadDone");
54+
let deleteIconDiv = document.createElement("div");
55+
deleteIconDiv.setAttribute("data-index",index);
56+
deleteIconDiv.setAttribute("class","deleteImage");
57+
let uploadDefDiv = document.createElement("div");
58+
uploadDefDiv.setAttribute("class","imgPreview");
59+
doneIconDiv.appendChild(doneIcon);
60+
deleteIconDiv.appendChild(deleteIcon);
61+
uploadDefDiv.appendChild(doneIconDiv);
62+
uploadDefDiv.appendChild(deleteIconDiv);
63+
return uploadDefDiv;
64+
},
65+
uploadImage(method, url, parameters = {}, isSync,num){
66+
let xhr = new XMLHttpRequest();
67+
xhr.open(method, url, true);
68+
xhr.onreadystatechange = function () {
69+
if (this.readyState == 4){
70+
if(this.status == 200){
71+
sbImageUploader.uploadDone(true,num,this.responseText);
72+
}else{
73+
sbImageUploader.uploadDone(false,num,"hata");
74+
}
75+
}
76+
};
77+
xhr.upload.addEventListener("progress", function(e){
78+
if (e.lengthComputable){
79+
let imgdiv = document.querySelectorAll("div.sbImageContainer > div.imgPreview")[num];
80+
const percentComplete = ((e.loaded/e.total)*100);
81+
imgdiv.innerHTML = "<div class=\"uploadPercentage\"><img class=\"circle-img\" src=\"./assets/img/circle.svg\">"+Math.round(percentComplete)+"%</div>";
82+
}
83+
});
84+
xhr.send(parameters);
85+
},
86+
deleteImage(index){
87+
if(this.imageCollector[index] != null) delete this.imageCollector[index];
88+
else if(this.uploadedImages[index] != null) delete this.uploadedImages[index];
89+
let imgdiv = document.querySelectorAll("div.sbImageContainer > div.imgPreview")[index];
90+
imgdiv.removeAttribute("style");
91+
imgdiv.innerHTML = this.uploadDefContainer(index).innerHTML;
92+
},
93+
uploadDone(status, index, data){
94+
data = JSON.parse(data);
95+
if(status === true && data[0] === true){
96+
this.uploadedImages[index] = data[1];
97+
}
98+
delete this.imageCollector[index];
99+
let imgdiv = document.querySelectorAll("div.sbImageContainer > div.imgPreview")[index];
100+
imgdiv.innerHTML = this.uploadDoneContainer(index).innerHTML;
101+
if(Object.keys(this.imageCollector).length<1){
102+
this.uploadLock(false);
103+
}
104+
},
105+
showimage(element,data,filetype){
106+
let imgdiv = document.querySelectorAll("div.sbImageContainer > div.imgPreview");
107+
imgdiv[element].innerHTML = this.uploadImageChoosedContainer(element).innerHTML;
108+
const blob = new Blob([data], {type: filetype});
109+
imgdiv[element].setAttribute("style","background:url(\""+URL.createObjectURL(blob)+"\") no-repeat center center;")
110+
const totalImage = Object.keys(this.imageCollector).length+Object.keys(this.uploadedImages).length;
111+
if(totalImage==imgdiv.length){
112+
if(totalImage == this.maxImageNumber) return;
113+
imgdiv[imgdiv.length-1].insertAdjacentHTML("afterend",this.uploadDefContainer(imgdiv.length).outerHTML);
114+
}
115+
},
116+
generateContainer(){
117+
let buffer = "";
118+
for (let i=0; i<this.startNumber; i++){
119+
buffer += this.uploadDefContainer(i).outerHTML;
120+
}
121+
buffer += this.uploadStartButton(this.uploadButtonText).outerHTML;
122+
document.querySelector("div.sbImageContainer").innerHTML = buffer;
123+
},
124+
uploadLock(status){
125+
if(status===true){
126+
this.lock = true;
127+
let uploadbutton = document.querySelector("div.sbImageContainer > div.uploadButtonBox");
128+
uploadbutton.setAttribute("style", "background:#848484; color:rgb(204 204 204);");
129+
uploadbutton.querySelector("span").innerHTML = "...";
130+
let input = document.querySelectorAll("div.sbImageContainer > div.imgPreview input");
131+
for(let i=0; i<input.length; i++){
132+
input[i].setAttribute("disabled", true);
133+
}
134+
}else{
135+
this.lock=false;
136+
let uploadbutton = document.querySelector("div.sbImageContainer > div.uploadButtonBox");
137+
uploadbutton.removeAttribute("style");
138+
uploadbutton.querySelector("span").innerHTML = this.uploadButtonText;
139+
let input = document.querySelectorAll("div.sbImageContainer > div.imgPreview input");
140+
for(let i=0; i<input.length; i++){
141+
input[i].removeAttribute("disabled");
142+
}
143+
}
144+
},
145+
get(){
146+
return this.uploadedImages;
147+
},
148+
init(arr){
149+
if(arr["uploadButtonText"]) this.uploadButtonText = arr["uploadButtonText"];
150+
if(arr["startNumber"]) this.startNumber = arr["startNumber"];
151+
if(arr["maxImageNumber"]) this.maxImageNumber = arr["maxImageNumber"];
152+
if(arr["contentTypeErrorMessage"]) this.contentTypeErrorMessage = arr["contentTypeErrorMessage"];
153+
if(arr["acceptableTypes"]) this.acceptableTypes = arr["acceptableTypes"];
154+
155+
window.addEventListener('load', event => {
156+
this.generateContainer();
157+
window.addEventListener('change', event => {
158+
if(event.target.closest("div.sbImageContainer > div.imgPreview input")){
159+
let input = event.target.closest("div.sbImageContainer > div.imgPreview input");
160+
if(this.lock===true) return;
161+
if (input.files && input.files[0]){
162+
const index = input.getAttribute("data-index");
163+
const file = input.files[0];
164+
if(this.acceptableTypes.indexOf(file.type) != -1){
165+
this.imageCollector[index] = file;
166+
this.showimage(index,file,file.type);
167+
}else{
168+
alert(this.contentTypeErrorMessage);
169+
}
170+
}
171+
}
172+
});
173+
window.addEventListener('click', event => {
174+
if(event.target.closest("div.sbImageContainer > div.uploadButtonBox")){
175+
if(this.lock === true) return;
176+
let isEmpty = true;
177+
for(let i in this.imageCollector){
178+
if(this.uploadedImages[i] != null) continue;
179+
let formData = new FormData();
180+
formData.append('image', this.imageCollector[i]);
181+
this.uploadImage("POST", "./upload.php",formData, true, i); // beri bak
182+
isEmpty=false;
183+
}
184+
if(isEmpty===false)
185+
this.uploadLock(true);
186+
}else if(event.target.closest("div.sbImageContainer > div.imgPreview > div.deleteImage")){
187+
if(this.lock===true) return;
188+
let index = event.target.closest("div.sbImageContainer > div.imgPreview > div.deleteImage").getAttribute("data-index");
189+
this.deleteImage(index);
190+
}
191+
});
192+
});
193+
}
194+
}

0 commit comments

Comments
 (0)