Quick and dirty multi file ajax file upload

Copy fileuploader.css, fileuploader.js into the app's static folder

In view:

<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'})

Comments (15)

Login to post
order by: newest oldest upvoted downvoted
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
0
halnator 13 years ago
anything i put inside

nitesedge 13 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.

jv 13 years ago

Thanks for note , I corrected missing "});"

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!

replies (1)

neck 9 years ago
http://valums.com/ajax-upload/ move to: http://valums-file-uploader.github.io/file-uploader/

In view:

Related slices

Comments (15)

replies (1)