mirror of
https://github.com/ethereum/go-ethereum.git
synced 2026-07-25 06:06:44 +00:00
fixed multi uploading images
This commit is contained in:
ishadurin
parent
03b9ae7cf6
commit
dfcd42e917
5 changed files with 152 additions and 98 deletions
125
swarm/examples/album/file-manager.js
Normal file
125
swarm/examples/album/file-manager.js
Normal file
|
|
@ -0,0 +1,125 @@
|
||||||
|
function uploadFile(files, nr, uri) {
|
||||||
|
// when uploading complete - redirect to new address
|
||||||
|
if (files.length <= nr) {
|
||||||
|
if (uri != "") {
|
||||||
|
onUploadingComplete(uri);
|
||||||
|
}
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var currentFile = files[nr];
|
||||||
|
if (isNotImage(currentFile.type)) {
|
||||||
|
uploadFile(files, nr + 1, uri);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var xhr = new XMLHttpRequest();
|
||||||
|
xhr.onreadystatechange = function () {
|
||||||
|
if (xhr.readyState === 4) {
|
||||||
|
var newHash = xhr.responseText;
|
||||||
|
if (newHash.length != 64) {
|
||||||
|
// something wrong
|
||||||
|
console.log("Something wrong on uploading");
|
||||||
|
console.log(newHash);
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log("new hash - " + newHash);
|
||||||
|
insertImage(files, nr, newHash, currentFile.name);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
xhr.open("PUT", uri + "imgs/" + currentFile.name, true);
|
||||||
|
xhr.setRequestHeader('Content-Type', currentFile.type);
|
||||||
|
|
||||||
|
readFile(currentFile, function (result) {
|
||||||
|
xhr.send(result);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function readFile(file, onComplete) {
|
||||||
|
var reader = new FileReader();
|
||||||
|
reader.onload = function (evt) {
|
||||||
|
if (onComplete) {
|
||||||
|
onComplete(evt.target.result)
|
||||||
|
}
|
||||||
|
};
|
||||||
|
reader.readAsArrayBuffer(file);
|
||||||
|
}
|
||||||
|
|
||||||
|
function insertImage(files, nr, newHash, fileName) {
|
||||||
|
// insert image into index
|
||||||
|
var img = new Image();
|
||||||
|
img.onload = function () {
|
||||||
|
var blur = imageToUrl(img, 5, 5);
|
||||||
|
var thumbData = [];
|
||||||
|
var thumbSize = 200;
|
||||||
|
if (img.naturalWidth > img.naturalHeight) {
|
||||||
|
// landscape thumbnail
|
||||||
|
var h = img.naturalHeight * thumbSize / img.naturalWidth;
|
||||||
|
thumbData[0] = imageToUrl(img, thumbSize, h);
|
||||||
|
thumbData[1] = [thumbSize, h];
|
||||||
|
} else if (img.naturalWidth < img.naturalHeight) {
|
||||||
|
// portrait thumbnail
|
||||||
|
var w = img.naturalWidth * thumbSize / img.naturalHeight;
|
||||||
|
thumbData[0] = imageToUrl(img, w, thumbSize);
|
||||||
|
thumbData[1] = [w, thumbSize];
|
||||||
|
} else {
|
||||||
|
// square
|
||||||
|
thumbData[0] = imageToUrl(img, thumbSize, thumbSize);
|
||||||
|
thumbData[1] = [w, thumbSize];
|
||||||
|
}
|
||||||
|
|
||||||
|
// update index
|
||||||
|
var imgData = [];
|
||||||
|
imgData[0] = "imgs/" + fileName;
|
||||||
|
imgData[1] = [img.naturalWidth, img.naturalHeight];
|
||||||
|
imgs.data.splice(eidx, 0, {img: imgData, thumb: thumbData, blur: blur});
|
||||||
|
console.log("this one");
|
||||||
|
uploadFile(files, nr + 1, "/bzz:/" + newHash + "/");
|
||||||
|
};
|
||||||
|
|
||||||
|
img.src = "/bzz:/" + newHash + "/imgs/" + fileName;
|
||||||
|
}
|
||||||
|
|
||||||
|
function isNotImage(type) {
|
||||||
|
var imageType = /^image\//;
|
||||||
|
return !imageType.test(type);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onUploadingComplete(uri) {
|
||||||
|
var xhr = new XMLHttpRequest();
|
||||||
|
xhr.onreadystatechange = function () {
|
||||||
|
if (xhr.readyState === 4) {
|
||||||
|
var i = xhr.responseText;
|
||||||
|
window.location.replace("/bzz:/" + i + "/");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
sendImages(xhr, uri);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleFiles(files) {
|
||||||
|
uploadFile(files, 0, "");
|
||||||
|
}
|
||||||
|
|
||||||
|
function sendImages(xhr, uri) {
|
||||||
|
// set up request
|
||||||
|
xhr.open("PUT", uri + "data.json", true);
|
||||||
|
xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
|
||||||
|
// send the collected data as JSON
|
||||||
|
xhr.send(JSON.stringify(imgs));
|
||||||
|
}
|
||||||
|
|
||||||
|
// do it because I love jQuery
|
||||||
|
function jqueryInit() {
|
||||||
|
// setup upload file selector
|
||||||
|
var fileElem = jQuery("#fileElem");
|
||||||
|
jQuery("#fileSelect").on("click", function (e) {
|
||||||
|
if (fileElem) {
|
||||||
|
fileElem.click();
|
||||||
|
}
|
||||||
|
|
||||||
|
e.preventDefault();
|
||||||
|
});
|
||||||
|
}
|
||||||
BIN
swarm/examples/album/images/favicon.ico
Normal file
BIN
swarm/examples/album/images/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 305 B |
|
|
@ -1,20 +1,26 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
<meta name="viewport" content="width=device-width,initial-scale=1"/>
|
||||||
|
<link rel="shortcut icon" href="images/favicon.ico"/>
|
||||||
|
<script src="jquery.js"></script>
|
||||||
|
<script>
|
||||||
|
$.noConflict();
|
||||||
|
</script>
|
||||||
<script src="mootools-core-1.4.js" type="text/javascript"></script>
|
<script src="mootools-core-1.4.js" type="text/javascript"></script>
|
||||||
<script src="mootools-more-1.4.js" type="text/javascript"></script>
|
<script src="mootools-more-1.4.js" type="text/javascript"></script>
|
||||||
<script src="mootools-idle.js" type="text/javascript"></script>
|
<script src="mootools-idle.js" type="text/javascript"></script>
|
||||||
<script src="mootools-mooswipe.js" type="text/javascript"></script>
|
<script src="mootools-mooswipe.js" type="text/javascript"></script>
|
||||||
<script src="index.js" type="text/javascript"></script>
|
|
||||||
<link href="index.css" rel="stylesheet" type="text/css"/>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<noscript>
|
|
||||||
<h2>Frak! JavaScript required :'(</h2>
|
|
||||||
</noscript>
|
|
||||||
<div id="gallery"></div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
|
<script src="index.js" type="text/javascript"></script>
|
||||||
|
<script src="file-manager.js" type="text/javascript"></script>
|
||||||
|
<link href="index.css" rel="stylesheet" type="text/css"/>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>
|
||||||
|
<h2>Frak! JavaScript required :'(</h2>
|
||||||
|
</noscript>
|
||||||
|
<div id="gallery"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -264,15 +264,6 @@ function centerThumb(duration)
|
||||||
fscr = new Fx.Scroll(elist, { duration: duration }).start(x, y);
|
fscr = new Fx.Scroll(elist, { duration: duration }).start(x, y);
|
||||||
}
|
}
|
||||||
|
|
||||||
function sendImgs(xhr, uri) {
|
|
||||||
// set up request
|
|
||||||
xhr.open("PUT", uri + "data.json", true);
|
|
||||||
xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
|
|
||||||
|
|
||||||
// send the collected data as JSON
|
|
||||||
xhr.send(JSON.stringify(imgs));
|
|
||||||
}
|
|
||||||
|
|
||||||
function imageToUrl(img, w, h) {
|
function imageToUrl(img, w, h) {
|
||||||
var can = document.createElement('canvas');
|
var can = document.createElement('canvas');
|
||||||
can.width = w;
|
can.width = w;
|
||||||
|
|
@ -282,70 +273,6 @@ function imageToUrl(img, w, h) {
|
||||||
return can.toDataURL();
|
return can.toDataURL();
|
||||||
}
|
}
|
||||||
|
|
||||||
function uploadFile(files, nr, uri) {
|
|
||||||
if(files.length <= nr) {
|
|
||||||
if(uri != "") {
|
|
||||||
var xhr = new XMLHttpRequest();
|
|
||||||
xhr.onreadystatechange = function() { if (xhr.readyState === 4) {
|
|
||||||
var i = xhr.responseText;
|
|
||||||
window.location.replace("/bzz:/" + i + "/");
|
|
||||||
}};
|
|
||||||
sendImgs(xhr, uri);
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
var imageType = /^image\//;
|
|
||||||
var file = files[nr];
|
|
||||||
if(!imageType.test(file.type)) {
|
|
||||||
uploadFile(files, nr + 1, uri);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
var xhr = new XMLHttpRequest();
|
|
||||||
xhr.onreadystatechange = function() { if (xhr.readyState === 4) {
|
|
||||||
var i = xhr.responseText;
|
|
||||||
|
|
||||||
// insert image into index
|
|
||||||
var img = new Image();
|
|
||||||
img.onload = function() {
|
|
||||||
var blur = imageToUrl(img, 5, 5);
|
|
||||||
var thumbData = [];
|
|
||||||
var thumbSize = 200;
|
|
||||||
if(img.naturalWidth > img.naturalHeight) {
|
|
||||||
// landscape thumbnail
|
|
||||||
var h = img.naturalHeight * thumbSize / img.naturalWidth;
|
|
||||||
thumbData[0] = imageToUrl(img, thumbSize, h);
|
|
||||||
thumbData[1] = [thumbSize, h];
|
|
||||||
} else {
|
|
||||||
// portrait thumbnail
|
|
||||||
var w = img.naturalWidth * thumbSize / img.naturalHeight;
|
|
||||||
thumbData[0] = imageToUrl(img, w, thumbsize);
|
|
||||||
thumbData[1] = [w, thumbSize];
|
|
||||||
}
|
|
||||||
// update index
|
|
||||||
var imgData = [];
|
|
||||||
imgData[0] = "imgs/" + file.name;
|
|
||||||
imgData[1] = [img.naturalWidth, img.naturalHeight];
|
|
||||||
imgs.data.splice(eidx, 0, {img: imgData, thumb: thumbData, blur: blur});
|
|
||||||
uploadFile(files, nr + 1, "/bzz:/" + i + "/");
|
|
||||||
}
|
|
||||||
img.src = "/bzz:/" + i + "/imgs/" + file.name;
|
|
||||||
return;
|
|
||||||
}};
|
|
||||||
xhr.open("PUT", uri + "imgs/" + file.name, true);
|
|
||||||
xhr.setRequestHeader('Content-Type', file.type);
|
|
||||||
|
|
||||||
var reader = new FileReader();
|
|
||||||
reader.onload = function(evt) {
|
|
||||||
xhr.send(evt.target.result);
|
|
||||||
};
|
|
||||||
reader.readAsArrayBuffer(file);
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleFiles(files) {
|
|
||||||
uploadFile(files, 0, "");
|
|
||||||
}
|
|
||||||
|
|
||||||
function deleteImg()
|
function deleteImg()
|
||||||
{
|
{
|
||||||
if(imgs.data.length < 2) return; // empty albums not allowed
|
if(imgs.data.length < 2) return; // empty albums not allowed
|
||||||
|
|
@ -367,7 +294,7 @@ function deleteImg()
|
||||||
xhrd.send();
|
xhrd.send();
|
||||||
}};
|
}};
|
||||||
|
|
||||||
sendImgs(xhr, "");
|
sendImages(xhr, "");
|
||||||
}
|
}
|
||||||
|
|
||||||
function moveUpDown(off)
|
function moveUpDown(off)
|
||||||
|
|
@ -380,7 +307,7 @@ function moveUpDown(off)
|
||||||
var i = xhr.responseText;
|
var i = xhr.responseText;
|
||||||
window.location.replace("/bzz:/" + i + "/#" + (eidx + off));
|
window.location.replace("/bzz:/" + i + "/#" + (eidx + off));
|
||||||
}};
|
}};
|
||||||
sendImgs(xhr, "");
|
sendImages(xhr, "");
|
||||||
}
|
}
|
||||||
|
|
||||||
function moveUp()
|
function moveUp()
|
||||||
|
|
@ -435,16 +362,6 @@ function onMainReady()
|
||||||
ehdr.set('html', dsc.join(' '));
|
ehdr.set('html', dsc.join(' '));
|
||||||
ehdr.setStyle('display', (dsc.length? 'block': 'none'));
|
ehdr.setStyle('display', (dsc.length? 'block': 'none'));
|
||||||
|
|
||||||
// setup upload file selector
|
|
||||||
var fileSelect = document.getElementById("fileSelect"),
|
|
||||||
fileElem = document.getElementById("fileElem");
|
|
||||||
fileSelect.addEventListener("click", function (e) {
|
|
||||||
if (fileElem) {
|
|
||||||
fileElem.click();
|
|
||||||
}
|
|
||||||
e.preventDefault(); // prevent navigation to "#"
|
|
||||||
}, false);
|
|
||||||
|
|
||||||
// complete thumbnails
|
// complete thumbnails
|
||||||
var d = duration;
|
var d = duration;
|
||||||
if(first !== false)
|
if(first !== false)
|
||||||
|
|
@ -494,6 +411,8 @@ function onMainReady()
|
||||||
var data = imgs.data[eidx + 1];
|
var data = imgs.data[eidx + 1];
|
||||||
Asset.images([data.img[0], data.blur]);
|
Asset.images([data.img[0], data.blur]);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
jqueryInit();
|
||||||
}
|
}
|
||||||
|
|
||||||
function showThrobber()
|
function showThrobber()
|
||||||
|
|
|
||||||
4
swarm/examples/album/jquery.js
vendored
Normal file
4
swarm/examples/album/jquery.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue