How to use dropzone.js with PERL(cgi)-CodePudding

I'm to learn how to use dropzone.js and perl(cgi). Dropzone.js has good tutorials on how to upload files using PHP, is there an easy way to use dropzone with perl(cgi).

I found a tutorial that works very well with PHP.

<?php

//upload.php

$folder_name = 'upload/';

if(!empty($_FILES))
{
 $temp_file = $_FILES['file']['tmp_name'];
 $location = $folder_name . $_FILES['file']['name'];
 move_uploaded_file($temp_file, $location);
}
?>

HTML

<html>
 <head>
  <title>How to Upload a File using Dropzone.js with PHP</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>        
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/dropzone.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/dropzone.js"></script>
 </head>
 <body>
  <div >
   <br />
   <h3 align="center">How to Upload a File using Dropzone.js with PHP</h3>
   <br />
   
   <form action="upload.php"  id="dropzoneFrom">

   </form>
   
    
   </form>
   <br />
   <br />
   <div align="center">
    <button type="button"  id="submit-all">Upload</button>
   </div>
   <br />
   <br />
   <div id="preview"></div>
   <br />
   <br />
  </div>
 </body>
</html>

<script>

$(document).ready(function(){
 
 Dropzone.options.dropzoneFrom = {
  autoProcessQueue: true,
  acceptedFiles:".png,.jpg,.gif,.bmp,.jpeg",
 
 };

 
 
 
});
</script>

Is there an easy way to convert the PHP code to CGI.

PERL (My perl code doesn't work)

my $query   = new CGI;

my $id        = $query->param("id");
my $filename  = $query->param("name");
my $myName    = $query->param("name");
 
 
my ($name, $path, $ext) = fileparse($filename, qr/\.[^.]*/ );

# my ($name, $path, $ext) = fileparse($filename, qr/\.[^.]*/ );


my $filehandle = $query->upload("name");

my $FILEWITHPATH = 'C:/xxx/xx/xxx/xxx/xxx/' . $myName;

open ( UPLOADFILE,">$FILEWITHPATH") or die "Error: $!\n";
binmode UPLOADFILE;
while ( <$filehandle> )
{
    print UPLOADFILE;
}
close UPLOADFILE;

1;

CodePudding user response：

You need to use the upload method in CGI. From the documentation of dropzone.js I took that this works asynchronously. Every time you drop a file, the upload just works.

Here's my example HTML file. I deleted most of this from your example. There is no submit button, as it just submits every time you drop one.

<html>
    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/dropzone.css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/dropzone.js"></script>
    </head>
    <body>
        <form
            action="upload.pl"
            
            id="my-awesome-dropzone">
        </form>
    </body>
</html>

Then have a Perl script like this. Mine is called upload.pl. It needs to be executable, so if you are on Linux, make sure you set chmod u x on it.

#!/usr/bin/env perl
use strict;
use warnings;
use CGI;

my $q = CGI->new;

# this is the HTTP response header
print $q->header;

if ( my $io_handle = $q->upload('file') ) {
    my $filename = $q->param('file'); # this should really be sanitized

    my $buffer;
    open ( my $out_file,'>', "upload/$filename" );
    while ( my $bytesread = $io_handle->read($buffer,1024) ) {
        print $out_file $buffer;
    }
}

It will take the name of the file, and write the content to a file with the same name in a folder called upload/ next to where the script is.

You should probably not use the real file names as that opens you up to various security problems. You can read more about this at OWASP. Instead you should generate your own file names. If you require the original name, store this alongside the new file name in your database, or wherever you put information about the files to process them further.

Please also note that CGI is an outdated technology, and you should probably use something more modern than that.