Re: Upload file using the LOAD (....., ajax = True)

[Massimo Di Pierro]

Unfortunately this cannot be done easily. ajax of multipart forms (forms containing file upload) is not in html.

According to one of the answers here it is in HTML5 

http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery

and we could add support for it in web2py.js (I will try it later tonight) but still it would not work on IE:

http://stackoverflow.com/questions/7899513/send-multipart-formdata-with-jquery-ajax-in-ie

Massimo

On Monday, 6 August 2012 22:49:27 UTC-5, Picheth wrote:

I have a problem with the upload file using the LOAD (....., ajax = True)

please .. any help, cues or snippets of codes to accomplish this ... will be greatly appreciated

Picheth.

[Massimo Di Pierro]

Try trunk. With Chrome it may work but no promise. Let me know.

[Anthony]

At the end of this section in the book it says:

*Please note:* Because Ajax post does not support multipart forms, i.e. file uploads, upload fields will not work with the LOAD component. You could be fooled into thinking it would work because upload fields will function normally if POST is done from the individual component's .load view. Instead, uploads are done with ajax-compatible 3rd-party widgets and web2py manual upload store commands.

In the web2py cookbook, there is a recipe for this. The app associated with that recipe can be downloaded here: https://github.com/mdipierro/web2py-recipes-source/blob/master/apps/04_advanced_forms/web2py.app.upload.w2p. It uses the jquery.form.js plugin: http://jquery.malsup.com/form/#file-upload. The app includes a customized web2py_ajax.js (which is named web2py.js in more recent versions of web2py) with a custom version of web2py_trap_form():

function web2py_trap_form(action,target) {
   jQuery('#'+target+' form').each(function(i){
     var form=jQuery(this);
     if(!form.hasClass('no_trap'))
   if(form.find('.upload').length>0) {
     form.ajaxForm({
       url: action,
       success: function(data, statusText, xhr) {
         jQuery('#'+target).html(xhr.responseText);
         web2py_trap_form(action,target);
         web2py_ajax_init();
       }
     });
   } else {
            form.submit(function(e){
              jQuery('.flash').hide().html('');
              web2py_ajax_page('post',action,form.serialize(),target);
              e.preventDefault();
            });
   }
   });
}

Anthony

[captainy]

Hey Anthony,

i've tried this recipe and it works. In my opinion it's a common task in modern web development to upload files in the "ajax-way". My problem is, as with as other recipes in the book, the modification of a core file of the web2py framework. What happens, if we do an update to a newer version of web2py?  I think all this modifications will be lost. What do you think is the best way to handle this problem?

Regards, Paul

[Richard Vézina]

You may put your own particular stuff in a file appart call app.js or app.css, etc.

You then override css or create your particular js there...

Richard

--
 
 
 

[Anthony]

Good point. Maybe submit an issue and reference this thread.

Anthony

[Bart]

Hi Anthony,

This solution you mention is, with some minor changes, still working in the current version. I've managed to get the change working in the 2.12.3 version of web2py.js:

Change function trap_form to:

      trap_form: function(action, target) {

        /* traps any LOADed form */

        $('#' + target + ' form').each(function(i) {

          var form = $(this);

          if(form.hasClass('no_trap')) {

            return;

          }

          form.attr('data-w2p_target', target);

          var url = form.attr('action');

          if((url === "") || (url === "#") || (typeof url === 'undefined')) {

            /* form has no action. Use component url. */

            url = action;

          }

 /* begin change  */

     if(form.find('.upload').length>0) {

    form.ajaxForm({

      url: url,

      success: function(data, statusText, xhr) {

    jQuery('#'+target).html(xhr.responseText);

    web2py.trap_form(action, target);

    web2py.ajax_init();

      }

    });

     } else { /* end change */

          form.submit(function(e) {

            web2py.disableElement(form.find(web2py.formInputClickSelector));

            web2py.hide_flash();

            web2py.ajax_page('post', url, form.serialize(), target, form);

            e.preventDefault();

          });

 };

          form.on('click', web2py.formInputClickSelector, function(e) {

            e.preventDefault();

            var input_name = $(this).attr('name');

            if(input_name != undefined) {

              $('<input type="hidden" />').attr('name', input_name)

                .attr('value', $(this).val()).appendTo(form)

            }

            form.trigger('submit');

          });

        });

      },

Regards,

Bart

Op dinsdag 7 augustus 2012 06:43:36 UTC+2 schreef Anthony:

[Mike Constabel]

Hello all and Anthony,

Am Freitag, 20. November 2015 07:52:05 UTC+1 schrieb Bart:

Hi Anthony,

This solution you mention is, with some minor changes, still working in the current version. I've managed to get the change working in the 2.12.3 version of web2py.js:

Change function trap_form to:

I tried this with 2.14.2. The upload works, but the form is reloaded when there is an error in the form.

Attached an my example, diff against the welcome app from 2.14.2.

If I use the form default/test1 in my example without changes to web2py.js:

On validation errors the error message is shown without reload the form. The upload of course doesn't work.

If I patch web2py.js, the upload work. But the form no more works as expected on validation errors.

Is there is a new solution for ajax uploads? Did I made an mistake? The solutions I found are >5 years old.

This one is the one which seems the most usable.

Regards,
Mike

[Massimo Di Pierro]

Hello Mike,

could you explain your patch to web2py-developers? it is quite extensive.

[Mike Constabel]

Hello Massimo,

Am Sonntag, 27. März 2016 17:18:42 UTC+2 schrieb Massimo Di Pierro:

Hello Mike,

could you explain your patch to web2py-developers? it is quite extensive.

 

 I think you misunderstood me (or I didn't explain it well).

This "patch" is only a summary of what I found in this thread to do uploads with ajax.

https://groups.google.com/d/msg/web2py/b83MdNrAijo/fBxeQJLDkfYJ
https://groups.google.com/d/msg/web2py/b83MdNrAijo/0p6jzDeuBAAJ
+ http://malsup.com/jquery/form/

It's only a test if this solution from Anthony/Bart etc. works in newest version. It doesn't work completely.

I only wanted to ask if there is a new / updated solution.

Or did I misunderstood you?

Regards,
Mike

[Massimo Di Pierro]

OK. I guess I misunderstood. Let me study your solution and get back to you.