If you benefit from web2py hope you feel encouraged to pay it forward by contributing back to society in whatever form you choose!

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)

Related slices

Comments (3)

  • Login to post



  • 0
    select 3 years ago
    yes maybe I also took a different approach in web2py_ajax in the top add 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 following function 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 3 years ago
    since the formatting does not look good I made a own slice for that http://www.web2pyslices.com/main/slices/take_slice/113

  • 0
    richard 3 years ago
    I couldn't get this script to work. It's possible that the valums.com uploader has been renamed and that this script is now no longer functional.

Hosting graciously provided by:
Python Anywhere