CGI upload from ajax

flope004 has asked for the wisdom of the Perl Monks concerning the following question:

Hi all,

I have a problem using the upload method from CGI. I am getting an undefined filehandle
Use of uninitialized value in <HANDLE>
I don't have problems retrieving the parameters from the ajax and creating the folder and the file (an empty one)
The problem is I cannot read from the filehandle.
Any suggestions how to solve this.

Thanks for your time and help!

html form

<link rel="stylesheet" href="jquery.jgrowl.css" type="text/css"/>

<!-- jQuery Library -->
<script type="text/javascript" language="javascript" src="jquery-1.2.6
+.js"></script>
<script type="text/javascript" language="javascript" src="jquery.jgrow
+l.js"></script>

<script type="text/javascript" language="javascript" src="test_ajax.js
+"></script>

<input type=file id=test>

<div id=output></div>
[download]

ajax

$(document).ready(function () {
    $("#test").change(function(){
      alert($(this).val());
      var info = $.trim($(this).val());
        $.ajax({
          type: "POST",
          url: "/cgi-bin/upload_and_check.cgi",
          data: "filename="+info+"&session_id=abc",
          success: function(msg){                      
            alert("This is the message: " + msg);
            $("#output").html(msg);
            $.jGrowl(msg, { sticky: true });
          }
       });
    });     
});
[download]

CGI

#!/usr/bin/perl

use warnings;
use strict;
use CGI;

my $form = new CGI;
print $form->header; #Print HTML header

my $web_home = "$ENV{DOCUMENT_ROOT}/ajax";

#Getting parametres from form
my $session_id = $form->param("session_id"); 
my $filename = $form->param("filename");

#Create temp dir if doesn't exist yet
umask 0000;  
if ( !-e "$web_home/tmp/$session_id" ) {
    mkdir "$web_home/tmp/$session_id", 0777 
         or die "Problems creating temporary dir '$web_home/tmp/$sessi
+on_id':  $!\n";
}

#the upload() method to grab the file handle
my $UPLOAD_FH = $form->upload("filename");

my $newfilename = $session_id;

open my $NEWFILE_FH, "+>", "$web_home/tmp/$session_id/$newfilename.txt
+" 
    or die "Problems creating file '$newfilename': $!";
 
while ( <$UPLOAD_FH> ) {
    print $NEWFILE_FH;
}

close $NEWFILE_FH or die "I cannot close filehandle: $!";

exit;
[download]

Comment on CGI upload from ajax Select or Download Code

Replies are listed 'Best First'.
Re: CGI upload from ajax by derby (Abbot) on Feb 04, 2009 at 12:10 UTC
More than likely it's because your POST does not have the correct MIME type .. file uploads need to be multipart/form-data (and you're probably defaulting to application/x-www-form-urlencoded). Rather than doing this yourself, I would suggest one of the many JQuery file upload plugins. -derby	[reply]
Re^2: CGI upload from ajax by flope004 (Acolyte) on Feb 04, 2009 at 14:53 UTC
Thank you all for the fast replies! I added this line: contentType: "multipart/form-data", to the ajax part but still not working...I am getting the following error Malformed multipart POST: data truncated I will search for other options but I am still surprised why it shouldn't work.	[reply]
Re^3: CGI upload from ajax by derby (Abbot) on Feb 04, 2009 at 16:41 UTC
Right ... use a plugin ... you have to construct the html in such a way that the browser will do the right thing. Most of the plugins will wrap your html with the proper html snippets. -derby	[reply]
Re^4: CGI upload from ajax by flope004 (Acolyte) on Feb 04, 2009 at 20:26 UTC
Re^5: CGI upload from ajax by derby (Abbot) on Feb 04, 2009 at 20:55 UTC
Re: CGI upload from ajax by Anonymous Monk on Feb 04, 2009 at 01:56 UTC
That could never work, security risk. The only way to upload a file is for a user to click input/file and input/submit.	[reply]
Re^2: CGI upload from ajax by Anonymous Monk on Feb 04, 2009 at 03:05 UTC
Well, I don't know the answer to the problem, but I think there are a few web pages working in a similar way, such as gmail. In Gmail, just modifying the input field (attachment) the file uploads automatically.	[reply]
Re: CGI upload from ajax by flope004 (Acolyte) on Feb 05, 2009 at 22:35 UTC
:) Finilly, I found a solution. Here, I am posting a really simple example using ajax and cgi/perl (server site) to upload files. No reload and no submit button. I hope it helps for others as example. HTML <!--jquery should be included before any other js--> <script type="text/javascript" language="javascript" src="/simple_ajax +_cgi_example/jquery-1.2.6.js"></script> <script type="text/javascript" language="javascript" src="/simple_ajax +_cgi_example/simple_ajax_cgi_example.js"></script> <html> <body> <form action="/cgi-bin/simple_ajax_cgi_example.cgi" id="form1" name="f +orm1" encType="multipart/form-data" method="post" target="hidden_fra +me" > <input type="file" id="file" name="file" style="width:450"> <!--<INPUT type="submit" id="test" value="submit">--> <span id="msg"></span> <br> <iframe name='hidden_frame' id="hidden_frame" style='display:none'></i +frame> </form> </body> </html> [download] AJAX simple_ajax_cgi_example.js `$(document).ready(function () { $("#file").change(function() { $("#form1").submit(); }); }); function callback(msg) { $("#msg").html(msg); }` [download] CGI/Perl simple_ajax_cgi_example.cgi #!/usr/bin/perl use warnings; use strict; use CGI; my $form = new CGI; print $form->header; #Print HTML header. this is mandatory my $web_home = "$ENV{DOCUMENT_ROOT}/simple_ajax_cgi_example"; my $UPLOAD_FH = $form->upload("file"); my $newfilename = "new_file"; umask 0000; #This is needed to ensure permission in new file open my $NEWFILE_FH, "+>", "$web_home/tmp/$newfilename.txt" or die "Problems creating file '$newfilename': $!"; while ( <$UPLOAD_FH> ) { print $NEWFILE_FH "$_"; } close $NEWFILE_FH or die "I cannot close filehandle: $!"; ##this is the only way to send msg back to the client print "<script>parent.callback('upload file success')</script>"; exit; [download]	[reply] [d/l] [select]