Problems with POST via AJAX.

96 views
Skip to first unread message

Eric Dykstra

unread,
Oct 14, 2013, 9:00:32 PM10/14/13
to sil...@googlegroups.com
Everyone,

The SilkJS file set comes with a test file called post.jst. It provides an example on how to use SilkJS to upload a file via a standard form submit. It works perfectly. However, my application lends itself to uploading files via AJAX, instead of submitting a form. 

I ran into issues, so based on post.jst, I created a file called ajax_post.jst. The code is below. Simply place it in your SilkJS document root, and point your browser to it. Files you select are uploaded to your /tmp folder.

It is working fine for small PDF files. But there is a 'server error' for a 13MB test file I have. I can't seem to figure out what I am doing wrong. I am using a nginx proxy, but I have set the config to allow 50MB files.

In fact, if you look at the code, I have a console.log for the size of the data being sent, and received. They match.

I have added a call to set the watchdog to 2 mins, but the file isn't that large, and the default should be enough. But, YMMV.

For me, with the 13MB file, it fails. This must be some kind of 'race condition' that I am causing because I am doing something wrong with the $ajax call. Maybe the client is telling SilkJS the data is sent, but it is still uploading?

Hoping someone can figure this out! Then we'll have a SilkJS example for uploading via AJAX too.

Thanks!

Eric

-------------------------------------
<%
    // JST program to test binary file upload from ajax:

    var console     = require('console');
    var fs          = require('fs');
    var Json        = require('Json');
    var watchdog    = require('builtin/watchdog');

    if (req.data.file_data) {

        var file_data   = req.data['file_data'];
        var file_name   = req.data['file_name'];

        var file_spec   = '/tmp/' + file_name;

        console.log('');
        console.log('File Name = ' + file_name);
        console.log('File Size = ' + file_data.length);

        watchdog.set(120);
        console.log('Starting fs.writeFile64');
        success = fs.writeFile64(file_spec, file_data);
        console.log('Finished fs.writeFile64');
        watchdog.clear();

    };

%>
<html>
    <head>
        <title>Post via AJAX Test</title>
        <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
        <script>
        
            function uploadFile(data) {

                var file_name        = data.files[0].name;
                var file             = data.files[0];
                var reader           = new FileReader();

                reader.onloadend = function(event){

                    var file_data  = event.target.result.split(',')[1];

                    console.log('');
                    console.log('File Name = ' + file_name);
                    console.log('File Size = ' + file_data.length);

                    var form_data = {
                        file_data:  file_data,
                        file_name:  file_name
                    };

                    $.ajax({
                        data:          form_data,
                        timeout:       60000, // 60 seconds.
                        type:         'POST',
                        url:          '/ajax_post.jst',
                        success:       function(jsonResponse){
                            console.log('Success!');
                        },
                        error:         function() {
                            console.log('Error!');
                        }
                    });

                };

                reader.readAsDataURL(file);

            };
        
        </script>
    </head>
    <body>
        <br/>
        <input type="file" name="testfile" onchange="uploadFile(this)">
        <br/>
    </body>
</html>



Michael Schwartz

unread,
Oct 15, 2013, 11:42:21 AM10/15/13
to sil...@googlegroups.com
For files under 5MB or so, your demo program works.

For a file of 50MB, no connection was made to the server that I could detect using Chrome's developer tools.  $.ajax was called, but success or failure routines never called.

The browser refreshed after maybe 5 seconds.

Traditionally, you'd submit a form via invisible iframe.  Using FileReader() as in this example seems to read all 50MB or whatever into memory, which is pointless and a waste of RAM.

The following link explains how to target the iframe.  



--
You received this message because you are subscribed to the Google Groups "SilkJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to silkjs+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

Reply all
Reply to author
Forward
0 new messages