haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-25 14:50:29 +00:00
Code Issues Releases Wiki Activity

[upload/update] fixed bug, modified bar style and improved code

Browse Source
This commit is contained in:
llj
2012-12-08 20:11:39 +08:00
parent 0c554c20e6
commit 123b0315e8
5 changed files with 73 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
media/css/seahub.css
View File

@@ -1337,22 +1337,17 @@ textarea:-moz-placeholder {/* for FF */
#upload-file-form .MultiFile-remove:hover { #upload-file-form .MultiFile-remove:hover {
text-decoration:none; text-decoration:none;
} }
#upload-progress { .upload-progress-con,
.upload-cancel {
margin-top:.8em; margin-top:.8em;
} }
#task-progress-bar {/*for progress container*/ .upload-progress-bar {/*for progress container*/
width:95%;
height:1em; height:1em;
}
#task-progress-bar .ui-progressbar-value {/*for progress*/
background:#e83;
margin:0;
}
#task-progress-bar {
margin-top:-3px; margin-top:-3px;
} }
#upload-cancel { .upload-progress-bar .ui-progressbar-value {/*for progress*/
margin-top:.8em; background:#e83;
margin:0;
} }
/* file view online, file edit */ /* file view online, file edit */

12
templates/file_upload_progress_page.html
View File

@@ -3,25 +3,23 @@
{% block extra_script %} {% block extra_script %}
<script type="text/javascript"> <script type="text/javascript">
// Update progress bar // Update progress bar
function update_progress_info() { function updateProgress() {
var dialog_id = '{{ dialog_id }}';
$.ajax({ $.ajax({
url: '{{ httpserver_root }}/upload_progress/?X-Progress-ID=' + '{{ uuid }}' + '&callback=?', url: '{{ httpserver_root }}/upload_progress/?X-Progress-ID=' + '{{ uuid }}' + '&callback=?',
dataType: 'jsonp', dataType: 'jsonp',
cache: false, cache: false,
success: function(data) { success: function(data) {
if (data) { if (data) {
$(dialog_id + ' #upload-progress-text', window.parent.document).html(filesizeformat(data.uploaded, 2) + ' / ' + filesizeformat(data.length, 2)); $('#{{ upload_progress_con_id }} .upload-progress-text', window.parent.document).html(filesizeformat(data.uploaded, 2) + ' / ' + filesizeformat(data.length, 2));
$(dialog_id + ' #task-progress-bar', window.parent.document).removeClass('hide').progressbar({ $('#{{ upload_progress_con_id }} .upload-progress-bar', window.parent.document).progressbar({
value: data.uploaded / data.length * 100 value: data.uploaded / data.length * 100
}); });
} }
} }
}); });
setTimeout(update_progress_info, 1000); setTimeout(updateProgress, 1000);
}; };
update_progress_info(); updateProgress();
</script> </script>
{% endblock %} {% endblock %}

66
templates/repo.html
View File

