I'm trying to do a simple manual file upload (without DAL) and display
progress bar. I would prefer not to use any ajax helpers.
I'm trying to use the upload progress recipe (involving the cache.ram
tracking in copystream_progress).
Here's my controller default.py:
def index():
if request.extension=='json' and 'X-Progress-ID' in request.get_vars:
cache_key = 'X-Progress-ID:'+request.get_vars['X-Progress-ID']
length = cache.ram(cache_key+':length', lambda: 0, None)
uploaded = cache.ram(cache_key+':uploaded', lambda: 0, None)
from gluon.serializers import json
return json(dict(length=length, uploaded=uploaded))
else:
form = None
patherror = False
#some checking for a valid target path for later use
if not patherror:
#generate uuid
import binascii
myuuid = binascii.hexlify(os.urandom(24))
form=FORM(INPUT(_name='file',
_type='file'),INPUT(_type='submit', _value='Upload'))
#will do stuff to file upon form accepts
return dict(form=form, myuuid=myuuid)
views/default/index.html:
<script type="text/javascript">
//Add upload progress for multipart forms
jQuery(function() {
jQuery('form[enctype="multipart/form-data"]').submit(function() {
//only submit once per page load
if (jQuery.data(this,'submitted')) return false;
var freq = 1000; //update every n ms
var uuid = '{{=myuuid}}'; //myuuid was generated by the controller
above
//console.log(uuid);
var progress_url = '{{=URL(extension="json")}}';
//console.log(progress_url)
//Critical construct X-Progress-ID to request
this.action += ((this.action.indexOf('?') == -1) ? '?' : '&') +
'X-Progress-ID=' + uuid;
var progress = jQuery(
'<div id="upload-progress"
class="upload-progress"></div>').insertAfter(
jQuery('input[type="submit"]')).append(
'<div class="progress-container"><span
class="progress-info">uploading 0%</span><div
class="progress-bar"></div></div>');
jQuery('input[type="submit"]').remove()
progress.find('.progress-bar').height('1em').width(0).css("background-color","red");
//func to update progress bar
function update_progress_info() {
progress.show()
jQuery.getJSON(progress_url, {'X-Progress-ID':uuid, 'dummy':
'xmlhttprequest fix for IE'}, function(data, status) {
if (data) {
var progress_percent = parseInt(data.uploaded) /
parseInt(data.length);
var width =
progress.find('.progress-container').width();
var progress_width = width * progress_percent;
progress.find('.progress-bar').width(progress_width);
progress.find('.progress-info').text('uploading ' +
progress_percent * 100 + '%');
}
window.setTimeout(update_progress_info, freq);
});
};
window.setTimeout(update_progress_info, freq);
jQuery.data(this, 'submitted', true); //finaly mark form as
submitted
});
});
</script>
{{=form}}
I am getting no javascript errors but i get no progress bar and the
progress-info span doesn't update either. File uploads.
--
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to the Google Groups
"web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
For more options, visit https://groups.google.com/d/optout.
