If you benefit from web2py hope you feel encouraged to pay it forward by contributing back to society in whatever form you choose!
  1. Copy fileuploader.css, fileuploader.js into the app's static folder

In view:

<script> <script type="text/javascript" src="{{=URL(request.application,'static','fileuploader.js')}}"></script>

<script>
$(document).ready(function() { 
  var uploader = new qq.FileUploader({
        // pass the dom node (ex. $(selector)[0] for jQuery users)
        element: document.getElementById('file-uploader'),
        // path to server-side upload script
        action: '{{=URL("upload")}}',
        sizeLimit: 15000000,
        minSizeLimit: 0,         
        allowedExtensions: ['xls','jpg', 'jpeg', 'pdf', 'txt','doc','htm','html','xml','xmls', 'txt','ppt','png', 'gif'],
        // set to true to output server response to console
        debug: true,

        // events         
        // you can return false to abort submit
        onSubmit: function(id, fileName){},
        onProgress: function(id, fileName, loaded, total){},
        onComplete: function(id, fileName, responseJSON){},
        onCancel: function(id, fileName){},

        messages: {
            // error messages, see qq.FileUploaderBasic for content
            typeError: "{file} {{=T('has invalid extension.')}} {{=T('Only')}} {extensions} {{=T('are allowed.')}}",
            sizeError: "{file} {{=T('is too large, maximum file size is')}} {sizeLimit}.",
            minSizeError: "{file} {{=T('is too small, minimum file size is')}} {minSizeLimit}.",
            emptyError: "{file} {{=T('is empty, please select files again without it.')}}",
            onLeave: "{{=T('The files are being uploaded, if you leave now the upload will be cancelled.')}}"                         
        },
        showMessage: function(message){ alert(message); }        
    });
    });        
</script>

<div id="file-uploader">
<noscript><p>{{=T('Please enable JavaScript to use file uploader.')}}</p></noscript>
</div>

Controller:


def upload():
            response.files.append(URL(r=request, c='static', f='fileuploader.css'))
            for r in request.vars:
             if r=="qqfile":
                filename=request.vars.qqfile
                # process the file here
             db.document.insert(file=db.document.file.store(request.body,filename))                                 
                return response.json({'success':'true'})

Related slices

Comments (15)

  • Login to post



  • 0
    cavdberg 8 years ago

    There is a mistake: 

     

    Where you see: 

     

    <script> <script type="text/javascript" src="{{=URL(request.application,'static','fileuploader.js')}}"></script>

     

    It should be 

     

    <script script type="text/javascript" src="{{=URL(request.application,'static','fileuploader.js')}}"></script>


  • 0
    neck 9 years ago

    http://valums.com/ajax-upload/ 

    move to :

    http://valums-file-uploader.github.io/file-uploader/


  • 0
    neck 9 years ago

    you can download files: fileuploader.css, fileuploader.js, from the link below:

    https://github.com/Valums-File-Uploader/file-uploader


  • 0
    halnator 13 years ago
    I added everything but when i view the page i get 'None' , i added the controller and the script and the div in the view , why isnt it working ?? help guys

  • 1
    playincard 12 years ago
    To see the default file-uploader CSS style: 1. Copy fileuploader.css into the app's static folder 2. Paste the following into the controller function: response.files.append(URL(r=request, c='static', f='fileuploader.css')) @jv the default css file can also be included using the view: {{response.files.append(URL(r=request, c='static', f='fileuploader.css'))}} {{extend 'layout.html'}} You should add this to your slice!
show more comments

Hosting graciously provided by:
Python Anywhere