Skip to content

Instantly share code, notes, and snippets.

@tedshd

tedshd/messages.js

Created June 6, 2013 02:06
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save tedshd/5718821 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save tedshd/5718821 to your computer and use it in GitHub Desktop.
Download ZIP
yui uploader from hunter
Raw
messages.js
/**
* Spec : http://produce.corp.miiicasa.com/spec/miiiCloud_V2/?Page=Page_1-3_p_message_board_attach_files_done1
* Mockup : http://produce.corp.miiicasa.com/ued/visual_center/mockup/miiicloud_v2/page_1_3_p_message_board_attach_files_done1.png
*
* @authors Ted Shiu
* @date 2013-06-10 16:32:25
*
*/
$(function () {
var myFileList = {},
uploadList = {},
uploadQuantity = 0,
uploadId = 0,
currentFile = null,
uploading = false,
progressInfo = {
total : 0,
uploaded : 0,
uploading: 0
},
fileStatus = {};
// global var
window.fileStatus = fileStatus;
window.myFileList = myFileList;
window.uploadList = uploadList;
window.uploadQuantity = uploadQuantity;
window.progressInfo = progressInfo;
// show upload link
$('.message-uploader-body .button-row .upload-file-link').click(function(e) {
e.preventDefault();
$('.message-uploader-body .action').removeClass('hidden');
$('.message-uploader-body .upload-file-link').addClass('hidden');
});
// disable & enable submit button
$('.input-block-level').focus(function() {
$('.message-uploader-body form .btn').attr('disabled', false);
});
$('.input-block-level').blur(function() {
console.log($('.input-block-level').val());
if($('.input-block-level').val() === "") {
$('.message-uploader-body form .btn').attr('disabled', true);
}
});
// handle uploader
YUI().use('uploader', function (Y) {
// Manual Uploader Type Override
// Y.Uploader = Y.UploaderFlash;
// Y.Uploader = Y.UploaderHTML5;
// Instantiation
if (Y.Uploader.TYPE !== 'none') {
var uploader = new Y.Uploader({
selectFilesButton: Y.one('.message-uploader-body .upload-link'),
multipleFiles: true,
uploadURL: '/api/files/uploadFile?gid=-1',
fileFieldName: 'userfile',
swfURL: '/static/lib/yui3-3.10.2/build/uploader/assets/flashuploader.swf?t=' + Math.random(),
simLimit: 1
}).render('.render-uploader');
$('.render-uploader').removeClass('hidden');
// var uploaderOut = new Y.Uploader({
// width: 0,
// height: 0
// }).render('body');
// $('.yui3-button').addClass('hidden');
}
if (Y.Uploader.TYPE === 'html5') {
// alert('HTML5');
if ($('.message-uploader-body .upload-link')) {
$('.message-uploader-body .upload-link').append('<span>或拖曳檔案到這裡</span>');
}
uploader.set('dragAndDropArea', '.message-uploader-body .content');
// uploaderOut.set('dragAndDropArea', 'body');
//uploader.render('#selectFilesButtonContainer');
uploader.on(['dragenter', 'dragover'], function () {
$('.message-uploader-body .content').addClass('drop-tip');
});
uploader.on(['dragleave', 'drop'], function (e) {
$('.message-uploader-body .content').removeClass('drop-tip');
console.log('Drop');
console.log(e);
});
} else if (Y.Uploader.TYPE === 'flash') {
uploader.render('#selectFilesButtonContainer');
}
else {
console.log('No Flash or HTML5 capabilities detected.');
}
// EVENTS
var _progressBar = $('.miii-progress-list');
// file select
uploader.on('fileselect', fileSelectHandler);
function fileSelectHandler(e) {
var list = e.fileList.length;
$.each(e.fileList, function (idx, file) {
var attrs = file.getAttrs(),
fileSize = attrs.size;
console.log('this');
console.log(this);
console.log(e.fileList);
// render progress bar
for (var aMultiples = ['KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], nMultiple = 0, nApprox = fileSize / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
fileSize = nApprox.toFixed(2) + ' ' + aMultiples[nMultiple];
}
_progressBar.append(
'<div class="progress" id="' + attrs.id + '" >' +
'<div class="bar"></div>' +
'<div class="progress-body clearfix">' +
'<div class="info">' +
'<div class="file-name" title="' + attrs.name + '">' + attrs.name + '</div>' +
'<div class="file-size">' + fileSize + '</div>' +
'</div>' +
'<div class="action">' +
'<a class="close" href="javascript:void(0)" data-id="' + attrs.id + '" title="刪除">' +
'<i class="icon-remove"></i>' +
'</a>' +
'<div class="state">等待中</div>' +
'</div>' +
'</div>' +
'</div>'
);
// check file size
if (attrs.size >= 8000000000) {
// alert(attrs.id + "over 8G");
// delete this;
// uploadcomplete UI
$('#' + attrs.id + ' .state').html('大於 8G');
$('#' + attrs.id + ' .bar').css('width', '0');
$('#' + attrs.id).addClass('progress-danger');
fileStatus[attrs.id] = -1;
uploadQuantity = uploadQuantity - 1;
} else {
// cloneBar(attrs.id, attrs.name + ' ' + attrs.size);
progressInfo.total += attrs.size;
}
myFileList[attrs.id] = file;
});
uploadQuantity = uploadQuantity + list;
if (!uploading) {
setTimeout(myUpload, 1);
}
}
// uploadprogress
uploader.on('uploadprogress', uploadProgressHandler);
function uploadProgressHandler(e) {
var file = e.file || currentFile,
attrs = file.getAttrs();
// console.log("PROGRESS");
// console.log(attrs);
// console.log(file);
var percent = parseInt(e.bytesLoaded * 100 / e.bytesTotal);
// console.log($("#" + attrs.id));
// $('#' + attrs.id + ' .progress .bar').css("width", percent + "%");
// progress UI
$('#' + attrs.id + ' .bar').css('width', percent + '%');
$('#' + attrs.id + ' .state').html(percent + '%');
}
// uploadcomplete
uploader.on('uploadcomplete', uploadCompleteHandler);
function uploadCompleteHandler(e) {
var file = e.file || currentFile,
attrs = file.getAttrs();
fileStatus[attrs.id] = 1;
// uploadList[attrs.id] = file.get('file');
uploadList[attrs.id] = file.get('name');
console.log("data");
console.log(e);
console.log(e.data);
var data = $.parseJSON(e.data);
console.log(data);
console.log(data.status);
if (data.status === 'ok') {
uploadList[attrs.id] = {
date: data.date,
filename: file.get('name'),
tok: data.tok
};
// uploadok UI
$('#' + attrs.id + ' .state').html('完成');
$('#' + attrs.id + ' .bar').addClass('done');
$('#' + attrs.id + ' .bar').css('width', '100%');
console.log('ok');
// alert('ok');
} else if (data.status === 'fail') {
console.log('fail');
// alert('fail');
// uploadfail UI
$('#' + attrs.id + ' .state').html('上傳失敗');
$('#' + attrs.id + ' .bar').css('width', '0');
$('#' + attrs.id).addClass('progress-danger');
fileStatus[attrs.id] = -1;
uploadQuantity = uploadQuantity - 1;
}
console.log(e._type + ': ' + attrs['name'] + ' ' + attrs['size']);
uploadId++;
setTimeout(myUpload, 1);
}
// uploaderror
uploader.on('uploaderror', uploadErrorHandler);
function uploadErrorHandler(e) {
var id = currentFile.get('id'),
size = myFileList[id].get('size');
$('#' + id + ' .bar').css('width', '0');
$('#' + id).addClass('progress-danger');
fileStatus[id] = -1;
uploadQuantity = uploadQuantity - 1;
// cancel upload if equals to currentFile
var attrs = currentFile.getAttrs();
if (uploading && attrs.id == id) {
progressInfo.uploading = 0;
currentFile.cancelUpload();
uploadId++;
setTimeout(myUpload, 1);
}
console.log('Erroe-log');
console.log(e);
console.log(currentFile);
console.log(currentFile.get('id'));
// console.log(fileStatus.hasOwnProperty(id));
console.log(e.file);
console.log(e.source);
console.log(e.message);
console.log(e.status);
console.log(e.statusText);
// console.log(e._type + ': ' + e.file.getAttrs()['name'] + ' ' + e.file.getAttrs()['size']);
}
// myUpload
function myUpload() {
var fileList = uploader.get('fileList');
if ( ! fileList.hasOwnProperty(uploadId)) {
console.log('Upload Complete');
console.log(fileStatus);
console.log(uploadList);
uploading = false;
return;
}
uploading = true;
currentFile = fileList[uploadId];
var attrs = currentFile.getAttrs();
if (fileStatus.hasOwnProperty(attrs.id)) {
console.log('skip');
uploadId++;
setTimeout(myUpload, 1);
return;
}
uploader.upload(fileList[uploadId], '/api/files/uploadFile',{'gid':-1});
$('.message-uploader-body form .btn').attr('disabled', true);
}
// bind jQuery event
$('.miii-progress-list').delegate('a', 'click', CancelHandler);
function CancelHandler() {
// remove
var id = $(this).attr('data-id'),
size = myFileList[id].get('size');
// $('#' + id).css('width', '100%').addClass('bar-warning');
$('#' + id).remove();
// $(this).remove();
// handle error
if (fileStatus[id] === -1) {
return;
}
// alert(myFileList[id].get('size'));
if (fileStatus[id] === 1) {
delete uploadList[id];
}
if (fileStatus.hasOwnProperty(id)) {
progressInfo.uploaded = progressInfo.uploaded - size;
}
fileStatus[id] = -1;
uploadQuantity = uploadQuantity - 1;
// cancel upload if equals to currentFile
var attrs = currentFile.getAttrs();
if (uploading && attrs.id == id) {
progressInfo.uploading = 0;
currentFile.cancelUpload();
uploadId++;
setTimeout(myUpload, 1);
}
return false;
};
window.Y = Y;
window.uploader = uploader;
});
/**
* handle messages
* post message
* reply message
* del reply
* show all reply
* show more 10 messages
*/
// handle more message
// Hide when it over 8 line.
for (var i = 0; $('.messages-content').length > i; i++) {
console.log($('.messages-content:eq(' + i + ')').height());
if ($('.messages-content:eq(' + i + ')').height() > 174) {
$('.messages-content:eq(' + i + ')').css('height', '174px');
$('.messages-content:eq(' + i + ') + p').removeClass('hidden');
};
};
$('.messages-content + p').delegate('a', 'click', function(e) {
e.preventDefault();
console.log($('.messages-content', $(this).parents('.media-body')));
$('.messages-content', $(this).parents('.media-body')).css('height', '');
$(this).addClass('hidden');
});
// Post Message
$('.message-uploader-body form').submit(function(e) {
e.preventDefault();
$('.message-uploader-body form .btn').attr('disabled', true);
var x,
uploadData,
postData = [];
// global var
window.uploadData = uploadData;
window.postData = postData;
console.log('post data');
console.log(uploadList);
console.log($('textarea').val());
console.log($('.select-group').val());
for (x in uploadList) {
console.log(uploadList[x].date);
console.log(uploadList[x].filename);
console.log(uploadList[x].tok);
uploadData = {
date: uploadList[x].date,
filename:uploadList[x].filename,
tok:uploadList[x].tok
}
postData.push(JSON.stringify(uploadData));
};
console.log('postData');
console.log(postData);
$.ajax({
type: 'POST',
url: '/api/messages/add',
data: {
gid: $('.select-group').val(),
content: $('textarea').val(),
files: postData
}
}).done(function(status) {
console.log('POST MESSAGE FIN!');
console.log(status);
var data = $.parseJSON(status);
console.log(data);
console.log(data.status);
console.log(data.message);
if(data.status) {
console.log('ok');
// handle UI
$('.input-block-level').val("");
$('.miii-progress-list .progress').remove();
$(data.message).insertBefore('.miii-list-type-message .media:eq(0)');
}
});
});
// reply message
$('.miii-list-type-message').delegate('form', 'submit', function(e) {
e.preventDefault();
console.log('reply message');
console.log($(this));
console.log($('input', $(this)).val());
console.log($(this).parents('.media-type-comment').parents('.media').attr('data'));
if ($('.media-heading:eq(0) a:eq(2)', $(this).parents('.media-body'))) {
var gid = $('.media-heading:eq(0) a:eq(2)', $(this).parents('.media-body')).attr('data');
console.log(gid);
}
var replyFin = $('input', $(this)),
replyComment = $(this).parent('.media-body').parent('.media-type-comment');
$.ajax({
type: 'POST',
url: '/api/messages/reply',
data: {
rep_cont: $('input', $(this)).val(),
mid: $(this).parents('.media-type-comment').parents('.media').attr('data'),
gid: gid
}
}).done(function(status) {
console.log('Reply message FIN!');
console.log(status);
var data = $.parseJSON(status);
console.log(data);
console.log(data.status);
console.log(data.reply);
if(data.status) {
console.log('ok');
$(data.reply).insertBefore(replyComment);
replyFin.val("");
replyFin.blur();
}
});
});
// del reply
$('.miii-list-type-message').delegate('.close', 'click', function(e) {
e.preventDefault();
console.log('DEL reply');
console.log($(this).attr('data'));
console.log($(this).parent('.media-type-comment'));
var delReply = $(this).parent('.media-type-comment');
$.ajax({
type: 'POST',
url: '/api/messages/del_reply',
data: {
rep_id: $(this).attr('data')
}
}).done(function(status) {
console.log('DEL Reply FIN!');
console.log(status);
var data = $.parseJSON(status);
console.log(data);
console.log(data.status);
if(data.status) {
console.log('ok');
$(delReply).remove();
}
});
});
// show all reply
$('.miii-list-type-message').delegate('.other-reply a', 'click', function(e) {
e.preventDefault();
console.log('show all reply');
console.log($(this));
console.log($(this).parents('.media-type-comment').parents('.media').attr('data'));
if ($('.media-heading:eq(0) a:eq(2)', $(this).parents('.media-body'))) {
var gid = $('.media-heading:eq(0) a:eq(2)', $(this).parents('.media-body')).attr('data');
console.log(gid);
}
var replyList = $(this).parent('.other-reply').parent('.media > .media-body');
console.log(replyList);
$.ajax({
type: 'POST',
url: '/api/messages/get_reply_list',
data: {
mid: $(this).parents('.media-type-comment').parents('.media').attr('data'),
gid: gid
}
}).done(function(status) {
console.log('Show all reply FIN!');
console.log(status);
var data = $.parseJSON(status);
console.log(data);
console.log(data.status);
console.log(data.reply_list);
if(data.status) {
console.log('ok');
$('.media-type-comment:not(:last)', replyList).remove();
$(data.reply_list).insertBefore($('.media-type-comment:eq(0)', replyList)[0]);
}
});
});
// show more 10 messages
$('.miii-list-type-message .more-link').click(function(e) {
e.preventDefault();
console.log('Show more');
console.log($('#last-mid').val());
console.log($('#last-ts').val());
console.log($('#get-gid').val());
$.ajax({
type: 'POST',
url: '/api/messages/get_message_list',
data: {
last_mid: $('#last-mid').val(),
gid: $('#get-gid').val(),
last_ts: $('#last-ts').val()
}
}).done(function(status) {
console.log('Show more FIN!');
// console.log(status);
var data = $.parseJSON(status);
console.log(data);
console.log(data.status);
console.log(data.last_mid);
console.log(data.last_ts);
console.log(data.message_list);
if(data.status) {
console.log('ok');
$('#last-mid').attr('value', data.last_mid);
$('#last-ts').attr('value', data.last_ts);
}
});
});
});
Raw
prototype.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Uploader Prototype</title>
<link rel="stylesheet" type="text/css" href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" />
<link href="stylesheets/uploader-filelist.css" rel="stylesheet">
<style>
#divContainer {
border: 1px solid red;
height: 50px;
}
.bar-container {
position: relative;
}
.bar-container i {
position: absolute;
top: 0;
right: 0;
}
</style>
</head>
<body class="yui-skin-sam">
<div class="container">
<h1>Uploader example</h1>
<a href="javascript:void(0)" class="file-upload">Upload</a>
<div id="uploaderContainerID"></div>
<div class="miii-total-progress"></div>
<div class="miii-progress-bar"></div>
<div id="bar-containers">
<div class="bar-container">
<div class="progress progress-striped">
<div id="bar-total" class="bar" style="width: 0%;">Total</div>
</div>
</div>
</div>
<div id="divContainer">Drop here!</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://yui.yahooapis.com/3.10.2/build/yui/yui-min.js"></script>
<script type="text/javascript">
$(function () {
YUI().use('uploader', function (Y) {
//Manual Uploader Type Override
//Y.Uploader = Y.UploaderFlash;
//Y.Uploader = Y.UploaderHTML5;
//Instantiation
if (Y.Uploader.TYPE != "none") {
var uploader = new Y.Uploader({
selectFilesButton: Y.one('.file-upload'),
multipleFiles: true,
uploadURL: 'post_file.php',
fileFieldName: 'pic',
simLimit: 1
}).render("#uploaderContainerID");
}
if (Y.Uploader.TYPE == "html5") {
uploader.set("dragAndDropArea", "#divContainer");
//uploader.render("#selectFilesButtonContainer");
uploader.on(['dragenter', 'dragover'], function () {
});
uploader.on(['dragleave', 'drop'], function (e) {
console.log('Drop');
console.log(e);
});
}
else if (Y.Uploader.TYPE == "flash") {
uploader.render("#selectFilesButtonContainer");
}
else {
console.log("No Flash or HTML5 capabilities detected.");
}
// EVENTS
var _progressBar = $('.miii-progress-bar');
var myFileList = {},
uploadList = {},
uploadQuantity = 0;
uploader.on("fileselect", fileSelectHandler);
function fileSelectHandler(event) {
$.each(event.fileList, function (idx, file) {
var attrs = file.getAttrs(),
fileSize = attrs.size;
console.log('this');
console.log(this);
console.log(event.fileList);
if (fileSize >= 8000000000) {
// alert(attrs.id + "over 8G");
cloneBar(attrs.id, attrs.name + " " + attrs.size);
// delete this;
$("#" + attrs.id).css("width", "100%").addClass("bar-danger");
fileStatus[attrs.id] = -1;
uploadQuantity = uploadQuantity - 1;
} else {
for (var aMultiples = ['KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], nMultiple = 0, nApprox = fileSize / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
fileSize = nApprox.toFixed(3) + ' ' + aMultiples[nMultiple];
}
/*_progressBar.append(
'<div id="' + attrs.id + '" class="file-status">' +
'<div class="progress">' +
'<div class="bar"></div>' +
'</div>' +
'<span class="file-info">' +
'<span class="file-title">' +
'<span class="file-name" title="' + attrs.name + '">' + attrs.name + '</span>' +
'</span>' +
'<span class="file-size">' + fileSize + '</span>' +
'<span class="file-progress">Waiting</span>' +
'<span class="file-cancel">' +
'<a class="close cancel-close" data-id="' + sttra.id + '" href="javascript:void(0)">&times;</a>' +
'</span>' +
'</span>' +
'</div>'
);*/
cloneBar(attrs.id, attrs.name + " " + attrs.size);
progressInfo.total += attrs.size;
}
myFileList[attrs.id] = file;
});
var list = event.fileList.length;
uploadQuantity = uploadQuantity + list;
$('.miii-total-progress .file-info .file-quantity').html( uploadQuantity + ' file(s) ');
if (!uploading) {
setTimeout(myUpload, 1);
}
}
var totalProgress = (function() {
if ($('.miii-total-progress')) {
$('.miii-total-progress').html(
'<div class="total-status">' +
'<div class="progress">' +
'<div class="bar"></div>' +
'</div>' +
'<span class="file-info">' +
'<span class="file-quantity">' + "No file" + '</span>' +
'<span class="file-size">' + "progressInfo.total" + '</span>' +
'</span>' +
'</div>'
);
}
}());
uploader.on("totaluploadprogress", reportProgress);
function reportProgress(event) {
//console.log("Bytes uploaded: " + event.bytesLoaded);
//console.log("Bytes remaining: " + (event.bytesTotal - event.bytesLoaded));
//console.log("Percent uploaded: " + event.percentLoaded);
var percent = parseInt(event.bytesLoaded * 100 / event.bytesTotal);
$("#bar-total").css("width", percent + "%");
}
uploader.on("uploadprogress", uploadProgressHandler);
function uploadProgressHandler(event) {
var file = event.file || currentFile;
var attrs = file.getAttrs();
// console.log("PROGRESS");
// console.log(attrs);
// console.log(file);
var percent = parseInt(event.bytesLoaded * 100 / event.bytesTotal);
// console.log($("#" + attrs.id));
// $('#' + attrs.id + ' .progress .bar').css("width", percent + "%");
$("#" + attrs.id).css("width", percent + "%");
//update total
progressInfo.uploading = attrs.bytesUploaded;
var totalPercent = parseInt((progressInfo.uploaded + progressInfo.uploading) * 100 / progressInfo.total);
$("#bar-total").css("width", totalPercent + "%");
$(".total-status .progress .bar").css("width", totalPercent + "%");
var fileSize = progressInfo.total;
for (var aMultiples = ['KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], nMultiple = 0, nApprox = fileSize / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
fileSize = nApprox.toFixed(3) + ' ' + aMultiples[nMultiple];
}
$(".total-status .file-info .file-size").html(fileSize);
}
uploader.on("uploadstart", uploadStartHandler);
function uploadStartHandler(event) {
alert('start');
console.log(event._type);
}
uploader.on("uploadcomplete", uploadCompleteHandler);
function uploadCompleteHandler(event) {
var file = event.file || currentFile,
attrs = file.getAttrs();
fileStatus[attrs.id] = 1;
uploadList[attrs.id] = file.get('file');
console.log("data");
console.log(event);
console.log(event.data);
var data = $.parseJSON(event.data);
console.log(data);
console.log(data.status);
console.log(event._type + ": " + attrs['name'] + " " + attrs['size']);
uploadId++;
setTimeout(myUpload, 1);
//update total
progressInfo.uploading = 0;
progressInfo.uploaded += attrs.size;
var totalPercent = parseInt((progressInfo.uploaded + progressInfo.uploading) * 100 / progressInfo.total);
$("#bar-total").css("width", totalPercent + "%");
$(".total-status .progress .bar").css("width", totalPercent + "%");
}
uploader.on("uploaderror", uploadErrorHandler);
function uploadErrorHandler(event) {
var id = currentFile.get('id'),
size = myFileList[id].get('size');
$("#" + id).css("width", "100%").addClass("bar-danger");
fileStatus[id] = -1;
uploadQuantity = uploadQuantity - 1;
$('.miii-total-progress .file-info .file-quantity').html( uploadQuantity + ' file(s) ');
// cancel upload if equals to currentFile
var attrs = currentFile.getAttrs();
if (uploading && attrs.id == id) {
progressInfo.uploading = 0;
currentFile.cancelUpload();
uploadId++;
setTimeout(myUpload, 1);
}
progressInfo.total = progressInfo.total - size;
var totalPercent = parseInt((progressInfo.uploaded + progressInfo.uploading) * 100 / progressInfo.total);
if (!totalPercent) {
$(".total-status .progress .bar").css("width", 0);
} else {
$(".total-status .progress .bar").css("width", totalPercent + "%");
}
var fileSize = progressInfo.total;
for (var aMultiples = ['KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], nMultiple = 0, nApprox = fileSize / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
fileSize = nApprox.toFixed(3) + ' ' + aMultiples[nMultiple];
}
$(".total-status .file-info .file-size").html(progressInfo.total);
console.log('Erroe-log');
console.log(event);
console.log(currentFile);
console.log(currentFile.get('id'));
// console.log(fileStatus.hasOwnProperty(id));
console.log(event.file);
console.log(event.source);
console.log(event.message);
console.log(event.status);
console.log(event.statusText);
// console.log(event._type + ": " + event.file.getAttrs()['name'] + " " + event.file.getAttrs()['size']);
}
function cloneBar(id, text) {
var newBar = $("#bar-containers").children().first().clone();
newBar.append('<a href="#" data-id="' + id + '"><i class="icon-remove"></i></a>').children().first().children().attr("id", id).css("width", "0").text(text);
$("#bar-containers").append(newBar);
}
var uploadId = 0,
currentFile = null,
uploading = false,
progressInfo = {
total : 0,
uploaded : 0,
uploading: 0
},
fileStatus = {};
function myUpload() {
var fileList = uploader.get("fileList");
if ( ! fileList.hasOwnProperty(uploadId)) {
console.log(fileStatus);
console.log(uploadList);
alert('Upload Complete');
uploading = false;
return;
}
uploading = true;
currentFile = fileList[uploadId];
var attrs = currentFile.getAttrs();
if (fileStatus.hasOwnProperty(attrs.id)) {
console.log('skip');
uploadId++;
setTimeout(myUpload, 1);
return;
}
uploader.upload(fileList[uploadId], 'post_file.php');
}
// bind jQuery event
$("#bar-containers").delegate("a", "click", clickCancelHandler);
function clickCancelHandler() {
// remove
var id = $(this).attr("data-id"),
size = myFileList[id].get('size');
$("#" + id).css("width", "100%").addClass("bar-warning");
// $("#" + id).remove();
$(this).remove();
// handle error
if (fileStatus[id] === -1) {
return;
}
// alert(myFileList[id].get('size'));
if (fileStatus[id] === 1) {
delete uploadList[id];
}
if (fileStatus.hasOwnProperty(id)) {
progressInfo.uploaded = progressInfo.uploaded - size;
}
fileStatus[id] = -1;
uploadQuantity = uploadQuantity - 1;
$('.miii-total-progress .file-info .file-quantity').html( uploadQuantity + ' file(s) ');
// cancel upload if equals to currentFile
var attrs = currentFile.getAttrs();
if (uploading && attrs.id == id) {
progressInfo.uploading = 0;
currentFile.cancelUpload();
uploadId++;
setTimeout(myUpload, 1);
}
console.log('remove: ' + size);
progressInfo.total = progressInfo.total - size;
var totalPercent = parseInt((progressInfo.uploaded + progressInfo.uploading) * 100 / progressInfo.total);
if (!totalPercent) {
$(".total-status .progress .bar").css("width", 0);
} else {
$(".total-status .progress .bar").css("width", totalPercent + "%");
}
var fileSize = progressInfo.total;
for (var aMultiples = ['KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], nMultiple = 0, nApprox = fileSize / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
fileSize = nApprox.toFixed(3) + ' ' + aMultiples[nMultiple];
}
$(".total-status .file-info .file-size").html(fileSize);
return false;
};
window.Y = Y;
window.uploader = uploader;
window.fileStatus = fileStatus;
window.myFileList = myFileList;
window.uploadList = uploadList;
window.uploadQuantity = uploadQuantity;
window.progressInfo = progressInfo;
});
});
</script>
</body>
</html>
Raw
uploader.js
/**
* Spec : http://produce.corp.miiicasa.com/spec/miiiCloud_V2/?Page=Page_1-3_p_message_board_attach_files_done1
* Mockup : http://produce.corp.miiicasa.com/ued/visual_center/mockup/miiicloud_v2/page_1_3_p_message_board_attach_files_done1.png
*
* @authors Ted Shiu
* @date 2013-06-10 16:32:25
*
*/
$(function () {
YUI().use('uploader', function (Y) {
// Manual Uploader Type Override
// Y.Uploader = Y.UploaderFlash;
// Y.Uploader = Y.UploaderHTML5;
// Instantiation
if (Y.Uploader.TYPE != "none") {
var uploader = new Y.Uploader({
selectFilesButton: Y.one('.miii-active'),
multipleFiles: true,
uploadURL: 'post_file.php',
fileFieldName: 'pic',
swfURL: 'yui3-3.10.2/build/uploader/assets/flashuploader.swf?t=' + Math.random(),
simLimit: 1
}).render(".miii-uploader-action");
}
if (Y.Uploader.TYPE == "html5") {
uploader.set("dragAndDropArea", "#divContainer");
//uploader.render("#selectFilesButtonContainer");
uploader.on(['dragenter', 'dragover'], function () {
});
uploader.on(['dragleave', 'drop'], function (e) {
console.log('Drop');
console.log(e);
});
}
else if (Y.Uploader.TYPE == "flash") {
uploader.render("#selectFilesButtonContainer");
}
else {
console.log("No Flash or HTML5 capabilities detected.");
}
// EVENTS
var _progressBar = $('.miii-progress-bar'),
_totalFiles = $('.miii-total-progress .file-info .file-quantity');
var myFileList = {},
uploadList = {},
uploadQuantity = 0,
uploadId = 0,
currentFile = null,
uploading = false,
progressInfo = {
total : 0,
uploaded : 0,
uploading: 0
},
fileStatus = {};
// file select
uploader.on("fileselect", fileSelectHandler);
function fileSelectHandler(event) {
$.each(event.fileList, function (idx, file) {
var attrs = file.getAttrs(),
fileSize = attrs.size,
list = event.fileList.length;
console.log('this');
console.log(this);
console.log(event.fileList);
// check file size
if (fileSize >= 8000000000) {
// alert(attrs.id + "over 8G");
cloneBar(attrs.id, attrs.name + " " + attrs.size);
// delete this;
$("#" + attrs.id).css("width", "100%").addClass("bar-danger");
fileStatus[attrs.id] = -1;
uploadQuantity = uploadQuantity - 1;
} else {
for (var aMultiples = ['KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], nMultiple = 0, nApprox = fileSize / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
fileSize = nApprox.toFixed(3) + ' ' + aMultiples[nMultiple];
}
_progressBar.append(
'<div class="progress miii-progress" id="' + attrs.id + '" >' +
'<div class="bar miii-progress-done" style="width: 100%;"></div>' +
'<div class="miii-progress-body clearfix">' +
'<div class="miii-progress-info">' +
'<div class="miii-progress-file-name" title="' + attrs.name + '">' + attrs.name + '</div>' +
'<div class="miii-progress-file-size">' + fileSize + '</div>' +
'</div>' +
'<div class="miii-progress-action">' +
'<a class="close miii-close" href="#" title="移除">×</a>' +
'<div class="miii-progress-state">' + 'fileStatus' + '</div>' +
'</div>' +
'</div>' +
'</div>'
);
// cloneBar(attrs.id, attrs.name + " " + attrs.size);
progressInfo.total += attrs.size;
}
myFileList[attrs.id] = file;
});
uploadQuantity = uploadQuantity + list;
_totalFiles.html( uploadQuantity + ' file(s) ');
if (!uploading) {
setTimeout(myUpload, 1);
}
}
// total progress bar
// var totalProgress = (function() {
// if ($('.miii-total-progress')) {
// $('.miii-total-progress').html(
// '<div class="total-status">' +
// '<div class="progress">' +
// '<div class="bar"></div>' +
// '</div>' +
// '<span class="file-info">' +
// '<span class="file-quantity">' + "No file" + '</span>' +
// '<span class="file-size">' + "progressInfo.total" + '</span>' +
// '</span>' +
// '</div>'
// );
// }
// }());
// totaluploadprogress
uploader.on("totaluploadprogress", reportProgress);
function reportProgress(event) {
//console.log("Bytes uploaded: " + event.bytesLoaded);
//console.log("Bytes remaining: " + (event.bytesTotal - event.bytesLoaded));
//console.log("Percent uploaded: " + event.percentLoaded);
var percent = parseInt(event.bytesLoaded * 100 / event.bytesTotal);
$("#bar-total").css("width", percent + "%");
}
// uploadprogress
uploader.on("uploadprogress", uploadProgressHandler);
function uploadProgressHandler(event) {
var attrs = file.getAttrs(),
file = event.file || currentFile;
// console.log("PROGRESS");
// console.log(attrs);
// console.log(file);
var percent = parseInt(event.bytesLoaded * 100 / event.bytesTotal);
// console.log($("#" + attrs.id));
// $('#' + attrs.id + ' .progress .bar').css("width", percent + "%");
$("#" + attrs.id).css("width", percent + "%");
//update total
progressInfo.uploading = attrs.bytesUploaded;
var totalPercent = parseInt((progressInfo.uploaded + progressInfo.uploading) * 100 / progressInfo.total);
$("#bar-total").css("width", totalPercent + "%");
$(".total-status .progress .bar").css("width", totalPercent + "%");
var fileSize = progressInfo.total;
for (var aMultiples = ['KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], nMultiple = 0, nApprox = fileSize / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
fileSize = nApprox.toFixed(3) + ' ' + aMultiples[nMultiple];
}
$(".total-status .file-info .file-size").html(fileSize);
}
// uploadstart
uploader.on("uploadstart", uploadStartHandler);
function uploadStartHandler(event) {
alert('start');
console.log(event._type);
}
// uploadcomplete
uploader.on("uploadcomplete", uploadCompleteHandler);
function uploadCompleteHandler(event) {
var file = event.file || currentFile,
attrs = file.getAttrs();
fileStatus[attrs.id] = 1;
uploadList[attrs.id] = file.get('file');
console.log("data");
console.log(event);
console.log(event.data);
var data = $.parseJSON(event.data);
console.log(data);
console.log(data.status);
if (data.status === 'ok') {
console.log('ok');
} else if (data.status === 'fail') {
console.log('fail');
alert('fail');
}
console.log(event._type + ": " + attrs['name'] + " " + attrs['size']);
uploadId++;
setTimeout(myUpload, 1);
//update total
progressInfo.uploading = 0;
progressInfo.uploaded += attrs.size;
var totalPercent = parseInt((progressInfo.uploaded + progressInfo.uploading) * 100 / progressInfo.total);
$("#bar-total").css("width", totalPercent + "%");
$(".total-status .progress .bar").css("width", totalPercent + "%");
}
// uploaderror
uploader.on("uploaderror", uploadErrorHandler);
function uploadErrorHandler(event) {
var id = currentFile.get('id'),
size = myFileList[id].get('size');
$("#" + id).css("width", "100%").addClass("bar-danger");
fileStatus[id] = -1;
uploadQuantity = uploadQuantity - 1;
_totalFiles.html( uploadQuantity + ' file(s) ');
// cancel upload if equals to currentFile
var attrs = currentFile.getAttrs();
if (uploading && attrs.id == id) {
progressInfo.uploading = 0;
currentFile.cancelUpload();
uploadId++;
setTimeout(myUpload, 1);
}
progressInfo.total = progressInfo.total - size;
var totalPercent = parseInt((progressInfo.uploaded + progressInfo.uploading) * 100 / progressInfo.total);
if (!totalPercent) {
$(".total-status .progress .bar").css("width", 0);
} else {
$(".total-status .progress .bar").css("width", totalPercent + "%");
}
var fileSize = progressInfo.total;
for (var aMultiples = ['KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], nMultiple = 0, nApprox = fileSize / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
fileSize = nApprox.toFixed(3) + ' ' + aMultiples[nMultiple];
}
$(".total-status .file-info .file-size").html(progressInfo.total);
console.log('Erroe-log');
console.log(event);
console.log(currentFile);
console.log(currentFile.get('id'));
// console.log(fileStatus.hasOwnProperty(id));
console.log(event.file);
console.log(event.source);
console.log(event.message);
console.log(event.status);
console.log(event.statusText);
// console.log(event._type + ": " + event.file.getAttrs()['name'] + " " + event.file.getAttrs()['size']);
}
// function cloneBar(id, text) {
// var newBar = $("#bar-containers").children().first().clone();
// newBar.append('<a href="#" data-id="' + id + '"><i class="icon-remove"></i></a>').children().first().children().attr("id", id).css("width", "0").text(text);
// $("#bar-containers").append(newBar);
// }
// myUpload
function myUpload() {
var fileList = uploader.get("fileList");
if ( ! fileList.hasOwnProperty(uploadId)) {
console.log(fileStatus);
console.log(uploadList);
alert('Upload Complete');
uploading = false;
return;
}
uploading = true;
currentFile = fileList[uploadId];
var attrs = currentFile.getAttrs();
if (fileStatus.hasOwnProperty(attrs.id)) {
console.log('skip');
uploadId++;
setTimeout(myUpload, 1);
return;
}
uploader.upload(fileList[uploadId], 'post_file.php');
}
// bind jQuery event
$("#bar-containers").delegate("a", "click", CancelHandler);
function CancelHandler() {
// remove
var id = $(this).attr("data-id"),
size = myFileList[id].get('size');
// $("#" + id).css("width", "100%").addClass("bar-warning");
$("#" + id).remove();
// $(this).remove();
// handle error
if (fileStatus[id] === -1) {
return;
}
// alert(myFileList[id].get('size'));
if (fileStatus[id] === 1) {
delete uploadList[id];
}
if (fileStatus.hasOwnProperty(id)) {
progressInfo.uploaded = progressInfo.uploaded - size;
}
fileStatus[id] = -1;
uploadQuantity = uploadQuantity - 1;
_totalFiles.html( uploadQuantity + ' file(s) ');
// cancel upload if equals to currentFile
var attrs = currentFile.getAttrs();
if (uploading && attrs.id == id) {
progressInfo.uploading = 0;
currentFile.cancelUpload();
uploadId++;
setTimeout(myUpload, 1);
}
console.log('remove: ' + size);
progressInfo.total = progressInfo.total - size;
var totalPercent = parseInt((progressInfo.uploaded + progressInfo.uploading) * 100 / progressInfo.total);
if (!totalPercent) {
$(".total-status .progress .bar").css("width", 0);
} else {
$(".total-status .progress .bar").css("width", totalPercent + "%");
}
var fileSize = progressInfo.total;
for (var aMultiples = ['KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], nMultiple = 0, nApprox = fileSize / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
fileSize = nApprox.toFixed(3) + ' ' + aMultiples[nMultiple];
}
$(".total-status .file-info .file-size").html(fileSize);
return false;
};
window.Y = Y;
window.uploader = uploader;
window.fileStatus = fileStatus;
window.myFileList = myFileList;
window.uploadList = uploadList;
window.uploadQuantity = uploadQuantity;
window.progressInfo = progressInfo;
});
});
Raw
yui_uploader_prototype.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Uploader Prototype</title>
<link rel="stylesheet" type="text/css" href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" />
<style>
#divContainer {
border: 1px solid red;
height: 50px;
}
.bar-container {
position: relative;
}
.bar-container i {
position: absolute;
top: 0;
right: 0;
}
</style>
</head>
<body class="yui-skin-sam">
<div class="container">
<h1>Uploader example</h1>
<div id="uploaderContainerID"></div>
<div id="bar-containers">
<div class="bar-container">
<div class="progress progress-striped">
<div id="bar-total" class="bar" style="width: 0%;">Total</div>
</div>
</div>
</div>
<div id="divContainer">Drop here!</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://yui.yahooapis.com/3.10.2/build/yui/yui-min.js"></script>
<script type="text/javascript">
$(function () {
YUI().use('uploader', function (Y) {
//Manual Uploader Type Override
//Y.Uploader = Y.UploaderFlash;
//Y.Uploader = Y.UploaderHTML5;
//Instantiation
if (Y.Uploader.TYPE != "none") {
var uploader = new Y.Uploader({
width: "300px",
height: "40px",
multipleFiles: true,
uploadURL: 'upload.php',
simLimit: 1
}).render("#uploaderContainerID");
}
if (Y.Uploader.TYPE == "html5") {
uploader.set("dragAndDropArea", "#divContainer");
//uploader.render("#selectFilesButtonContainer");
}
else if (Y.Uploader.TYPE == "flash") {
uploader.set("fileFilters", [{description:"Images", extensions:"*.jpg;*.png;*.gif"},
{description:"Videos", extensions:"*.avi;*.mov;*.mpg"}]);
uploader.render("#selectFilesButtonContainer");
}
else {
Y.log("No Flash or HTML5 capabilities detected.");
}
// EVENTS
var myFileList = {};
uploader.on("fileselect", fileSelectHandler);
function fileSelectHandler(event) {
$.each(event.fileList, function (idx, file) {
var attrs = file.getAttrs();
cloneBar(attrs.id, attrs.name + " " + attrs.size);
progressInfo.total += attrs.size;
myFileList[attrs.id] = file;
});
if (!uploading) {
setTimeout(myUpload, 1);
}
}
uploader.on("totaluploadprogress", reportProgress);
function reportProgress(event) {
//Y.log("Bytes uploaded: " + event.bytesLoaded);
//Y.log("Bytes remaining: " + (event.bytesTotal - event.bytesLoaded));
//Y.log("Percent uploaded: " + event.percentLoaded);
var percent = parseInt(event.bytesLoaded * 100 / event.bytesTotal);
$("#bar-total").css("width", percent + "%");
}
uploader.on("uploadprogress", uploadProgressHandler);
function uploadProgressHandler(event) {
var file = event.file || currentFile;
var attrs = file.getAttrs();
var percent = parseInt(event.bytesLoaded * 100 / event.bytesTotal);
$("#" + attrs.id).css("width", percent + "%");
//update total
progressInfo.uploading = attrs.bytesUploaded;
var totalPercent = parseInt((progressInfo.uploaded + progressInfo.uploading) * 100 / progressInfo.total);
$("#bar-total").css("width", totalPercent + "%");
}
uploader.on("alluploadscomplete", allUploadsCompleteHandler);
function allUploadsCompleteHandler(event) {
//alert("allUploadsCompleteHandler");
//console.log(event);
console.log(event._type);
}
uploader.on("uploadstart", uploadStartHandler);
function uploadStartHandler(event) {
console.log(event._type);
}
uploader.on("uploadcomplete", uploadCompleteHandler);
function uploadCompleteHandler(event) {
var file = event.file || currentFile,
attrs = file.getAttrs();
fileStatus[attrs.id] = 1;
console.log(event._type + ": " + attrs['name'] + " " + attrs['size']);
uploadId++;
setTimeout(myUpload, 1);
//update total
progressInfo.uploading = 0;
progressInfo.uploaded += attrs.size;
var totalPercent = parseInt((progressInfo.uploaded + progressInfo.uploading) * 100 / progressInfo.total);
$("#bar-total").css("width", totalPercent + "%");
}
uploader.on("uploaderror", uploadErrorHandler);
function uploadErrorHandler(event) {
console.log(event._type + ": " + event.file.getAttrs()['name'] + " " + event.file.getAttrs()['size']);
}
function cloneBar(id, text) {
var newBar = $("#bar-containers").children().first().clone();
newBar.append('<a href="#" data-id="' + id + '"><i class="icon-remove"></i></a>').children().first().children().attr("id", id).css("width", "0").text(text);
$("#bar-containers").append(newBar);
}
var uploadId = 0,
currentFile = null,
uploading = false,
progressInfo = {
total : 0,
uploaded : 0,
uploading: 0
},
fileStatus = {};
function myUpload() {
var fileList = uploader.get("fileList");
if ( ! fileList.hasOwnProperty(uploadId)) {
alert('Upload Complete');
uploading = false;
return;
}
uploading = true;
currentFile = fileList[uploadId];
var attrs = currentFile.getAttrs();
if (fileStatus.hasOwnProperty(attrs.id)) {
console.log('skip');
uploadId++;
setTimeout(myUpload, 1);
return;
}
uploader.upload(fileList[uploadId], 'upload.php');
}
// bind jQuery event
$("#bar-containers").delegate("a", "click", function () {
// remove
var id = $(this).attr("data-id");
$("#" + id).css("width", "100%").addClass("bar-warning");
$(this).remove();
fileStatus[id] = -1;
// cancel upload if equals to currentFile
var attrs = currentFile.getAttrs();
if (attrs.id == id) {
currentFile.cancelUpload();
uploadId++;
setTimeout(myUpload, 1);
}
return false;
});
window.Y = Y;
window.uploader = uploader;
window.fileStatus = fileStatus;
window.myFileList = myFileList;
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment