Upload / Attach JPG as part of Web Form submission

  CLONNEN 09:42 03 Jun 2006
Locked

Does Heart Internet support the uploading / attaching of JPGs in web forms?

I have installed their Form-to-Email CGI and now have a fully functioning web form as far as text fields are concerned. The web form is used for reporting software problems.

Since most users have a habit of being incredibly vague about their problem in the text box area I would like users to have the option to send me a JPG screenshot with a maximum file size of 100KB within the same form but am not sure what the correct procedure is or if it's possible.

If it needs a separate form to do this I could put one on the following page that the user sees.

  harristweed 10:06 03 Jun 2006

It's not difficult to upload files, here is a tutorial.

click here

  beynac 10:35 03 Jun 2006

They could also upload the picture to ImageShack click here or photobucket (sorry - don't know the url) and then send you a link to the picture.

  CLONNEN 13:29 03 Jun 2006

This is what I have so far :

uploader.php
<?
// Where the file is going to be placed
$target_path = "uploads/";

/* Add the original filename to our target path. Result is "uploads/filename.extension" */
$target_path = $target_path . basename( $_FILES['uploadedfile']['name']);

// This is how we will get the temporary file...
$_FILES['uploadedfile']['tmp_name'];

$target_path = "uploads/";

$target_path = $target_path . basename( $_FILES['uploadedfile']['name']);

if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target_path)) {
echo "The file ". basename( $_FILES['uploadedfile']['name']). " has been uploaded";
} else{
echo "There was an error uploading the file, please try again!";
}
?>

HTML FORM PAGE CODE
<form enctype="multipart/form-data" action="uploader.php" method="POST">
<P ALIGN=LEFT>Upload a screenshot of the error in JPG format maximum file size 100KB (To take a screenshot press PrintScreen button and then Paste into any image / photo program which can save as JPG):

<input type="hidden" name="MAX_FILE_SIZE" value="100000" />
<input type="hidden" name="FILE_TYPE_ALLOW" value="image/jpeg,image/pjpeg" />
<input name="uploadedfile" type="file" /><br />
<input type="submit" value="Upload File" />
</form>

I have an empty "uploads" directory, uploader.php and form.html all in the root directory of my website.

When I upload a JPG file using the HTML form it goes into the "uploads" directory.

The problem is I want the file passed onto me as an email attachment OR alternatively to send me an email notification of the upload so I can FTP into my website directory to copy it to my computer.

My other problem with the code I have so far is that if someone tries to upload a different file type (eg. GIF) it still brings up the File Uploaded Message which means the user will think it has been sent when in fact it hasn't.

  CLONNEN 21:38 03 Jun 2006

After much trawling around Google I found a way of doing a file attachment but it wasn't compatible with my text fields so I decided to split it into 2 forms. Form 1 has all the important text info handled by FormMail.cgi and Form 2 has a file attachment send feature via mail.php

  CLONNEN 21:40 03 Jun 2006

mail.php

<html>
<head>
<title> Sending Email </title>
</head>
<body>
<?php
// Read POST request params into global vars
$to = $_POST['to'];
$from = $_POST['from'];
$subject = $_POST['subject'];
$message = $_POST['message'];

// Obtain file upload vars
$fileatt = $_FILES['fileatt']['tmp_name'];
$fileatt_type = $_FILES['fileatt']['type'];
$fileatt_name = $_FILES['fileatt']['name'];

$headers = "From: $from";

if (is_uploaded_file($fileatt)) {
// Read the file to be attached ('rb' = read binary)
$file = fopen($fileatt,'rb');
$data = fread($file,filesize($fileatt));
fclose($file);

// Generate a boundary string
$semi_rand = md5(time());
$mime_boundary = "==Multipart_Boundary_x{$semi_rand}x";

// Add the headers for a file attachment
$headers .= "\nMIME-Version: 1.0\n" .
"Content-Type: multipart/mixed;\n" .
" boundary=\"{$mime_boundary}\"";

// Add a multipart boundary above the plain message
$message = "This is a multi-part message in MIME format.\n\n" .
"--{$mime_boundary}\n" .
"Content-Type: text/plain; charset=\"iso-8859-1\"\n" .
"Content-Transfer-Encoding: 7bit\n\n" .
$message . "\n\n";

// Base64 encode the file data
$data = chunk_split(base64_encode($data));

// Add file attachment to the message
$message .= "--{$mime_boundary}\n" .
"Content-Type: {$fileatt_type};\n" .
" name=\"{$fileatt_name}\"\n" .
//"Content-Disposition: attachment;\n" .
//" filename=\"{$fileatt_name}\"\n" .
"Content-Transfer-Encoding: base64\n\n" .
$data . "\n\n" .
"--{$mime_boundary}--\n";
}

// Send the message
$ok = @mail($to, $subject, $message, $headers);
if ($ok) {
echo "<p>Form successfully Submitted</p>";
} else {
echo "<p>Mail could not be sent. Sorry!</p>";
}
?>
</body>
</html>

  CLONNEN 21:41 03 Jun 2006

File Attachment Form

<script type="text/javascript" language="JavaScript"><!--
function check() {
var ext = document.f.pic.value;
ext = ext.substring(ext.length-3,ext.length);
ext = ext.toLowerCase();
if(ext != 'jpg') {
alert('You selected a .'+ext+
' file; please select a .jpg file instead!');
return false; }
else
return true; }
//--></script>

<form method="post" name=f
enctype="multipart/form-data"
onsubmit="return check();"
action="mail.php">
<P><B>The form on the previous page has been successfully submitted. </B>
</P>
<INPUT TYPE=HIDDEN NAME="to" VALUE="[email protected]">
<INPUT TYPE=HIDDEN NAME="subject" VALUE="JPG Screenshot">
<p>
Your Email Address: <input type="text" name="from" value="">
<p>
You can also send a screenshot of the error in JPEG format (JPG) maximum file size 40KB - To take a screenshot press PrintScreen button and then Paste into any image / photo program which can save as JPG:
<br>
<input type="file" name="fileatt" size="40"
accept="image/jpeg">
<p>
Any other comments:<br>
<textarea name="message" rows="3" cols="40"
onfocus="check();">
</textarea>
<p>
<input type="submit" value="Send">
</form>

This thread is now locked and can not be replied to.

Elsewhere on IDG sites

HP Envy x2 review: Hands-on

Iconic New York graphic designer Milton Glaser on his uplifting new subway posters

New iMac Pro release date, UK price & specs rumours

Comment suivre le parcours du père Noël ?