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

How to integrate http://demo.tutorialzine.com/2011/09/html5-file-upload-jquery-php/ with you web2py application.


From http://tutorialzine.com/2011/09/html5-file-upload-jquery-php/ we download the .zip and we decompress in the static folder.


In our view (index.hml):

{{left_sidebar_enabled,right_sidebar_enabled=False,('message' in globals())}}
{{extend 'layout.html'}}

{{block right_sidebar}}


<div id="response"></div>

<div id="dropbox">
    <span class="message">Drop images here to upload. <br /><i>(they will only be visible to you)</i></span>

    //Global variable for script.js


REQUEST_UPLOAD have been created to load our new function responsible to keep the file into the database. To do this some changes have to be done in html5-file-upload/assets/js/script.js


Changes in script.js:

In the line 12: We need to replace "url: 'post_file.php'," for "url: REQUEST_UPLOAD,"

In the line 17: We need add $('#response').append(response);



script.js after load REQUEST_UPLOAD is waiting for a json response. The result function will be append in our view ( $('#response').append(response); )  :

<div id="response"></div> 


In our controller (default.py):

def my_upload():

    import re
    filename=fileApp.filename.replace(' ', '')

    #Prevent special caracters in the file name
    regex = re.compile(expression)
    if regex.search(filename):
    result="Special caracters NO!!! Nothing to do..."
    return response.json('<div class="error_wrapper">\
            <div id="title__error" class="error" style="display: inline-block;">'\


    aux=db.files.file.store(fileApp, filename)

    if request.env.http_x_forwarded_host:
      http_host = request.env.http_x_forwarded_host.split(':',1)[0]
      http_host = request.env.http_host

    last = db().select(db.files.ALL)[-1]
    result=T('Successfuly! Here the link: ')
    result+="<a href=http://"+http_host+'/'+request.application+'/'+request.controller+'/download/'+last.file+">Donwload</a>"

    return response.json('<div class="alert alert-success">'\


Finally we have to create our small table to keep the files in the model (db.py):

import datetime

   Field('title', "string", unique=False),
   Field('file', 'upload', autodelete=True),

db.files.title.requires = IS_NOT_EMPTY()

unique=False: Allow upload files with the same name. If true, file name can not be duplicate

autodelete=True: Allow web2py auto delete the file from the file system, once is delete from the database



DONE!!! Here the result ->


Before to upload a image:



After drop the image in box:



The result in the database:




Related slices

Comments (4)

  • Login to post

  • 0
    freedumb2000 10 years ago

    Unfortuantly, this does not work as a component. Does anybody know why or can point me to a HTML5 uploader that does?

  • 0
    freedumb2000 10 years ago

    Unfortuantly, this does not work as a component. Does anybody know why or can point me to a HTML5 uploader that does?

  • 0
    nate 11 years ago

    "invalid table/column name "file" is a "ALL" reserved SQL keyword"

    is there an easy way to fix this, please

    replies (1)
    • josedesoto 11 years ago

      I think you are getting the error in the model because the Field with the name: file is a reserved SQL keyword. try to change it, for example: f_file. After that in the controller you have to change it when you are calling to the field, for example:

      aux=db.files.f_file.store(fileApp, filename) db.files.insert(f_file=aux,title=filename)

Hosting graciously provided by:
Python Anywhere