diff --git a/app/views/learning_objects/_file_upload_form.html.erb b/app/views/learning_objects/_file_upload_form.html.erb
index f35e007fa56149c64b46e9892022c7c74937da03..688c9c7603860446e544d032923161afd3a98505 100644
--- a/app/views/learning_objects/_file_upload_form.html.erb
+++ b/app/views/learning_objects/_file_upload_form.html.erb
@@ -1,111 +1,143 @@
<div class="row">
- <div class="small-12 columns">
- <fieldset>
- <legend>Enviar arquivo do objeto educacional</legend>
- <div class="small-12 columns">
- <div class="file">
- <a href="#" id="browseButton" class="expand button">Selecionar o arquivo</a>
- </div>
- <div class="controls" style="display: none">
- <a href="#" id="continueButton" class="success radius small button">Continuar</a>
- <a href="#" id="pauseButton" class="radius small button">Pausar</a>
- <a href="#" id="cancelButton" class="alert radius small button">Cancelar</a>
- </div>
- <div class="progress" style="display: none">
- <span class="meter text-right" style="width: 0%; font-weight: bold;"></span>
- </div>
- <div class="row">
- <label id="alertSuccess" class="text-center" style="display: none">
- Seu arquivo foi enviado e está sendo processado, em alguns minutos ele será publicado!
- </label>
- </div>
- </fieldset>
+ <div class="large-12 columns">
+ <p class="lead">Select files to upload</p>
+ <button class="inverse small" id="browseButton">+ Add Files</button>
+ <button class="danger small" id="uploadFiles">Start Upload</button>
+ <div class="alert-box alert" data-nothingToUpload>Error Nothing To Upload, Please Add Some Files</div>
+ <div id="dragHere" class="panel drop-zone">Drag & Drop Here</div>
+ <div id="results" class="panel"></div>Status:
+ <div class="alert-box secondary"></div>
</div>
</div>
+<style>
+ .drop-zone {
+ text-align:center;
+ border:2px dashed #ccc;
+ }
+ .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;
+ }
+ 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:#fff;
+ line-height:18px;
+ font-size:12px;
+ }
+</style>
+
<script type="text/javascript" charset="utf-8">
- // resumable
- 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')
- },
- //source: https://gist.github.com/JAndritsch/3920385
- chunkSize: 1024 * 256
- });
-
- // buttons
- r.assignBrowse(document.getElementById('browseButton'));
- $("#continueButton").click(function () {
- $('#continueButton').hide();
- $('#pauseButton').show();
- r.upload();
- });
- $("#pauseButton").click(function () {
- r.pause()
- });
- $("#cancelButton").click(function () {
- r.cancel()
- });
-
- // events
- var progress_percent = 0;
- r.on('fileSuccess', function (file) {
- $('.file').hide();
- $('.controls').hide();
- $('.progress').show();
- $('.progress').addClass('success');
- $('#alertSuccess').show();
- $('.links').show();
- //console.debug(file);
- });
- r.on('fileProgress', function (file) {
- progress_percent = Math.floor(file.progress() * 100);
- $('.progress > .meter').html(progress_percent + '%');
- $('.progress > .meter').css('width', progress_percent + '%');
- //console.debug(file);
- });
- r.on('fileAdded', function (file, event) {
- $('#continueButton').hide();
- $('#pauseButton').show();
- $('#cancelButton').show();
- $('.file').hide();
- $('.controls').show();
- $('.progress').show();
- r.upload();
- //console.debug(file, event);
- });
- r.on('fileRetry', function (file) {
- //console.debug(file);
- });
- r.on('fileError', function (file, message) {
- //console.debug(file, message);
- });
- r.on('uploadStart', function () {
- $('.progress').show();
- //console.debug();
- });
- r.on('complete', function () {
- //console.debug();
- });
- r.on('progress', function () {
- //console.debug();
- });
- r.on('error', function (message, file) {
- //console.debug(message, file);
- });
- r.on('pause', function () {
- $('#continueButton').show();
- $('#pauseButton').hide();
- $('#cancelButton').show();
- });
- r.on('cancel', function () {
- $('.file').show();
- $('.controls').hide();
- $('.progress').hide();
- $('.progress > .meter').html('');
- $('.progress > .meter').css('width', '0%');
- //console.debug();
- });
+ (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,
+ prioritizeFirstAndLastChunk: true,
+ simultaneousUploads: 4,
+ chunkSize:1024 * 256
+ });
+ var results = $('#results'),
+ draggable = $('#dragHere'),
+ uploadFile = $('#uploadFiles'),
+ browseButton = $('#browseButton'),
+ nothingToUpload = $('[data-nothingToUpload]');
+
+
+ // 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 data-uniqueid="' + file.uniqueIdentifier + '">' +
+ '<div class="fileName">' + file.fileName + ' (' + file.file.type + ')' + '</div>' +
+ '<div class="large-6 right deleteFile">X</div>' +
+ '<div class="progress large-6">' +
+ '<span class="meter" style="width:0%;"></span>' +
+ '</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('.meter').css('width', progress + '%');
+ $('[data-uniqueId=' + file.uniqueIdentifier + ']').find('.meter').html(' ' + progress + '%');
+ });
+
+ r.on('fileSuccess', function (file, message) {
+ $('[data-uniqueId=' + file.uniqueIdentifier + ']').find('.progress').addClass('success');
+ });
+
+
+ r.on('uploadStart', function () {
+ $('.alert-box').text('Uploading....');
+ });
+
+ r.on('complete', function () {
+ $('.alert-box').text('Done Uploading');
+ });
+
+ })();
</script>
\ No newline at end of file