Skip to content

Commit

Permalink
Added new file upload preview
Browse files Browse the repository at this point in the history 
* Generic callback handler for uploads to allow different upload types
* Image preview when uploading an image
* Filename preview when uploading a non-image
* Cancel button added to upload
  • Loading branch information
@Buildstarted
Buildstarted committed Jun 17, 2013
1 parent f07bdf4 commit e31a64c
Show file tree
Hide file tree
Showing 2 changed files with 113 additions and 47 deletions.
159 changes: 112 additions & 47 deletions JabbR/Chat.ui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,8 @@
$clipboardUpload = null,
$clipboardUploadPreview = null,
$clipboardUploadButton = null,
$clipboardCancelButton = null,
$uploadCallback = null,
$fileRoom = null,
$fileConnectionId = null,
connectionInfoStatus = null,
Expand Down Expand Up @@ -698,6 +700,7 @@
$clipboardUpload = $('#jabbr-clipboard-upload');
$clipboardUploadPreview = $('#jabbr-clipboard-upload #clipboard-upload-preview');
$clipboardUploadButton = $('#jabbr-clipboard-upload #clipboard-upload');
$clipboardCancelButton = $('#jabbr-clipboard-upload #clipboard-cancel');
$helpBody = $('#jabbr-help .help-body');
$shortCutHelp = $('#jabbr-help #shortcut');
$globalCmdHelp = $('#jabbr-help #global');
Expand Down Expand Up @@ -1166,66 +1169,113 @@
// Crazy browser hack
$hiddenFile[0].style.left = '-800px';

$clipboardUploadButton.on("click", function () {
var name = "clipboard-data",
uploader = {
submitFile: function (connectionId, room) {
$fileConnectionId.val(connectionId);

$fileRoom.val(room);

//$uploadForm.submit();
$.ajax({
url: '/upload-clipboard',
dataType: 'json',
type: 'POST',
data: {
file: $clipboardUploadPreview.attr("src"),
room: room,
connectionId: connectionId
}
}).done(function (result) {
//remove image from preview
$clipboardUploadPreview.attr("src", "");
});
$.imagePaste(function (file) {
ui.showClipboardUpload(file, "clipboard", function() {
var name = "clipboard-data",
uploader = {
submitFile: function (connectionId, room) {
$fileConnectionId.val(connectionId);

$fileRoom.val(room);

//$uploadForm.submit();
$.ajax({
url: '/upload-clipboard',
dataType: 'json',
type: 'POST',
data: {
file: $clipboardUploadPreview.attr("src"),
room: room,
connectionId: connectionId
}
}).done(function (result) {
//remove image from preview
$clipboardUploadPreview.attr("src", "");
});

$hiddenFile.val(''); //hide upload dialog
}
};

ui.addMessage('Uploading \'' + name + '\'.', 'broadcast');

$ui.trigger(ui.events.fileUploaded, [uploader]);

$hiddenFile.val(''); //hide upload dialog
}
};
});
});

ui.addMessage('Uploading \'' + name + '\'.', 'broadcast');
if (window.File && window.FileReader && window.FileList && window.Blob) {
console.log("file reader support");
}

$ui.trigger(ui.events.fileUploaded, [uploader]);
$clipboardUploadButton.on("click", function () {
if ($uploadCallback) {
$uploadCallback();
}
$clipboardUpload.modal('hide');
});

$.imagePaste(function (file) {
ui.showClipboardUpload(file);
$clipboardCancelButton.on("click", function() {
$clipboardUpload.modal('hide');
});

$hiddenFile.change(function () {
if (!$hiddenFile.val()) {
$hiddenFile.change(function (e) {
var file = e.target.files[0];
console.log(file);

if (!file.type.match('image.*')) {
//it's a standard file - just upload it for now
ui.showClipboardUpload({ data: e.target, name: file.name }, "non-image", function() {
var path = $hiddenFile.val(),
slash = path.lastIndexOf('\\'),
name = path.substring(slash + 1),
uploader = {
submitFile: function(connectionId, room) {
$fileConnectionId.val(connectionId);

$fileRoom.val(room);

$uploadForm.submit();

$hiddenFile.val('');
}
};

ui.addMessage('Uploading \'' + name + '\'.', 'broadcast');

$ui.trigger(ui.events.fileUploaded, [uploader]);
});

return;
}

var reader = new FileReader();
reader.onload = (function(f) {
return function(e) {
ui.showClipboardUpload({ data: e.target, name: file.name }, "image", function () {
var path = $hiddenFile.val(),
slash = path.lastIndexOf('\\'),
name = path.substring(slash + 1),
uploader = {
submitFile: function (connectionId, room) {
$fileConnectionId.val(connectionId);

var path = $hiddenFile.val(),
slash = path.lastIndexOf('\\'),
name = path.substring(slash + 1),
uploader = {
submitFile: function (connectionId, room) {
$fileConnectionId.val(connectionId);
$fileRoom.val(room);

$fileRoom.val(room);
$uploadForm.submit();

$uploadForm.submit();

$hiddenFile.val('');
}
};
$hiddenFile.val('');
}
};

ui.addMessage('Uploading \'' + name + '\'.', 'broadcast');
ui.addMessage('Uploading \'' + name + '\'.', 'broadcast');

$ui.trigger(ui.events.fileUploaded, [uploader]);
$ui.trigger(ui.events.fileUploaded, [uploader]);
});
};
})(file);

reader.readAsDataURL(file);
});

setInterval(function () {
Expand Down Expand Up @@ -1982,9 +2032,24 @@
});
$helpPopup.modal();
},
showClipboardUpload: function (file) {
showClipboardUpload: function (file, type, uploader) {
$uploadCallback = uploader;
$clipboardUploadPreview.show();
//set image url
$clipboardUploadPreview.attr("src", file.dataURL);
if (file.dataURL) {
$clipboardUpload.find("h3").text("Uploading from clipboard");
$clipboardUploadPreview.attr("src", file.dataURL);
} else {
$clipboardUpload.find("h3").text("Uploading: " + file.name);
if (type == "image") {
//uploading an actual file
$clipboardUploadPreview.attr("src", file.data.result);
} else {
//nothing just yet
$clipboardUploadPreview.hide();
}
}

$clipboardUpload.modal();
},
showUpdateUI: function () {
Expand Down
1 change: 1 addition & 0 deletions JabbR/Views/Home/index.cshtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -429,6 +429,7 @@
</div>
</div>
<div class="modal-footer">
<a id="clipboard-cancel" class="btn btn-secondary" href="#">Cancel</a>
<a id="clipboard-upload" class="btn btn-primary" href="#">Upload</a>
</div>
</div>
Expand Down

0 comments on commit e31a64c

Please sign in to comment.