@@ -165,50 +165,50 @@
<!-- popup dialog for file upload --> <!-- popup dialog for file upload -->
<div id="upload-file-dialog" class="hide"> <div id="upload-file-dialog" class="hide">
<h3>{% trans "Upload Files" %}</h3> <h3>{% trans "Upload Files" %}</h3>
{% if no_quota %} {% if no_quota %}
<p class="error">{% trans "The owner of this library has ran out of space." %}</p> <p class="error">{% trans "The owner of this library has ran out of space." %}</p>
{% else %} {% else %}
<form id="upload-file-form" enctype="multipart/form-data" method="post" action="{{ upload_url }}"> <form id="upload-file-form" enctype="multipart/form-data" method="post" action="{{ upload_url }}">
<input type="hidden" name="parent_dir" id="parent_dir" value="{{ parent_dir }}" /> <input type="hidden" name="parent_dir" id="parent_dir" value="{{ parent_dir }}" />
<div class="files-add"> <div class="files-add">
<span class="op">{% trans "Add files" %}</span> <span class="op">{% trans "Add files" %}</span>
<span id="upload-add-tip">({% trans "smaller than" %} {{ max_upload_file_size|filesizeformat }})</span> <span id="upload-add-tip">({% trans "smaller than" %} {{ max_upload_file_size|filesizeformat }})</span>
<input type="file" name="file" id="file-upload-input" /> <input type="file" name="file" id="file-upload-input" />
</div> </div>
<div id="upload-file-list"></div> <div id="upload-file-list"></div>
<p class="error">{{ error_msg }}</p> <p class="error">{{ error_msg }}</p>
<input type="submit" value="{% trans "Upload" %}" class="submit" /> <input type="submit" value="{% trans "Upload" %}" class="submit" />
</form> </form>
<div id="upload-progress" class="hide"> <div id="upload-progress-con" class="upload-progress-con hide">
<p>{% trans "Uploaded:" %} <span id="upload-progress-text">{% trans "Fetching ..." %}</span></p> <p>{% trans "Uploaded:" %} <span class="upload-progress-text">{% trans "Fetching ..." %}</span></p>
<div id="task-progress-bar" class="hide"></div> <div class="upload-progress-bar"></div>
<button id="upload-cancel">{% trans "Cancel" %}</button> <button class="upload-cancel">{% trans "Cancel" %}</button>
<iframe class="hide"><!--for chrome--></iframe>
</div> </div>
<iframe id="request-progress" class="hide"><!--for chrome--></iframe> {% endif %}
{% endif %}
</div> </div>
<!-- popup dialog for file update --> <!-- popup dialog for file update -->
<div id="update-file-dialog" class="hide"> <div id="update-file-dialog" class="hide">
<h3>Update File</h3> <h3>Update File</h3>
{% if no_quota %} {% if no_quota %}
<p class="error">{% trans "The owner of this library has ran out of space. Update failed." %}</p> <p class="error">{% trans "The owner of this library has ran out of space." %}</p>
{% else %} {% else %}
<form id="update-file-form" enctype="multipart/form-data" method="post" action="{{ update_url }}?head={{ head_id }}"> <form id="update-file-form" enctype="multipart/form-data" method="post" action="{{ update_url }}?head={{ head_id }}">
<input type="hidden" name="target_file" /> <input type="hidden" name="target_file" />
<input type="file" name="file" id="id_update_file" /> <input type="file" name="file" id="file-update-input" />
<p>({% trans "Smaller than" %} {{ max_upload_file_size|filesizeformat }})</p> <p>({% trans "Smaller than" %} {{ max_upload_file_size|filesizeformat }})</p>
<p class="error">{{ error_msg }}</p> <p class="error">{{ error_msg }}</p>
<input type="submit" value="{% trans "Update" %}" class="submit" /> <input type="submit" value="{% trans "Update" %}" class="submit" />
</form> </form>
<div id="upload-progress" class="hide"> <div id="update-progress-con" class="upload-progress-con hide">
<p>{% trans "Uploaded:" %} <span id="upload-progress-text">{% trans "Fetching..." %}</span></p> <p>{% trans "Uploaded:" %} <span class="upload-progress-text">{% trans "Fetching..." %}</span></p>
<div id="task-progress-bar" class="hide"></div> <div class="upload-progress-bar"></div>
<button id="upload-cancel">{% trans "Cancel" %}</button> <button class="upload-cancel">{% trans "Cancel" %}</button>
<iframe class="hide"><!--for chrome--></iframe>
</div> </div>
<iframe id="request-progress" class="hide"><!--for chrome--></iframe> {% endif %}
{% endif %}
</div> </div>
<form id="add-new-dir-form" action="" method="post" class="simple-input-popup hide">{% csrf_token %} <form id="add-new-dir-form" action="" method="post" class="simple-input-popup hide">{% csrf_token %}
@@ -616,8 +616,8 @@ $('#upload-file').click(function () {
} }
}); // init MultiFile }); // init MultiFile
$('#simplemodal-container').css({'height':'auto', 'width':'auto'}); $('#simplemodal-container').css({'height':'auto', 'width':'auto'});
$('#upload-file-form .files-add').css({'width':$('#upload-file-form .files-add').width()}); $('#upload-file-form .files-add').css({'width':$('#upload-file-form .files-add').width() + 1}); // '+ 1' for ie
$('#upload-file-form .files-add input').css({'right':$('#upload-add-tip').width()}); $('#file-upload-input').css({'right':$('#upload-add-tip').width()});
}); });
$('a.update-file').click(function() { $('a.update-file').click(function() {

61
templates/snippets/file_upload_progress_js.html
View File

@@ -9,38 +9,38 @@ function gen_uuid() {
return uuid; return uuid;
} }
function submit_and_real_time_show (dialog_id) { function submitAndShowProgress(form, upload_progress_con) {
var form = $(dialog_id + ' form')[0], var uuid = gen_uuid(); // id for this upload so we can fetch progress info.
uuid = gen_uuid(); // id for this upload so we can fetch progress info. upload_progress_con.removeClass('hide');
$(dialog_id + ' #upload-progress').removeClass('hide');
// Append X-Progress-ID uuid form action // Append X-Progress-ID uuid form action
form.action += (form.action.indexOf('?') == -1 ? '?' : '&') + 'X-Progress-ID=' + uuid; var form_action = form.attr('action');
form.attr('action', form_action += (form_action.indexOf('?') == -1 ? '?' : '&') + 'X-Progress-ID=' + uuid);
form.submit(); form.submit();
$(dialog_id + ' form .submit').addClass('hide'); form.find('.submit').addClass('hide');
// Update progress bar: not work in chrome. // Update progress: not work in chrome.
function update_progress_info() { function updateProgress() {
$.ajax({ $.ajax({
url: '{{ httpserver_root }}/upload_progress/?X-Progress-ID=' + uuid + '&callback=?', url: '{{ httpserver_root }}/upload_progress/?X-Progress-ID=' + uuid + '&callback=?',
dataType: 'jsonp', dataType: 'jsonp',
cache: false, cache: false,
success: function(data) { success: function(data) {
if (data) { if (data) {
$(dialog_id + ' #upload-progress-text').html(filesizeformat(data.uploaded, 2) + ' / ' + filesizeformat(data.length, 2)); upload_progress_con.find('.upload-progress-text').html(filesizeformat(data.uploaded, 2) + ' / ' + filesizeformat(data.length, 2));
$(dialog_id + ' #task-progress-bar').removeClass('hide').progressbar({ upload_progress_con.children('.upload-progress-bar').progressbar({
value: data.uploaded / data.length * 100 value: data.uploaded / data.length * 100
}); });
} }
} }
}); });
setTimeout(update_progress_info, 1000); setTimeout(updateProgress, 1000);
}; };
update_progress_info(); updateProgress();
// Update progress bar: for chrome // Update progress bar: for chrome
if ($.browser.safari) { if ($.browser.safari) {
$(dialog_id + ' iframe').attr('src', '{{ SITE_ROOT }}file_upload_progress_page/?uuid=' + uuid + '&dlg_id=' + dialog_id.substr(1)); upload_progress_con.children('iframe').attr('src', '{{ SITE_ROOT }}file_upload_progress_page/?uuid=' + uuid + '&upload_progress_con_id=' + upload_progress_con.attr('id'));
} }
return false; return false;
@@ -52,46 +52,37 @@ $('#upload-file-form .submit').click(function () {
return false; return false;
} }
if (this.files) { var total_size = 0;
var total = 0; $.each($('#upload-file-form input[type=file]'), function() {
$.each($('#upload-file-form input[type=file]'), function() { if(this.files && this.files.length > 0) {
if($(this).val()) { total_size += this.files[0].size;
total += this.files[0].size;
}
});
if (total > {{ max_upload_file_size }}) {
$('#upload-file-form .error').html('{% trans "File size surpasses the limit." %}').removeClass('hide');
return false;
} }
});
if (total_size > {{ max_upload_file_size }}) {
$('#upload-file-form .error').html('{% trans "File size surpasses the limit." %}').removeClass('hide');
return false;
} }
$('#upload-file-form .error').addClass('hide'); $('#upload-file-form .error').addClass('hide');
$.fn.MultiFile.disableEmpty(); // disable dummy element before submiting the form $.fn.MultiFile.disableEmpty(); // disable dummy element before submiting the form
submit_and_real_time_show('#upload-file-dialog'); submitAndShowProgress($('#upload-file-form'), $('#upload-progress-con'))
return false; return false;
}); });
$('#upload-file-dialog #upload-cancel').click(function() {
location.reload(true);
});
$('#update-file-form .submit').click(function () { $('#update-file-form .submit').click(function () {
if (!$.trim($('#update-file-form input[type=file]').val())) { if (!$.trim($('#file-update-input').val())) {
$('#update-file-form .error').html('{% trans "Please choose a file at first." %}').removeClass('hide'); $('#update-file-form .error').html('{% trans "Please choose a file at first." %}').removeClass('hide');
return false; return false;
} }
$('#update-file-form .error').addClass('hide'); $('#update-file-form .error').addClass('hide');
submitAndShowProgress($('#update-file-form'), $('#update-progress-con'))
$.fn.MultiFile.disableEmpty(); // disable dummy element before submiting the form
submit_and_real_time_show('#update-file-dialog');
return false; return false;
}); });
$('#update-file-dialog #upload-cancel').click(function() { $('#upload-progress-con .upload-cancel, #update-progress-con .unload-cancel').click(function() {
location.reload(true); location.reload();
}); });
</script> </script>
{% endif %} {% endif %}

4
views.py
View File

@@ -2030,11 +2030,11 @@ def file_upload_progress_page(request):
''' '''
uuid = request.GET.get('uuid', '') uuid = request.GET.get('uuid', '')
httpserver_root = get_httpserver_root() httpserver_root = get_httpserver_root()
dialog_id = request.GET.get('dlg_id', '') upload_progress_con_id = request.GET.get('upload_progress_con_id', '')
return render_to_response('file_upload_progress_page.html', { return render_to_response('file_upload_progress_page.html', {
'uuid': uuid, 'uuid': uuid,
'httpserver_root': httpserver_root, 'httpserver_root': httpserver_root,
'dialog_id': '#' + dialog_id, 'upload_progress_con_id': upload_progress_con_id,
}, context_instance=RequestContext(request)) }, context_instance=RequestContext(request))
@login_required @login_required