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 4 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 6 years ago

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

    move to :

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


  • 0
    neck 6 years ago

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

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


  • 1
    playincard 9 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!

  • 0
    halnator 9 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

  • 0
    halnator 9 years ago
    anything i put inside

  • 0
    jv 9 years ago
    halnator Probably not defined any css ( upload button , upload progress, listing etc)

  • 0
    drschmulge 10 years ago
    web2py.noob 2011-06-13 In this slice, it hasn't been uploaded as a blob , fiele stored in 'upload' folder, only name is in db. def download(): """ allows downloading of uploaded files http://..../[app]/default/download/[filename] """ return response.download(request,db) In view Link on file for example {{=file.name}}

  • 0
    web2pyslices 10 years ago
    can you actually download the file uploaded? Following the instruccions I actually can upload and even "view" the new entry (file) from appadmin, but cannot download it; seems it hasn't been uploaded as a blob, so it's just me or maybe something is still missing with this slice? UPDATE: ...for the record, was just me. I missed the importance of this line: db.document.insert(file=db.document.file.store(request.body,filename)). I had just file=filename so I was saving mere text on the file field. PD: an bbcode on web2pyslices is missing :)

  • 0
    nitesedge 10 years ago
    Hmm.. can't seem to get this to work. - Placed fileuploader.js in /static - added controller section to my controller - created new view and added the view section I am getting this: (name 'name' is not defined) and it's referencing this: response.write(URL("upload",args=[name[2]])) So, the python var "name" hasn't been defined... any idea what I'm missing? Thanks in advance!

  • 0
    jv 10 years ago
    Sorry , args=[name[2] from old script . Corrected.

  • 0
    nitesedge 10 years ago
    Also, missing '});' (no quotes) to close out the function in the script. The files now upload successfully (checked the DB and the response text), but the page is still showing failed. responseText = {"success": "true"} Example: P6X58D Premium Memory QVL 2.pdf 0.2MB Failed

  • 0
    jv 10 years ago
    return response.json({'success':'true'}) Work for me view--- {{extend 'layout.html'}}

    {{=T('Adding CSV file ')}}


  • 0
    nitesedge 10 years ago
    Looks like I was hitting a random Safari bug where occasionally it would show "Failed". Thanks for the quick help. See previous note about missing }); in the above slice.

  • 0
    jv 10 years ago
    Thanks for note , I corrected missing "});"

Hosting graciously provided by:
Python Anywhere