You can set up Gmail or Hotmail to act as your mail server. See here<\/a> or here<\/a> for useful guides on setting up sSMTP on your linux laptop.<\/p>\n Configuration:<\/p>\n First, set up the Dancer2 configuration file. The original Dancer comes with a helper script which will set up libraries, config files etc. I used this and converted what I needed to Dancer2(All is explained here<\/a>. I prefer Config::General<\/a> format to YMAL so I changed the config file to Config::General format and the file suffix from “.yml” to “.conf”.<\/p>\n Main Configuration File.<\/span><\/p>\n This config file, written in Config::General<\/a> format, provides the application with the main view layout( or “wrapper” ) name, “main.tt”. It also notifies the application that we intend to use Template::Toolkit for our views as opposed to the Dancer2::Template::Simple. I specify that the Template will use “[%” style tags as opposed to the Dancer default of “<%” tags. This may no longer be necessary with Dancer2. Development Configuration File<\/span><\/p>\n Most of this, except the Input File and Email sections are set up automatically for you using the Dancer helper script. I changed the logging to output to a file (logs\/development.log). I also added some configuration for sending the email via sSMTP. <\/p>\n <\/p>\n Views:<\/p>\n I use Template Toolkit for my templating. Dancer2 uses a “layout” as a type of wrapper for your template. Here is mine located at views\/layouts\/main.tt.<\/p>\n Layout.<\/span><\/p>\n I have included all the Bootstrap CSS links along with the Bootstrap JavaScript to provide the fancy photo\/image preview etc. It is also necessary to provide links to JQuery in order for the Bootstrap code to work. Notice the Upload Page View.<\/span><\/p>\n This template view (photo_upload.tt), it the first page that is rendered when the application is called.It contains the “Browse” button for searching for the file\/image to be uploaded on the client’s device. It also has an email to field, along with the necessary send button. <\/p>\n Most of this comes straight from the Jasny Bootstrap documentation.<\/a><\/p>\n Now it is just a matter of writing the\u00a0 Dancer2 script.<\/p>\n <\/p>\n Dancer2 Module<\/p>\n The first part of the module took care of incorporating all the necessary modules, frameworks and package “global” variables. The most important modules being Dancer2 and Template modules. The next method uses the same HTTP route, this time using “POST”. It is called after the file has been uploaded and the ‘Email Photo’ button has been clicked. This method takes care of passing the input parameters(uploaded file object and email address) to a validation method. The CPAN module Email::Valid is used to validate the email address while File::LibMagic has the necessary power to validate the uploaded image. From here, the Email Message building and sending methods are called. And finally, a results page is rendered with the details as to the success or failure of the operation.<\/p>\n The input validation method using Email::Valid and File::Lib::Magic to do the heavy lifting here.<\/p>\n The Email Message is build using various CPAN modules. And then there is the Error processing. Just in case …….<\/p>\n This pretty much takes care of uploading the photograph, validating that it is in fact a photo or some other image type and validating the ‘to’ email address. It also checks to make sure that the file is not larger than the maximum size specified in the configuration file. It then emails the photo to the requested email address. Along the way it also logs some debug and error messages. If everything runs as planned, a page will be rendered notifying the user of the operations success.<\/p>\n Views (cont):<\/p>\n Display the results of our actions in photo_sent.tt.<\/span><\/p>\n This is the final template view rendered. Only a few things to note here for those of you who are not familiar with Template::Toolkit. Template::Toolkit allows lots of data processing and manipulation. It has many Plugins that can be installed to filter data or to use various CPAN modules like DateTime.pm right inside the template. Photo Upload Page<\/span> View Uploaded Photo<\/span> Results Page<\/span> Ok, thats it for this one for now. There are a few other things that I could do here. Test scripts need to be setup to really test this one out. Also I could add some more client side validation to the existing validation provided by Bootstrap. I have used this<\/a> in the past and found it a very useful client side validation library. Also I plan to check out this more elaborate jQuery file upload<\/a> library in the future.<\/p>\n Dancer2 provides a nice framework for building small to medium sized Web based applications. It is not as powerful, or as well documented as Catalyst. On the other hand, the learning curve is somewhat less steep than Catalyst. I still think that Catalyst is a much better framework, but I do plan to use Dancer2 for some more small applications. Plack::Builder is also another option worth checking out for very small web apps.<\/p>\n The code for this can be found in my GitHub Repo<\/a>.<\/p>\n <\/p>\n
\nWe also include UTF-8 encoding for good measure.<\/p>\n\r\nappname = "PhotoUp"\r\nlayout = "main"\r\ncharset = "UTF-8"\r\n<engines>\r\n <template_toolkit>\r\n ENCODING = utf8\r\n start_tag = '[%'\r\n end_tag = '%]'\r\n <\/template_toolkit>\r\n<\/engines>\r\n<\/pre>\n
\nThe input file max size and other information can be specified here too. The more constraints that are added here, the less hard coding of data will be needed in the Perl Module.<\/p>\n\r\n\r\nlogger = "file"\r\nlog = "debug"\r\nwarnings = 1\r\nshow_errors = 1\r\n<InputFile>\r\n max_file_size = 1000000 # Kbs\r\n file_suffix = .jpeg\r\n<\/InputFile>\r\n\r\n<Email>\r\n transport = SMTP-TLS\r\n <SMP-TLS>\r\n host = smtp.live.com # hotmail\r\n username = xxxxxxxn@xxxxxxxxx.com\r\n password = "password"\r\n port = 587\r\n <\/SMP-TLS>\r\n from = xxxxxxxxxxxx@hotmail.com\r\n to = xxxxxx@xxxxxxxxx.com\r\n cc = xxx@xxxxxxxx.com\r\n subject = Here are your photos.\r\n signed = The Boss\r\n<\/Email>\r\n<\/pre>\n
\r\n\r\n<!DOCTYPE html>\r\n<html lang="en"> \r\n<meta charset="utf-8">\r\n<head>\r\n[% title %]\r\n<meta name="viewport" content="width=device-width, initial-scale=1.0" \/>\r\n<meta name="description" content="Photo Sender" \/>\r\n<meta name="author" content="austin kenny" \/>\r\n <!-- Bootstrap File Upload CSS -->\r\n <link href="[% request.uri_base %]\/css\/bootstrap\/bootstrap.css" rel="stylesheet" \/> \r\n <link href="[% request.uri_base %]\/css\/bootstrap\/bootstrap-responsive.css" rel="stylesheet" \/> \r\n <link href="[% request.uri_base %]\/css\/bootstrap\/bootstrap-fileupload.css" rel="stylesheet" \/> \r\n<\/head>\r\n<body>\r\n [% content %]\r\n<div class="text-center" id="footer">\r\n <small> Powered by <a href="http:\/\/perl.org\/">Perl<\/a>\r\n <a href="https:\/\/metacpan.org\/module\/Dancer2">Dancer2<\/a>\r\n <a href="http:\/\/jasny.github.io\/bootstrap\/index.html">Bootstrap<\/a> <\/small><\/div>\r\n<\/body>\r\n<!-- Grab Google CDN's jQuery. fall back to local if necessary --><script type="text\/javascript" src="\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.9.1\/jquery.min.js"><\/script><script type="text\/javascript">\/\/ <![CDATA[\r\n!window.jQuery && document.write('<script type="text\/javascript" src="[% request.uri_base %]\/javascripts\/jquery.js"><\\\/script>')\r\n\/\/ ]]><\/script><!-- Bootstrap File Upload Js --><script type="text\/javascript" src="[% request.uri_base %]\/javascripts\/bootstrap-fileupload.js"><\/script>\r\n<\/pre>\n[% content %]<\/code> placeholder on line 14. This is where the page specific content(photo_upload.tt) goes.<\/p>\n
\nMost of the initial heavy lifting will be done by the jQuery upload and preview script, provided by Twitter Bootstrap. When the file\/image is previewed, it can be emailed, or the user can opt to discard it in favour of another file\/image.<\/p>\n\r\n\r\n<div class="container">\r\n <!-- Browse and upload file form: -->\r\n <form class="form-file-upload file-upload " enctype="multipart\/form-data"\r\n name="photoUploadForm" action="\/photo_upload" method="POST">\r\n <fieldset>\r\n\r\n <legend class="form-file-upload-heading">Email Your Photos<\/legend>\r\n <!-- Start Bootstrap Template -->\r\n <div class="fileupload fileupload-new" data-provides="fileupload">\r\n <div class="fileupload-new thumbnail" style="width: 200px; height: 150px;">\r\n <img src="http:\/\/www.placehold.it\/200x150\/EFEFEF\/AAAAAA&text=no+image" \/>\r\n <\/div>\r\n <div class="fileupload-preview fileupload-exists thumbnail"\r\n style="max-width: 200px; max-height: 150px; line-height: 20px;">\r\n <\/div>\r\n <div>\r\n <span class="btn btn-file"><span class="fileupload-new">Select image<\/span>\r\n <span class="fileupload-exists">Change<\/span>\r\n <input type="file" name="inPhoto"\/>\r\n <\/span>\r\n <a href="in_photo" class="btn fileupload-exists" data-dismiss="fileupload">Remove<\/a> \r\n <span class="text-error">[%- upload_error -%]<\/span>\r\n <\/div> \r\n <\/div>\r\n <!-- End Bootstrap Template -->\r\n <div class="input-append">\r\n <!-- Mail-to Email address -->\r\n <input class="input-large" type="email" name="emailTo"\r\n placeholder="Email to" maxlength="60" \/>\r\n <button class="btn btn" type="submit" >Email Photo<\/button>\r\n <\/div>\r\n <div>\r\n <span class="text-error">[%- email_error -%]<\/span>\r\n <\/div>\r\n\r\n <\/fieldset>\r\n <\/form>\r\n <!-- <div id="progress"><\/div> -->\r\n <div id="messages">\r\n <p class="text-success">[%- success_message -%]<\/p>\r\n <p class="text-info">[%- info_message -%]<\/p>\r\n <p class="text-warning">[%- warning_message -%]<\/p>\r\n <p class="text-error">[%- error_message -%]<\/p>\r\n <\/div>\r\n\r\n<\/div> <!-- \/container -->\r\n<\/pre>\n
\r\n\r\npackage PhotoUp;\r\n# ABSTRACT: Upload and email photo(s) demo using ssmpt and Hotmail\r\nuse Dancer2;\r\nuse Dancer2::Core::Error;\r\n\r\nour $VERSION = '0.1';\r\n\r\nuse Data::Dump qw\/dump\/;\r\nuse Carp qw\/croak\/;\r\nuse Try::Tiny;\r\nuse IO::All;\r\nuse File::LibMagic;\r\n\r\n#------Email\r\nuse Email::Valid;\r\nuse Email::Sender::Simple qw(sendmail);\r\nuse MIME::Entity;\r\nuse Email::Sender::Transport::SMTP::TLS;\r\n\r\n#------ Globals\r\nmy $file_upload_route = '\/photo_upload';\r\nmy $uploaded_file = 'inPhoto';\r\nmy $email_to = 'emailTo';\r\nmy $image_file_suffix_rx = qr\/\\.(gif|png|jpe?g)$\/;\r\nmy $image_file_type_rx = qr\/image\\\/(jpeg|gif|png)\/;\r\n\r\n=head2 get $file_upload_route\r\n Render the file upload form.\r\n=cut\r\n\r\n<\/pre>\n
\nThe next method is the “GET” ‘\/photo_upload’ route method. It will render the photo\/image upload page with the image viewer. As you can see, there if very little coding here. Just specifying the template file and in this case, populating one template parameter, the page “title”. Dancer takes care of the rest.<\/p>\n\r\n\r\nget $file_upload_route => sub {\r\n debug 'Got to GET photo_upload page';\r\n\r\n #------ Render the upload page.\r\n template 'photo_upload.tt', { title => 'Upload Photos', };\r\n};\r\n<\/pre>\n\r\n=head2 post $file_upload_route\r\n Upload the photograph or image file. Will accept files of type .jpg, .jpeg, \r\n .png, .gif.\r\n Validates the file type and size.\r\n Will email them to the user provided email address.\r\n=cut\r\n\r\npost $file_upload_route => sub {\r\n debug 'Got to POST photo_upload page';\r\n\r\n debug "Params are : " . dump( request->params );\r\n my $validation_results = {\r\n in_photo => upload($uploaded_file) \/\/ undef,\r\n email_to => params->{$email_to},\r\n };\r\n\r\n _validate_user_input($validation_results);\r\n debug 'These are the validation results: ' . dump($validation_results);\r\n\r\n #------ Display errors\r\n if ( ( exists $validation_results->{email_error} )\r\n or ( exists $validation_results->{upload_error} ) )\r\n {\r\n debug 'Got to display some Errors.';\r\n return template 'photo_upload.tt', {\r\n title => 'Upload Photo Errors',\r\n %$validation_results,\r\n warning_message => 'You must upload the file again and enter a\r\n correct email address!',\r\n };\r\n }\r\n\r\n debug 'Good, passed the error checks.';\r\n my $in_photo = $validation_results->{in_photo};\r\n\r\n #------ Rename the Base of the temporary file to the original File Base\r\n my $photo_fq_name = _rename_uploaded_file($in_photo);\r\n\r\n my $message = _build_email_message(\r\n {\r\n email_to => $validation_results->{email_to},\r\n type => $in_photo->type,\r\n path => $photo_fq_name,\r\n encoding => 'base64',\r\n }\r\n );\r\n\r\n return _process_error('Unable to build MIME::Entity')\r\n unless $message;\r\n\r\n my $transport = _build_email_transport();\r\n\r\n return _process_error('Unable to build Email transport!')\r\n unless $transport;\r\n\r\n _send_email_msg( $message, $transport );\r\n\r\n template 'photo_sent.tt',\r\n {\r\n title => 'Emailed Photos',\r\n sent_files_heading => 'Emailed Photo(s)',\r\n success_message => $in_photo->basename\r\n . ' was emailed to '\r\n . $validation_results->{email_to},\r\n in_photos => [$in_photo],\r\n have_photos => ( $in_photo ? 1 : 0 ),\r\n return_to => uri_for($file_upload_route),\r\n };\r\n\r\n};\r\n<\/pre>\n\r\n=head _validate_user_input\r\n Validate the uploaded file and the 'to' Email address.\r\n Pass a HashRef with the Dancer Request Upload Object and\r\n the email address.\r\n Populates the HashRef with validation information.\r\n {\r\n in_photo => # the Dancer Request Upload object or not exists\r\n email_to => email@emails.com or not exists if invalid\r\n upload_error => 'Error Msg....' or not exists if ok\r\n email_error => 'Error Msg....' or not exists if ok\r\n }\r\n=cut\r\n\r\nsub _validate_user_input {\r\n my $validation_report = shift;\r\n\r\n if ( defined $validation_report->{in_photo} ) {\r\n debug 'At least there is a file uploaded.';\r\n\r\n #------ Check that the file is a valid Image or Photo\r\n $validation_report->{upload_error} = 'Not a valid photo or image type!'\r\n unless _validate_file( $validation_report->{in_photo} );\r\n }\r\n else {\r\n $validation_report->{upload_error} = 'No photo uploaded!';\r\n }\r\n\r\n #------ Validate the 'to' Email Address\r\n $validation_report->{email_error} = 'Invalid or no email address entered!'\r\n unless ( $validation_report->{email_to} =\r\n _validate_email_address( $validation_report->{email_to} ) );\r\n}\r\n\r\n=head2 _validate_email_address\r\n Validates a given Email Address.\r\n Uses Email::Valid\r\n Returns undef if not valid.\r\n=cut\r\n\r\nsub _validate_email_address {\r\n my $email_address_in = shift;\r\n my $valid_email_addr;\r\n try {\r\n $valid_email_addr = Email::Valid->address($email_address_in);\r\n }\r\n catch {\r\n error 'Problems with Email::Valid!: ' . $_;\r\n };\r\n return $valid_email_addr;\r\n}\r\n\r\n=head2 _validate_file \r\n Validate the file type by first checking the file suffix,\r\n then validating the file type with File::Lib::Magic\r\n Also checks that the file is smaller than the maximum allowed \r\n size from the config file.\r\n Returns the validated file or undef.\r\n=cut\r\n\r\nsub _validate_file {\r\n my $in_file = shift;\r\n return\r\n unless ( $in_file\r\n && ( lc( $in_file->basename ) =~ \/$image_file_suffix_rx\/ )\r\n && ( $in_file->size <= config->{InputFile}{max_file_size} ) );\r\n my $FileMagic;\r\n try {\r\n $FileMagic = File::LibMagic->new();\r\n }\r\n catch {\r\n error $_;\r\n };\r\n return $in_file\r\n if ( $FileMagic->checktype_filename( $in_file->tempname ) =~\r\n \/$image_file_type_rx\/ );\r\n}\r\n\r\n=head2 _rename_uploaded_file\r\n Renames the temporary file basename back to its original name.\r\n=cut\r\n\r\nsub _rename_uploaded_file {\r\n my $file_upload = shift;\r\n my $io_photo = io( $file_upload->tempname );\r\n my $filepath = $io_photo->filepath;\r\n return $io_photo->rename( $filepath . $file_upload->basename );\r\n}\r\n<\/pre>\n
\nMIME::Entity; # To build the Email Message
\nEmail::Sender::Transport::SMTP::TLS; # To set up the Email transport
\nEmail::Sender::Simple qw(sendmail); # Sends the Email
\nYou can check out their documentation on meta::cpan<\/a> if you are not already familiar with them.<\/p>\n\r\n=head2 _build_email_message\r\n Build the Email message\r\n Uses data from the config file to populate most of these fields.\r\n=cut\r\n\r\nsub _build_email_message {\r\n my $in_photo_details = shift;\r\n my $data_message = 'Files are attached!';\r\n\r\n #----- Follow this link for mime-types-list\r\n # http:\/\/www.freeformatter.com\/mime-types-list.html\r\n my %headers = (\r\n type => "multipart\/mixed",\r\n From => config->{'Email'}{from},\r\n To => $in_photo_details->{email_to},\r\n Subject => config->{'Email'}{subject} \/\/ 'Here is your photo',\r\n );\r\n\r\n my $message = try {\r\n MIME::Entity->build(\r\n Charset => 'utf-8',\r\n Encoding => 'quoted-printable',\r\n %headers,\r\n Data => $data_message,\r\n );\r\n }\r\n catch {\r\n error 'Unable to build MIME::Entity! ' . $_;\r\n undef;\r\n };\r\n\r\n return unless $message;\r\n\r\n #--- Attach the photo\r\n $message->attach(\r\n Disposition => "attachment",\r\n type => $in_photo_details->{type},\r\n Path => $in_photo_details->{path},\r\n Encoding => $in_photo_details->{encoding}\r\n ) if $message;\r\n\r\n return $message;\r\n}\r\n\r\n=head2 _build_email_transport\r\n Build the Email Transport. Config file specifies SMTP-TLS for this project.\r\n My laptop is configured to use sSmtp.\r\n My development configuration file has set smtp.live.com(hotmail) as the\r\n Email host for convenience.\r\n=cut\r\n\r\nsub _build_email_transport {\r\n my $transport;\r\n my $error_msg;\r\n\r\n if ( config->{Email}{transport} eq q\/SMTP-TLS\/ ) {\r\n\r\n $transport = try {\r\n Email::Sender::Transport::SMTP::TLS->new(\r\n host => config->{'Email'}{'SMTP-TLS'}{host},\r\n port => config->{'Email'}{'SMTP-TLS'}{port},\r\n username => config->{'Email'}{'SMTP-TLS'}{username},\r\n password => config->{'Email'}{'SMTP-TLS'}{password}\r\n );\r\n }\r\n catch {\r\n error 'Unable to create a transport method! ' . $_;\r\n undef;\r\n };\r\n }\r\n else {\r\n error\r\n"No Email transport method specified.\\n Did you plan to hand deliver it?";\r\n }\r\n\r\n return $transport;\r\n}\r\n\r\n=head2 _send_email_msg\r\n Send the Email with the photo attached\r\n Pass the message and the transport.\r\n=cut\r\n\r\nsub _send_email_msg {\r\n my $message = shift;\r\n my $transport = shift;\r\n\r\n try {\r\n sendmail( $message, { transport => $transport } );\r\n }\r\n catch {\r\n error 'Unable to email the files!' . $_;\r\n };\r\n}\r\n<\/pre>\n\r\n#-------------------------------------------------------------------------------\r\n# Render Error Page\r\n# Pass a message and a URL to return to.\r\n#-------------------------------------------------------------------------------\r\nsub _process_error {\r\n my $error_msg = shift \/\/ 'Something really bad must have happened.';\r\n error $error_msg;\r\n return Dancer2::Core::Error->new(\r\n response => response(),\r\n status => 500,\r\n message => $error_msg,\r\n )->throw;\r\n}\r\n\r\n#-------------------------------------------------------------------------------\r\n1\r\n__END__\r\n\r\n=pod\r\n \r\n=head1 NAME\r\n \r\n PhotoUp - Upload and Email Photo(s) Demo\r\n \r\n=head1 VERSION\r\n \r\n version 0.1\r\n \r\n=head1 SYNOPSIS\r\n Just a demo. \r\n=head1 DESCRIPTION\r\n This is just a short demo to Upload a use inputted photograph or image. The\r\n photo will be emailed to a user inputted email address using Dancer2. It will take\r\n advantage or Bootstrap's photo upload and preview JavaScript\/jQuery\r\n component. It will also use Template::Toolkit.\r\n=cut\r\n<\/pre>\n
\nI just use a little manipulation of the uploaded file size data so as to figure out the best way to represent the size units of the file. I also threw in some error and status message fields at the foot of the view, which I haven’t fully utilized yet.<\/p>\n\r\n\r\n[% USE two_dec = format('%.2f') -%]\r\n\r\n<div class="container">\r\n<!-- Sent Photos Form -->\r\n <p class="lead">[%- sent_files_heading -%] <\/p>\r\n <table class="table table-hover">\r\n <thead>\r\n <tr>\r\n <th>File Name<\/th> <th>Type<\/th> <th>Size<\/th>\r\n <\/tr>\r\n <\/thead>\r\n [% FOREACH file IN in_photos %]\r\n <tbody><tr>\r\n <td>[%- file.basename -%]<\/td>\r\n <td>[%- file.type -%]<\/td>\r\n [%# 'Display the size in most appropriate unit size.' %]\r\n [% IF file.size < 1024 %]\r\n <td>\r\n [% file.size _ "Bytes" %] \r\n <\/td>\r\n [% ELSIF file.size < 1048576 %]\r\n <td>\r\n [% two_dec(file.size \/ 1024) _ 'K' %]\r\n <\/td>\r\n [% ELSIF file.size < 1073741824 %]\r\n <td>\r\n [% two_dec(file.size \/ 1048576 ) _ 'M' %] \r\n <\/td>\r\n [% ELSE %]\r\n <td>\r\n [% two_dec(file.size \/ 1073741824 ) _ 'G' %]\r\n <\/td>\r\n [% END %]\r\n\r\n\r\n <\/tr><\/tbody>\r\n <\/table>\r\n [% END %]\r\n\r\n <a href="[% return_to %]">\r\n <button class="btn btn-large" >Back<\/button><\/a>\r\n <div id="messages">\r\n <p class="text-success">[%- success_message -%]<\/p>\r\n <p class="text-info">[%- info_message -%]<\/p>\r\n <p class="text-warning">[%- warning_message -%]<\/p>\r\n <p class="text-error">[%- error_message -%]<\/p>\r\n <\/div>\r\n<\/div> <!-- \/container -->\r\n<\/pre>\nSample Web Pages<\/h3>\n
\nThis is the initial photo upload page.<\/p>\n![\"Initial](\"http:\/\/www.aibistin.com\/wp-content\/uploads\/2013\/04\/upload_turtles-1024x507.png\")
<\/a>
\nThis is what the web page looks like when a the photograph has been uploaded.<\/p>\n![\"Photo](\"http:\/\/www.aibistin.com\/wp-content\/uploads\/2013\/04\/turtles-1024x507.png\")
<\/a>
\nThis page is displayed after the photo is emailed.<\/p>\n![\"Emailed](\"http:\/\/www.aibistin.com\/wp-content\/uploads\/2013\/04\/emailed_turtles_small-1024x507.png\")
<\/a>Todo<\/h3>\n
Summary<\/h3>\n