In my default contoller I have two functions that handle files:
- upload - takes the file upload and puts the file content into a variable in the session (or wherever you want it to be)
- docs - shows a list of uploaded files with information about the files
The I created a view that can be included with LOAD e.g. in default/index.html that uploads files (currently not possible in web2py)
For that I used the plugin at http://valums.com/ajax-upload/
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="{{=URL(request.application,'static','ajaxupload.js')}}"></script>
<script type= "text/javascript">/*<![CDATA[*/
$(document).ready(function(){
var button = $('#upload_button'), interval;
new AjaxUpload(button,{
//action: 'upload-test.php', // I disabled uploads in this example for security reasons
action: "{{=URL(request.application,'default','upload')}}",
name: 'sbmlfile',
onSubmit : function(file, ext){
// change button text, when user selects file
button.text('Uploading');
// If you want to allow uploading only 1 file at time,
// you can disable upload button
this.disable();
// Uploding -> Uploading. -> Uploading...
interval = window.setInterval(function(){
var text = button.text();
if (text.length < 13){ button.text(text + '.');
} else { button.text('Uploading');
}
}, 200);
},
onComplete: function(file, response){
button.text('Upload SBML File');
window.clearInterval(interval);
// enable upload button
this.enable();
// add file to the list
web2py_component("{{=URL(request.application,'default','docs')}}","view_docs");
}
});
});/*]]>*/</script>
<div id="upload_button" class="button">Upload File</div>
{{=LOAD('default','docs',ajax = True, target = 'view_docs')}}
the interesting lines are the last line of the JavaScript code
web2py_component("{{=URL(request.application,'default','docs')}}","view_docs");
this line will refresh the list of uploaded documents that is displayed in the last line of the code with
{{=LOAD('default','docs',ajax = True, target = 'view_docs')}}
the rest is basically just copy and paste from the plugin code (except for the upload location)
Comments (3)
0
select 13 years ago
response.files.insert(3,URL(r=request,c='static/js',f='jquery.form.js'))you can get this plugin at http://jquery.malsup.com/form/ in the bottom replace with the followingfunction web2py_trap_form(action,target) { jQuery('#'+target+' form').each(function(i){ var form=jQuery(this); if(!form.hasClass('no_trap')){ if(form.find('.upload').length>0){ //using ajaxForm has the disadvantage that the header is not returned in xhr //can this be fixed in the ajaxForm plugin??? form.ajaxForm({ url: action, success: function(data, statusText, xhr) { complete_web2py_ajax_page(xhr, data, action, target) } }); }else{ form.submit(function(obj){ jQuery('.flash').hide().html(''); web2py_ajax_page('post',action,form.serialize(),target); return false; }); } } }); } function complete_web2py_ajax_page (xhr, text, action, target){ var html=xhr.responseText; var content=xhr.getResponseHeader('web2py-component-content'); var command=xhr.getResponseHeader('web2py-component-command'); var flash=xhr.getResponseHeader('web2py-component-flash'); var t = jQuery('#'+target); if(content=='prepend') t.prepend(html); else if(content=='append') t.append(html); else if(content!='hide') t.html(html); web2py_trap_form(action,target); web2py_ajax_init(); if(command) eval(command); if(flash) jQuery('.flash').html(flash).slideDown(); } function web2py_ajax_page(method,action,data,target) { jQuery.ajax({'type':method,'url':action,'data':data, 'beforeSend':function(xhr) { xhr.setRequestHeader('web2py-component-location',document.location); xhr.setRequestHeader('web2py-component-element',target);}, 'complete':function(xhr,text){ complete_web2py_ajax_page(xhr, text, action, target); } }); } function web2py_component(action,target) { //jQuery(document).ready(function(){ //i had to uncomment this since it cause some trouble??? $('#'+target).prepend('{{=IMG(_alt="loading ...", _src=URL(request.application, 'static/images', 'loading.gif'))}}');//just some eycandy, you can remove this if you want web2py_ajax_page('get',action,null,target); // }); }Now if you have a form in a ajax loaded page and the form contains an upload field it will use the form plugin. Be aware that this will not allow you to send js in the header if plugin is used.0
select 13 years ago
0
richard 13 years ago