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())}}
{{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:

 

 

 

Related slices

Comments (4)

  • Login to post



  • 0
    freedumb2000 6 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 6 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 7 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 7 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