CODEWITHSUNDEEP
javascriptpythonhtmlajaxcgi
b10hazard
b10hazard

Reputation: 7809

having problems getting a python cgi script to open file passed to it from AJAX

In a prior post I was trying to upload a file to a server using HTML and Javascript. I ran into several problems with my implementation so I've taken a different approach. I have a HTML form and a python script in the cgi directory of my webserver. Here is my HTML code...

<html>
<head>
<script type="text/javascript">
    function loadXMLDoc(){
        var xmlhttp;
        if (window.XMLHttpRequest){
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else{
            // code for IE6, IE5 seriously, why do I bother?
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function(){
            if (xmlhttp.readyState==4 && xmlhttp.status==200){
                    document.getElementById("outputDiv").innerHTML=xmlhttp.responseText;
                }
        }
        var file = document.getElementById('idexample').value;
        xmlhttp.open("GET","/cgi/ajax.py?uploadFile="+file,true);
        xmlhttp.send();
    }
</script>
</head>

<body onload="changeInput()">
<form name = "form_input" enctype="multipart/form-data" method="POST">
    <input type="file" ACCEPT="text/html" name="uploadFile" id="idexample" />
    <button type="button" onclick="loadXMLDoc()">Enter</button>
</form>
<div id="outputDiv"></div>
</body>
</html>

I am using AJAX because it occured to me that my cgi script could take up to a couple of minutes to run depending on the file the user enters. What I'm trying to do is get the contents of the file passed to my python CGI script and print them out on the page. All I'm getting is "C:\fakepath\. What I want to do is get the file contents. Here is my cgi script...

#!/usr/bin/python
import cgi

form = cgi.FieldStorage()
print 'Content-Type: text/html\n'
if form.has_key('uploadFile'):
    print str(form['uploadFile'].value)
else:
    print 'no file'

Also should I be using 

xmlhttp.open("POST","/cgi/ajax.py",true);

instead of 

xmlhttp.open("GET","/cgi/ajax.py?uploadFile="+file,true);

I tried both but the POST one doesn't even return the name of my file. Also it occured to me that I read that I may not even need the tags in my script since I submit this information using javascript. Is this true. My page seems to work without the form tags (at least on Chrome and Firefox).

Upvotes: 1

Views: 2192

Answers (1)

Roy Hyunjin Han
Roy Hyunjin Han

Reputation: 5093

If you examine the variable file using console.log(), you will notice that it only contains the filename and not its contents.

var file = document.getElementById('idexample').value;
console.log(file); // Outputs filename

The standard way to upload a file via AJAX is to use an iframe. The following code is taken from jquery.extras.js and is based on malsup's form plugin.

<html>
<body>

<form id=input action=/cgi/ajax.py method=post>
    <input type=file name=uploadFile>
    <input type=submit value=Submit>
</form>

<div id=output></div>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script>
    $.fn.ajaxForm = function(options) {
        options = $.extend({}, {
            onSubmit:function() {},
            onResponse:function(data) {}
        }, options);
        var iframeName = 'ajaxForm', $iframe = $('[name=' + iframeName + ']');
        if (!$iframe.length) {
            $iframe = $('<iframe name=' + iframeName + ' style="display:none">').appendTo('body');
        }
        return $(this).each(function() {
            var $form = $(this);
            $form
                .prop('target', iframeName)
                .prop('enctype', 'multipart/form-data')
                .prop('encoding', 'multipart/form-data')
                .submit(function(e) {
                    options.onSubmit.apply($form[0]);
                    $iframe.one('load', function() {
                        var iframeText = $iframe.contents().find('body').text();
                        options.onResponse.apply($form[0], [iframeText]);
                    });
                });
        });
    };
    $('#input').ajaxForm({
        onResponse:function(data) {
            $('#output').html(data);
        }
    });
</script>

</body>
</html>

Your CGI code is fine. However, I highly recommend using a web framework like Pyramid or Django for your own sanity.

#!/usr/bin/python
import cgi

form = cgi.FieldStorage()
print 'Content-Type: text/html\n'
if 'uploadFile' in form and form['uploadFile'].filename:
    print form['uploadFile'].value
else:
    print 'no file'

Upvotes: 1

Related Questions