Multi-part from upload via JQuery / AJAX

[1DMF]

I seem to be going round in circles trying to find out if it is possible to upload a form that has normal input data and a file using JQuery / AJAX without FormData object.

I have found...

1. jQuery serialize doesn't work with multi-part forms
2. The filereader shim doesn't support ReadAsBinary
3. IE9 doesn't support XMLHttpRequest 2 ->

http://caniuse.com/xhr2

4. IE9 doesn't support FormData object

Am I flogging a dead horse with this?

Thanks,
1DMF


"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[1DMF]

Well the horse may not be dead quite yet - though it could be on its last legs!

I may have managed to crib together enough various polyfills to get something working.

I've yet to try to implement a working app, which is very difficult to do, because most HTML5 polyfills / shims on Github come without any documentation, examples or support, one of the sucky things I find with open source, and especially Github projects!

So far I have

    <script src="/scripts/js-webshim/minified/extras/modernizr-custom.js" type="text/javascript"></script> 
    <script src="/scripts/js-webshim/minified/polyfiller.js" type="text/javascript"></script> 
    <script src="/scripts/moxie.min.js" type="text/javascript"></script>      
    <script src="/scripts/formdata.js" type="text/javascript"></script> 
// initialise HTML5 forms polyfill

webshims.setOptions({
        'basePath':'/scripts/js-webshim/minified/shims/'       
        });

webshims.polyfill('forms filereader');

$(document).ready(function() {
      
    // check for XHR2 progress and add polyfill      
    if (! window.ProgressEvent) 
    {
            window.XMLHttpRequest = mOxie.XMLHttpRequest;            
    }
}

This has given me (cross fingers) a FileReader object, a FormData object and a revamped XMLHttpRequest which should provide the missing Level 2 functionality for progress and multi-part form submissions via AJAX.

All input greatly received.

1DMF



"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[jpadie]

I assume you don't want to use a flash uploader (a la wordpress)? that's the only way I know without using the formdata object.

 

[1DMF]

I'm getting close, once I have a working prototype I'll post my code.

This HTML5 stuff is really annoying, and putts me off coding, this week has been so stressful and frustrating, I don't wont to do any work on my own site when I get home - I want to be as far away from coding as possible!

I now see what you mean about being paid for your hobby putting you off your hobby!

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[1DMF]

Well I'm not sure a good vet will be able to resuscitate this horse :-(

IE9 errors when using the FormData polyfill....

SCRIPT438: Object doesn't support property or method 'getAsBinary'
formdata.js, line 27 character 17

It's looking more and more like IE9 will need to be put down as the humane thing to do!



"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[1DMF]

I've fixed my HTML5 woes.....

$(document).ready(function() {
       
    if(!checkHTML5())
    {
        $('#my_form').attr('action','javascript:alert("You cannot use this feature until you upgrade your browser!");');
        return;
    }

});

function checkHTML5()
{
    
    if( (!window.FileReader) || (!window.FormData) || (!('upload' in ($.ajaxSettings.xhr()))) )
    {
        showDialog('<p>Unfortunately you are using a web browser that is out-of-date and does not support the latest HTML5 web standards.</p>' +
        '<p>Please either update your browser or, if you are using Microsoft Internet Explorer 9 or below you will need to install an alternative browser such as Chrome, Firefox, or Opera.</p>' +
        '<p>If you require further assistance, please contact Craig on xxxxx xxx xxx for support.</p><p>We apologise for any inconvenience caused.</p>');
        return false;
    }
    else
    {
        return true;
    }    

}

I seem to be wasting my time going round in circles with HTML5 and polyfills / shims, they don’t appear to work properly, have little or no documentation and aren’t supported by their authors!

The above seems the simplest solution I have found so far!

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[jpadie]

do have a look at how wordpress does things. their uploader is functional across all browsers etc.

 

[1DMF]

From what I have found all these uploaders only seem to be for a file, not a multi-part form.

A lot use an iFrame and a standard form submission as fallback, which would require a whole load of additional code to support.

It's been decided it's not worth the hassle, when a HTML5 browser is available to all our users and makes life so much easier and nicer when it is HTML5 compatible. I also struggle to wade through all the embedded PHP code in most of the examples I can find, I wish they used the 'separation of concerns' paradigm, instead of embedded server side code!

If I could have got the shims/polyfills to work I would have used them, but alas, there doesn't seem to be a working polyfill for IE9 and the FileAPI / FormData and HXR2 upload features.

I thought the days of M$ and IE6 screwing up the web was a distant memory and long forgotten, what on earth were they thinking when they released IE9 as a HTML5 browser, it's as much HTML5 as Lily Savage is a women!



"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[jpadie]

ah. I see the issue you are facing. I did not realise that the backend extra coding was causing concerns. Let me know if I can help with that. there are relatively easy coping mechanisms.

 

[1DMF]

Hey Justin,

I appreciate your support. It's more the on-going issue I always have... there is only me! and there a three projects on the go (well more than that but some are on the back burner!) and like usual they want them all yesterday.

I have 3 weeks to re-write an entire extranet application, which I'm refactoring over to Catalyst, but also implementing HTML5, I really don't want to have to re-write it twice... the new HTML5 way, and re-write legacy fall-back code to support non-HTML5.

All the old procedural code soup is being refactored to an MVC architecture and all the JS junk is being re-written to better use JQuery, not to mention all the mark-up is being cleaned up utilising HTML5 and removing things such as events from the mark-up and other such old-school ways of doing things, it's a big enough job as it is, which I'm sure you appreciate. This doesn't even cover the actual re-design by our graphic designer, it's a massive project, changing from top to bottom, and I'm the only one working on it!

We have all agreed including the CEO that Web 3.0 is here and it's time to move over and if the polyfills don't work, then the browsers must be compatible. XP is dead long live Web 3.0!

Don't forget I even have side projects on the go, such as the WP spam plugin you have kindly been helping with, which incidentally had to be disabled as it took out our WP install, I believe it was to do with a JQuery framework versioning conflict, plus the DB issues with it being an MU install, but I haven't contacted you about this, as I have no time currently to even think about it let alone work with you on resolving the problems, and in the meantime the spam just keeps on coming!

As you will have noticed from last weeks post on this thread it was all getting a little stressful and I'm not even working on my own projects when I get home currently.

I'm sure once I get the proto type of the new extranet app up and running, I can start to enjoy it again!





"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[jpadie]

Good luck.

As it happens the spam plugin works fine on the demo box so unlikely to be a dB problem.

The JavaScript issues is odd. Perhaps a versioning conflict although it should work across all earlier versions. More likely a conflict with another plugin not properly loading jQuery via the enqueue method. Not much you can do about that other than fix the naughty plugin.

I'm here to help as and when you need.