Skip to content
Snippets Groups Projects
Commit 8ff2cbff authored by Matheus Agio Nerone's avatar Matheus Agio Nerone
Browse files

fixing upload files page 


Signed-off-by: default avatarman13 <man13@inf.ufpr.br>
parent 84341df3
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
app/views/learning_objects/build/_file_upload_form.html.erb
+ 187
− 189
View file @ 8ff2cbff
......@@ -25,18 +25,16 @@
<br>
<div id="current_files" class="panel">
<% @learning_object.attachments.each do |attachment| %>
<table class="file-container">
<table class="file-container">
<% @learning_object.attachments.each do |attachment| %>
<tr>
<td>
<div class="deleteFile"><i class="fa fa-trash fa-1"></i></div>
</td>
<td>
<div class="fileName"><%= "#{attachment.name} (#{attachment.mime_type})" %></div>
<div class="deleteFile"><i class="fa fa-trash fa-1"></i></div>
</td>
</tr>
</table>
<% end %>
<% end %>
</table>
</div>
<div id="results" class="panel"></div>
......@@ -60,189 +58,189 @@
</div>
<style>
#browseButton:hover {
background-color: #64BEF5;
}
#uploadThumbnail {
display: none;
}
#existentsAttachments {
float: left;
width: 100%;
}
#existentsAttachments dl {
float: left;
width: 100%;
height: 50px;
}
#existentsAttachments dl dd, dt {
float: left;
}
#existentsAttachments dl dt {
margin-right: 10px;
}
.drop-zone > #selectFiles {
padding-top: 10px;
font-family: 'Roboto-Ultra-Bold', sans-serif;
font-size: 18pt;
color: #64BEF5;
}
.drop-zone {
text-align: center;
border: 2px dashed #2178f5;
padding-top: 50px;
padding-bottom: 50px;
}
.danger, .danger:hover {
background-color: #e74c3c;
}
.inverse, .inverse:hover {
background-color: #34495e;
}
input[type="file"] {
height: 32px;
}
div[data-nothingToUpload] {
display: none;
}
.deleteFile {
padding: 3px 7px;
color: #bf0000;
font-weight: bold;
cursor: pointer;
float: left;
}
button {
border: none;
cursor: pointer;
background: #bdc3c7;
color: #ffffff;
padding: 9px 12px 10px;
line-height: 1.333;
text-decoration: none;
text-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
-o-transition: 0.25s;
transition: 0.25s;
-webkit-backface-visibility: hidden;
}
.meter {
color: black;
line-height: 18px;
font-size: 12px;
}
#upload_message {
display: none;
}
#browseButton:hover {
background-color: #64BEF5;
}
#uploadThumbnail {
display: none;
}
#existentsAttachments {
float: left;
width: 100%;
}
#existentsAttachments dl {
float: left;
width: 100%;
height: 50px;
}
#existentsAttachments dl dd, dt {
float: left;
}
#existentsAttachments dl dt {
margin-right: 10px;
}
.drop-zone > #selectFiles {
padding-top: 10px;
font-family: 'Roboto-Ultra-Bold', sans-serif;
font-size: 18pt;
color: #64BEF5;
}
.drop-zone {
text-align: center;
border: 2px dashed #2178f5;
padding-top: 50px;
padding-bottom: 50px;
}
.danger, .danger:hover {
background-color: #e74c3c;
}
.inverse, .inverse:hover {
background-color: #34495e;
}
input[type="file"] {
height: 32px;
}
div[data-nothingToUpload] {
display: none;
}
.deleteFile {
padding: 3px 7px;
color: #bf0000;
font-weight: bold;
cursor: pointer;
float: left;
}
button {
border: none;
cursor: pointer;
background: #bdc3c7;
color: #ffffff;
padding: 9px 12px 10px;
line-height: 1.333;
text-decoration: none;
text-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
-o-transition: 0.25s;
transition: 0.25s;
-webkit-backface-visibility: hidden;
}
.meter {
color: black;
line-height: 18px;
font-size: 12px;
}
#upload_message {
display: none;
}
</style>
<script type="text/javascript" charset="utf-8">
(function () {
var r = new Resumable({
target: "<%= chunk_path %>",
query: {learning_object_id: "<%= ERB::Util.url_encode(@learning_object.id) %>"},
headers: {
'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
},
maxChunkRetries: 2,
maxFiles: 3,
simultaneousUploads: 4,
chunkSize: 1024 * 256,
fileType: <%= raw(get_mime_types @learning_object) %>
});
var results = $('#results'),
draggable = $('#dragHere'),
uploadFile = $('#uploadFiles'),
browseButton = $('#browseButton'),
nothingToUpload = $('[data-nothingToUpload]');
var show_success_message = function (message) {
$('#upload_message_alert').text(message);
$('#upload_message').fadeIn();
$('#uploadThumbnail').fadeIn();
};
// if resumable is not supported aka IE
if (!r.support) location.href = 'http://browsehappy.com/';
r.assignBrowse(browseButton);
r.assignDrop(draggable);
r.on('fileAdded', function (file, event) {
var template =
'<div class="file-container" data-uniqueid="' + file.uniqueIdentifier + '">' +
'<div class="fileName">' + file.fileName + ' (' + file.file.type + ')' + '</div>' +
'<div class="deleteFile"><i class="fa fa-trash fa-1"></i></div>' +
'<div class="progress">' +
'<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">' +
'0%' +
'</div>' +
'</div>' +
'</div>';
results.append(template);
});
uploadFile.on('click', function () {
if (results.children().length > 0) {
r.upload();
} else {
nothingToUpload.fadeIn();
setTimeout(function () {
nothingToUpload.fadeOut();
}, 3000);
}
});
$(document).on('click', '.deleteFile', function () {
var self = $(this),
parent = self.parent(),
identifier = parent.data('uniqueid'),
file = r.getFromUniqueIdentifier(identifier);
r.removeFile(file);
parent.remove();
});
r.on('fileProgress', function (file) {
var progress = Math.floor(file.progress() * 100);
$('[data-uniqueId=' + file.uniqueIdentifier + ']').find('.progress-bar').css('width', progress + '%');
$('[data-uniqueId=' + file.uniqueIdentifier + ']').find('.progress-bar').attr('aria-valuenow', progress);
$('[data-uniqueId=' + file.uniqueIdentifier + ']').find('.progress-bar').html('&nbsp;' + progress + '%');
});
r.on('fileSuccess', function (file, message) {
$('[data-uniqueId=' + file.uniqueIdentifier + ']').find('.progress-bar').addClass('progress-bar-success');
});
r.on('fileError', function (file, message) {
$('[data-uniqueId=' + file.uniqueIdentifier + ']').find('.progress-bar').addClass('progress-bar-danger');
$('[data-uniqueId=' + file.uniqueIdentifier + ']').find('.progress-bar').html('&nbsp;' + messages);
});
r.on('complete', function () {
show_success_message('Seus arquivos foram enviados e estão sendo processados. Continue para o próximo passo e selecione uma imagem de destaque.');
});
})();
(function () {
var r = new Resumable({
target: "<%= chunk_path %>",
query: {learning_object_id: "<%= ERB::Util.url_encode(@learning_object.id) %>"},
headers: {
'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
},
maxChunkRetries: 2,
maxFiles: 3,
simultaneousUploads: 4,
chunkSize: 1024 * 256,
fileType: <%= raw(get_mime_types @learning_object) %>
});
var results = $('#results'),
draggable = $('#dragHere'),
uploadFile = $('#uploadFiles'),
browseButton = $('#browseButton'),
nothingToUpload = $('[data-nothingToUpload]');
var show_success_message = function (message) {
$('#upload_message_alert').text(message);
$('#upload_message').fadeIn();
$('#uploadThumbnail').fadeIn();
};
// if resumable is not supported aka IE
if (!r.support) location.href = 'http://browsehappy.com/';
r.assignBrowse(browseButton);
r.assignDrop(draggable);
r.on('fileAdded', function (file, event) {
var template =
'<div class="file-container" data-uniqueid="' + file.uniqueIdentifier + '">' +
'<div class="fileName">' + file.fileName + ' (' + file.file.type + ')' + '</div>' +
'<div class="deleteFile"><i class="fa fa-trash fa-1"></i></div>' +
'<div class="progress">' +
'<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">' +
'0%' +
'</div>' +
'</div>' +
'</div>';
results.append(template);
});
uploadFile.on('click', function () {
if (results.children().length > 0) {
r.upload();
} else {
nothingToUpload.fadeIn();
setTimeout(function () {
nothingToUpload.fadeOut();
}, 3000);
}
});
$(document).on('click', '.deleteFile', function () {
var self = $(this),
parent = self.parent(),
identifier = parent.data('uniqueid'),
file = r.getFromUniqueIdentifier(identifier);
r.removeFile(file);
parent.remove();
});
r.on('fileProgress', function (file) {
var progress = Math.floor(file.progress() * 100);
$('[data-uniqueId=' + file.uniqueIdentifier + ']').find('.progress-bar').css('width', progress + '%');
$('[data-uniqueId=' + file.uniqueIdentifier + ']').find('.progress-bar').attr('aria-valuenow', progress);
$('[data-uniqueId=' + file.uniqueIdentifier + ']').find('.progress-bar').html('&nbsp;' + progress + '%');
});
r.on('fileSuccess', function (file, message) {
$('[data-uniqueId=' + file.uniqueIdentifier + ']').find('.progress-bar').addClass('progress-bar-success');
});
r.on('fileError', function (file, message) {
$('[data-uniqueId=' + file.uniqueIdentifier + ']').find('.progress-bar').addClass('progress-bar-danger');
$('[data-uniqueId=' + file.uniqueIdentifier + ']').find('.progress-bar').html('&nbsp;' + messages);
});
r.on('complete', function () {
show_success_message('Seus arquivos foram enviados e estão sendo processados. Continue para o próximo passo e selecione uma imagem de destaque.');
});
})();
</script>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment