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())}}
{{response.files.append(URL(r=request,c='static',f='html5-file-upload/assets/js/jquery.filedrop.js'))}}
{{response.files.append(URL(r=request,c='static',f='html5-file-upload/assets/js/script.js'))}}
{{extend 'layout.html'}}

{{block right_sidebar}}

{{end}}

<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>
</div>

<script>
    //Global variable for script.js
    REQUEST_UPLOAD='{{=URL(r=request,f="my_upload")}}'
</script>

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
    fileApp=request.vars.pic
    filename=fileApp.filename.replace(' ', '')
    result=''
    http_host=''

    #Prevent special caracters in the file name
    expression='[*+~$&^#@!;:,|]'
    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;">'\
            +result+\
            '</div></div>')

   

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

    if request.env.http_x_forwarded_host:
      http_host = request.env.http_x_forwarded_host.split(':',1)[0]
    else:
      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">'\
            +result+\
            '</div>')

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

import datetime
now=datetime.datetime.now()

db.define_table('files',
   Field('title', "string", unique=False),
   Field('file', 'upload', autodelete=True),
   Field('datecreated','datetime',default=now,readable=False))


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: