2

I have configured cgi scripts for my apache2 web server.

Here is what I want to do:

  1. Client uploads the image to the server. (this already works)
  2. 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?

10
  • Print something on the python script to debug!
    – Lucio
    Aug 24, 2014 at 20:00
  • if I add print command in my python script, where would it print? Aug 24, 2014 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 '<html>' print '<head>' print '<body>' print '<h2>Hello Word!</h2>' print '</body>' print '</html>' Aug 24, 2014 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, 2014 at 21:00
  • I have edited my question, with the alert message I got, when I added alert(data) as you have mentioned. Aug 24, 2014 at 21:28

1 Answer 1

1

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.

Not the answer you're looking for? Browse other questions tagged .