http request to cgi python script successful, but the script doesn't seem to run

Question

I have configured cgi scripts for my apache2 web server.

Here is what I want to do:

Client uploads the image to the server. (this already works)
On success, I want to execute the python script to resize the image.

I tried the following and the success function does execute but my python script does not seem to execute:

Javascript code that sends the request:

var input = document.getElementById('imageLoader');
imageName = input.value;
var file = input.files[0];

if(file != undefined){
  formData= new FormData();
  console.log(formData.length);
  if(!!file.type.match(/image.*/)){
    formData.append("image", file);

    $.ajax({
      url: "upload.php",
      type: "POST",
      processData: false,
      contentType: false,
      success: function() {

        var input = document.getElementById('imageLoader');
        imageName = input.value;
        var file = input.files[0];
        formData = new FormData();
        formData.append("filename", file);

        $.ajax({
          url: "http://localhost/Main/cgi-bin/resize.py",
          type: "POST",
          data: formData,
          processData: false,
          contentType: false,
          success: function(data) {
            console.log(data);
          }
        });
        // code continues...

resize.py:

#!/usr/bin/python

import cgi
import cgitb
import Image

cgitb.enable()

data = cgi.FieldStorage()

filename = data.getvalue("filename")
im = Image.open("../JS/upload/" + filename)

(width, height) = im.size

maxWidth = 600
maxHeight = 400

if width > maxWidth:
    d = float(width) / maxWidth
    height = int(height / d)
    width = maxWidth
if height > maxHeight:
    d = float(height) / maxHeight
    width = int(width / d)
    height = maxHeight

size = (width, height)
im = im.resize(size, Image.ANTIALIAS)

im.save("../JS/upload/" + filename, quality=100)

This is the apache2.conf:

<Directory /var/www/html/Main/cgi-bin>
    AllowOverride None
    Options +ExecCGI
    SetHandler cgi-script
    AddHandler cgi-script .py .cgi
    Order allow,deny
    Allow from all
</Directory>

cgi-bin and python script file permissions:

drwxrwxr-x  2 mou mou 4096 Aug 24 03:28 cgi-bin

-rwxrwxrwx 1 mou mou 1673 Aug 24 03:28 resize.py

Edit:

Executing this code

$.ajax({
    url: "http://localhost/Main/cgi-bin/resize.py",
    type: "POST",
    data: formData,     // formData = {"filename" : "the filename which was saved in a variable whie the image was uploaded"}
    processData: false,
    contentType: false,
    success: function(data) {
        alert(data);
    }
});

it alerts the following:

<body bgcolor="#f0f0f8"><font color="#f0f0f8" size="-5"> -->
<body bgcolor="#f0f0f8"><font color="#f0f0f8" size="-5"> --> -->
</font> </font> </font> </script> </object> </blockquote> </pre>
</table> </table> </table> </table> </table> </font> </font> </font><body bgcolor="#f0f0f8">
<table width="100%" cellspacing=0 cellpadding=2 border=0 summary="heading">
<tr bgcolor="#6622aa">
<td valign=bottom>&nbsp;<br>
<font color="#ffffff" face="helvetica, arial">&nbsp;<br><big><big><strong>&lt;type 'exceptions.TypeError'&gt;</strong></big></big></font></td
><td align=right valign=bottom
><font color="#ffffff" face="helvetica, arial">Python 2.7.6: /usr/bin/python<br>Sun Aug 24 17:24:15 2014</font></td></tr></table>

<p>A problem occurred in a Python script.  Here is the sequence of
function calls leading up to the error, in the order they occurred.</p>
<table width="100%" cellspacing=0 cellpadding=0 border=0>
<tr><td bgcolor="#d8bbff"><big>&nbsp;</big><a href="file:///var/www/html/Main/cgi-bin/resize.py">/var/www/html/Main/cgi-bin/resize.py</a> in <strong><module></strong>()</td></tr>
<tr><td><font color="#909090"><tt>&nbsp;&nbsp;<small>&nbsp;&nbsp;&nbsp;10</small>&nbsp;<br>
</tt></font></td></tr>
<tr><td><font color="#909090"><tt>&nbsp;&nbsp;<small>&nbsp;&nbsp;&nbsp;11</small>&nbsp;filename&nbsp;=&nbsp;data.getvalue("filename")<br>
</tt></font></td></tr>
<tr><td bgcolor="#ffccee"><tt>=&gt;<small>&nbsp;&nbsp;&nbsp;12</small>&nbsp;im&nbsp;=&nbsp;Image.open("../JS/upload/"&nbsp;+&nbsp;filename)<br>
</tt></td></tr>
<tr><td><font color="#909090"><tt>&nbsp;&nbsp;<small>&nbsp;&nbsp;&nbsp;13</small>&nbsp;<br>
</tt></font></td></tr>
<tr><td><font color="#909090"><tt>&nbsp;&nbsp;<small>&nbsp;&nbsp;&nbsp;14</small>&nbsp;(width,&nbsp;height)&nbsp;=&nbsp;im.size<br>
</tt></font></td></tr>
<tr><td><small><font color="#909090">im <em>undefined</em>, <strong>Image</strong>&nbsp;= &lt;module 'Image' from '/usr/lib/python2.7/dist-packages/PILcompat/Image.pyc'&gt;, Image.<strong>open</strong>&nbsp;= &lt;function open&gt;, <strong>filename</strong>&nbsp;= '<font color="#c040c0">\xff\xd8\xff\xe0\x00\x10</font>JFIF<font color="#c040c0">\x00\x01\x01\x00\x00\x01\x00\x01\x00\x00\xff\xdb\x00</font>C<font color="#c040c0">\x00\x06\x04\x05\x06\x05\x04\x06\x06\x05\x06\x07\x07\x06\x08\n\x10\n\n\t\t\n\x14\x0e</font>...<font color="#c040c0">\x94\r\x17\x11</font>b<font color="#c040c0">\xcd\xdc\x1a\xfe\xf1\x05\x1b\x15\xd1</font>R<font color="#c040c0">\xce\xe9</font>*<font color="#c040c0">\xb5\x8e</font>b<font color="#c040c0">\x97\x82\x87</font>R<font color="#c040c0">\xf4\xaa</font>K<font color="#c040c0">\x83</font>6<font color="#c040c0">\xbf\xfb</font>0<font color="#c040c0">\xa0\xb6</font>8<font color="#c040c0">\xa9</font>C<font color="#c040c0">\x86\x8d\x96</font>n+E<font color="#c040c0">\xd3\x7f\x99\xff\xd9</font>'</font></small></td></tr></table>
<table width="100%" cellspacing=0 cellpadding=0 border=0>
<tr><td bgcolor="#d8bbff"><big>&nbsp;</big><a href="file:///usr/lib/python2.7/dist-packages/PIL/Image.py">/usr/lib/python2.7/dist-packages/PIL/Image.py</a> in <strong>open</strong>(fp='../JS/upload/<font color="#c040c0">\xff\xd8\xff\xe0\x00\x10</font>JFIF<font color="#c040c0">\x00\x01\x01\x00\x00\x01\x00\x01\x00\x00\xff\xdb\x00</font>C<font color="#c040c0">\x00\x06\x04\x05\x06\x05\x04\x06\x06\x05\x06</font>...<font color="#c040c0">\x94\r\x17\x11</font>b<font color="#c040c0">\xcd\xdc\x1a\xfe\xf1\x05\x1b\x15\xd1</font>R<font color="#c040c0">\xce\xe9</font>*<font color="#c040c0">\xb5\x8e</font>b<font color="#c040c0">\x97\x82\x87</font>R<font color="#c040c0">\xf4\xaa</font>K<font color="#c040c0">\x83</font>6<font color="#c040c0">\xbf\xfb</font>0<font color="#c040c0">\xa0\xb6</font>8<font color="#c040c0">\xa9</font>C<font color="#c040c0">\x86\x8d\x96</font>n+E<font color="#c040c0">\xd3\x7f\x99\xff\xd9</font>', mode='r')</td></tr>
<tr><td><font color="#909090"><tt>&nbsp;&nbsp;<small>&nbsp;1994</small>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;isPath(fp):<br>
</tt></font></td></tr>
<tr><td><font color="#909090"><tt>&nbsp;&nbsp;<small>&nbsp;1995</small>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;filename&nbsp;=&nbsp;fp<br>
</tt></font></td></tr>
<tr><td bgcolor="#ffccee"><tt>=&gt;<small>&nbsp;1996</small>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fp&nbsp;=&nbsp;builtins.open(fp,&nbsp;"rb")<br>
</tt></td></tr>
<tr><td><font color="#909090"><tt>&nbsp;&nbsp;<small>&nbsp;1997</small>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else:<br>
</tt></font></td></tr>
<tr><td><font color="#909090"><tt>&nbsp;&nbsp;<small>&nbsp;1998</small>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;filename&nbsp;=&nbsp;""<br>
</tt></font></td></tr>
<tr><td><small><font color="#909090"><strong>fp</strong>&nbsp;= '../JS/upload/<font color="#c040c0">\xff\xd8\xff\xe0\x00\x10</font>JFIF<font color="#c040c0">\x00\x01\x01\x00\x00\x01\x00\x01\x00\x00\xff\xdb\x00</font>C<font color="#c040c0">\x00\x06\x04\x05\x06\x05\x04\x06\x06\x05\x06</font>...<font color="#c040c0">\x94\r\x17\x11</font>b<font color="#c040c0">\xcd\xdc\x1a\xfe\xf1\x05\x1b\x15\xd1</font>R<font color="#c040c0">\xce\xe9</font>*<font color="#c040c0">\xb5\x8e</font>b<font color="#c040c0">\x97\x82\x87</font>R<font color="#c040c0">\xf4\xaa</font>K<font color="#c040c0">\x83</font>6<font color="#c040c0">\xbf\xfb</font>0<font color="#c040c0">\xa0\xb6</font>8<font color="#c040c0">\xa9</font>C<font color="#c040c0">\x86\x8d\x96</font>n+E<font color="#c040c0">\xd3\x7f\x99\xff\xd9</font>', <em>global</em> <strong>builtins</strong>&nbsp;= &lt;module '__builtin__' (built-in)&gt;, builtins.<strong>open</strong>&nbsp;= &lt;built-in function open&gt;</font></small></td></tr></table><p><strong>&lt;type 'exceptions.TypeError'&gt;</strong>: file() argument 1 must be encoded string without NULL bytes, not str
<br><tt><small>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</small>&nbsp;</tt>args&nbsp;=
('file() argument 1 must be encoded string without NULL bytes, not str',)
<br><tt><small>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</small>&nbsp;</tt>message&nbsp;=
'file() argument 1 must be encoded string without NULL bytes, not str'


<!-- The above is a description of an error in a Python program, formatted
     for a Web browser because the 'cgitb' module was enabled.  In case you
     are not reading this in a Web browser, here is the original traceback:

Traceback (most recent call last):
  File "/var/www/html/Main/cgi-bin/resize.py", line 12, in &lt;module&gt;
    im = Image.open("../JS/upload/" + filename)
  File "/usr/lib/python2.7/dist-packages/PIL/Image.py", line 1996, in open
    fp = builtins.open(fp, "rb")
TypeError: file() argument 1 must be encoded string without NULL bytes, not str

-->

Does this mean that the formData I am sending over is empty?

if I add `print` command in my python script, where would it print? — chipChocolate.py, Aug 24 '14 at 20:05
Okay, I tried adding `print` command but it does not print anything. I added this: `print "Content-type:text/html\r\n\r\n" print '' print '' print '' print '
Hello Word!
' print '' print ''` — chipChocolate.py, Aug 24 '14 at 20:10
Edit your js code to this: `success: function(data) { alert(data) }` and please don't write all that stuff on python, with a `print 1` is enough :) — Lucio, Aug 24 '14 at 21:00
I have edited my question, with the alert message I got, when I added `alert(data)` as you have mentioned. — chipChocolate.py, Aug 24 '14 at 21:28
May be javascript don't set formData, you could print it and check where is set. — Lety, Aug 24 '14 at 21:54
I did try doing `console.log(formData);`, it logs `FormData { }`. — chipChocolate.py, Aug 24 '14 at 21:55
Okey, this is the problem, check where you set it or if it is not set at all, add this: data: { filename: xxxx } where xxxx is the name of the file you want to resize — Lety, Aug 24 '14 at 21:58
I have edit my question and added the whole Javascript code. As you can see, I do not know what the filename is as it is uploaded by the client. — chipChocolate.py, Aug 24 '14 at 22:33
Your question is beginning to get messy. Try to be more clear, maybe using http://paste.ubuntu.com can help. About the code, check your python script *externally*, and verify that it work as expected even entering erroneous filenames, test it until it hurts so you can be sure that your web application will be safer. — Lucio, Aug 24 '14 at 23:18

chipChocolate.py · Accepted Answer · 2014-08-25T02:30:44.143

I have solved the problem and the images are resizing now. Feels so good after spending the whole day figuring out the problem and eventually being able to solve it.

The problem was here:

formData.append('filename', file)    // file = { size: 1269115, type: "image/png", name: "desktop.png", path: "", lastModifiedDate: Date 2014-08-02T22:26:03.000Z, mozFullPath: "/home/mou/Pictures/desktop.png" }

In my cgi python script data.getvalue("filename") was returning the whole thing.

So, I changed file to file.name which results to FieldStorage(['filename', None, 'image.png'])

Now to get the name of the image I repalced filename = data.getvalue("filename") with filename = data['filename'].value and it worked.

http request to cgi python script successful, but the script doesn't seem to run

Hello Word!

1 Answers1