Zen Cart Logo
Forums / General Questions / Adding Multiple Images to Custom form To be sent to Admin Email

Adding Multiple Images to Custom form To be sent to Admin Email

Views: 7,070

Results 21 to 40 of 57
6 Mar 2013, 5:35 PM
#21
godfatherantiques avatar

godfatherantiques

Zen Follower

Join Date:
Nov 2010
Posts:
101
Plugin Contributions:
0

Adding Multiple Images to Custom form To be sent to Admin Email

4th you need to create /includes/modules/pages/your_custom_folder/jscript/image_upload.js

<script type="text/javascript">   
function addElement()
        {
            var ni = document.getElementById('org_div1');
            var numi = document.getElementById('theValue');
            var num = (document.getElementById('theValue').value -1)+ 2;
            numi.value = num;
            var newDiv = document.createElement('div');
            var divIdName = num;  newDiv.setAttribute('id',divIdName);

            newDiv.innerHTML = '<input type="file"  class="fileupload" size="80" name="file' + (num) + '" onchange="addElement()"/> <a class="removelink" onclick=\'removeElement(' + divIdName + ')\'>Remove This File</a>';

            // add the newly created element and it's content into the DOM
            ni.appendChild(newDiv);
        }

        function removeElement(divNum)
        {
            var d = document.getElementById('org_div1');
            var olddiv = document.getElementById(divNum);

            d.removeChild(olddiv);
        }

    </script>
6 Mar 2013, 5:37 PM
#22
godfatherantiques avatar

godfatherantiques

Zen Follower

Join Date:
Nov 2010
Posts:
101
Plugin Contributions:
0

Re: Adding Multiple Images to Custom form To be sent to Admin Email

5th you need to create /includes/templates/YOURS/templates/tpl_your_custom_file_name_default.php

<?php
//
// +----------------------------------------------------------------------+
// |zen-cart Open Source E-commerce                                       |
// +----------------------------------------------------------------------+
// | Copyright (c) 2003 The zen-cart developers                           |
// |                                                                      |
// | http://www.zen-cart.com/index.php                                    |
// |                                                                      |
// | Portions Copyright (c) 2003 osCommerce                               |
// +----------------------------------------------------------------------+
// | This source file is subject to version 2.0 of the GPL license,       |
// | that is bundled with this package in the file LICENSE, and is        |
// | available through the world-wide-web at the following url:           |
// | http://www.zen-cart.com/license/2_0.txt.                             |
// | If you did not receive a copy of the zen-cart license and are unable |
// | to obtain it through the world-wide-web, please send a note to       |
// | [email protected] so we can mail you a copy immediately.          |
// +----------------------------------------------------------------------+
// $Id: tpl_band_signup_default.php,v 1.3 2007/06/07 00:00:00 DrByteZen Exp $
//
?>
<div class="centerColumn" id="bandSignupDefault">

<h1 id="bandSignupDefaultHeading"><?php echo HEADING_TITLE; ?></h1>


<?php if ($messageStack->size('vehicle_tradein') > 0) echo $messageStack->output('vehicle_tradein'); ?>

<?php
  if (isset($_GET['action']) && ($_GET['action'] == 'success')) {
?>
<div class="mainContent success"><?php echo TEXT_SUCCESS; ?></div>



<?php
  } else {
?>
<?php echo zen_draw_form('vehicle_tradein', zen_href_link(FILENAME_VEHICLE_TRADEIN, 'action=send'), 'POST', 'enctype="multipart/form-data"'); ?>

<div id="bandSignupContent" class="content">
<fieldset id="bandSignup-Info">
<legend>Contact Information</legend>
<div class="alert forward"><?php echo FORM_REQUIRED_INFORMATION; ?></div>
<br class="clearBoth" />

<label class="inputLabel" for="first_name">First Name:</label>
<?php echo zen_draw_input_field('first_name', zen_output_string_protected($first_name), ' size="70" id="first_name"') . '<span class="alert">' . ENTRY_REQUIRED_SYMBOL . '</span>'; ?>

<label class="inputLabel" for="last_name">Last Name:</label>
<?php echo zen_draw_input_field('last_name', zen_output_string_protected($last_name), ' size="70" id="last_name"') . '<span class="alert">' . ENTRY_REQUIRED_SYMBOL . '</span>'; ?>

<label class="inputLabel" for="phone_number">Phone Number:</label>
<?php echo zen_draw_input_field('phone_number', zen_output_string_protected($phone_number), ' size="70" id="phone_number"') . '<span class="alert">' . ENTRY_REQUIRED_SYMBOL . '</span>'; ?>

<label class="inputLabel" for="email_address">Email Address:</label>
<?php echo zen_draw_input_field('email_address', zen_output_string_protected($email_address), ' size="70" id="email_address"') . '<span class="alert">' . ENTRY_REQUIRED_SYMBOL . '</span>'; ?>

<label class="inputLabel" for="mailing_city">City:</label>
<?php echo zen_draw_input_field('mailing_city', zen_output_string_protected($mailing_city), ' size="70" id="mailing_city"') . '<span class="alert">' . ENTRY_REQUIRED_SYMBOL . '</span>'; ?>
</fieldset>

<fieldset id="bandSignup-Payment">
<legend>Vehicle Information</legend>

<label class="inputLabel" for="vehicle_year">Vehicle Year:</label>
<?php echo zen_draw_input_field('vehicle_year', zen_output_string_protected($vehcile_year), ' size="70" id="vehicle_year"') . '<span class="alert">' . ENTRY_REQUIRED_SYMBOL . '</span>'; ?>

<label class="inputLabel" for="vehicle_make">Vehicle Make:</label>
<?php echo zen_draw_input_field('vehicle_make', zen_output_string_protected($vehicle_make), ' size="70" id="vehicle_make"') . '<span class="alert">' . ENTRY_REQUIRED_SYMBOL . '</span>'; ?>

<label class="inputLabel" for="vehicle_model">Vehicle Model:</label>
<?php echo zen_draw_input_field('vehicle_model', zen_output_string_protected($vehicle_model), ' size="70" id="vehicle_model"') . '<span class="alert">' . ENTRY_REQUIRED_SYMBOL . '</span>'; ?>

<label class="inputLabel" for="vehicle_mileage">Vehicle Mileage:</label>
<?php echo zen_draw_input_field('vehicle_mileage', zen_output_string_protected($vehicle_mileage), ' size="70" id="vehicle_mileage"') . '<span class="alert">' . ENTRY_REQUIRED_SYMBOL . '</span>'; ?>

<br class="clearBoth" />
</fieldset>

<fieldset id="bandSignup-Payment">
<legend>Additional Comments</legend>
<?php echo zen_draw_textarea_field('comments', 30, 4, zen_output_string_protected($comments), 'id="comments"'); ?>
</fieldset>

<fieldset id="bandSignup-Payment">
<legend>Vehicle Images</legend>
    
<div id="org_div1" class="file_wrapper_input">
<input type="hidden" value="1" id="theValue" /><input type="file" class="fileupload" name="uploaded_file" size="80" onchange="addElement()" /></div>
</fieldset>






<div class="buttonRow forward"><?php echo zen_image_submit(BUTTON_IMAGE_SEND, BUTTON_SEND_ALT); ?></div>



<br class="clearBoth" />
</div>
</form>

<?php
  }
?>
</div>
6 Mar 2013, 5:41 PM
#23
godfatherantiques avatar

godfatherantiques

Zen Follower

Join Date:
Nov 2010
Posts:
101
Plugin Contributions:
0

Re: Adding Multiple Images to Custom form To be sent to Admin Email

6th you need to create /includes/templates/YOURS/templates/css/stylesheet_your_custom_file_name.css

*** band signup page styles ***/

h1#bandSignupDefaultHeading { 
	text-align: center;
	color: #802536;
	}

#bandSignupDefault {
	height: 1%;
 	}

#bandSignupDefault input:focus, #bandSignupDefault textarea:focus {
	background: #BFDFFF;
	}

#bandSignupDefault LABEL.inputLabel {
	width: 12em;
	}

Most of the credit should be given to DrByte for this custom form. The picture below is what it should look like with the information I have provided. If you need any help just ask. This form will allow multiple images to be sent directly to your email as a attachment.
Attachment 12070

9 Apr 2013, 1:45 AM
#24
mutinyzoo avatar

mutinyzoo

New Zenner

Join Date:
Mar 2011
Location:
Pensacola, FL
Posts:
88
Plugin Contributions:
2

Re: Adding Multiple Images to Custom form To be sent to Admin Email

Thank you very much!

For some reason the jscript load method in Step 4 did not work for me so ended up using the Single Page method from here: https://www.zen-cart.com/wiki/index.php/Customisation_-_Templates_-_Javascript

Simply a matter of:

  1. adding jscript_ to beginning of title of image_load.js
  2. removing <script type="text/javascript"> and </script> tags
  3. saving in includes/modules/pages/YOUR_CUSTOM_PAGE directory (not jscript folder)
9 Apr 2013, 5:15 AM
#25
dw08gm avatar

dw08gm

Totally Zenned

Join Date:
Sep 2008
Location:
DownUnder, overlooking South Pole.
Posts:
1,017
Plugin Contributions:
2

Re: Adding Multiple Images to Custom form To be sent to Admin Email

GodFatherAntiques

Thanks for posting your solution. I am interested in comparing your solution with that of LadyBugMom (mentioned earlier).

Cheers

3 May 2013, 8:52 PM
#26
mutinyzoo avatar

mutinyzoo

New Zenner

Join Date:
Mar 2011
Location:
Pensacola, FL
Posts:
88
Plugin Contributions:
2

Re: Adding Multiple Images to Custom form To be sent to Admin Email

I have made a version of GodfatherAntiques' image_to_contact form for ZC1.5.1, which I will soon submit as a module.

You can see it in action at here.

What I'm hoping for insight into is the handling of the "Image too large" error, which currently displays within a blank page.
All of the following code is from within the /includes/modules/pages/image_to_contact/header_php.php file.

If I understand the following code correctly it tells the program to:

For Each Uploaded File
If there is a TEMP_NAME AND the SIZE does not exceed MAX_SIZE
THEN
Upload the file to specified location
Or ELSE
IF there IS a TEMP_NAME and it's not empty
THEN
Print FILE NAME is too Large.

	foreach($_FILES as $key => $file) {
  if ((zen_not_null($_FILES[$key]['tmp_name'])) && ($_FILES[$key]['size'] <= MAX_FILE_UPLOAD_SIZE)) {

    if ($upload = new upload($key, DIR_FS_UPLOADS)) {
        $att_array[] = array('file' => $upload->destination . $upload->filename, 'name' => $upload->filename);
    }
    } else {
       if ( zen_not_null($_FILES[$key]['tmp_name']) && ($_FILES[$key]['tmp_name'] != 'none') ) {
    echo $_FILES['uploaded_file']['name']." exceeds maximum file size of ".((MAX_FILE_UPLOAD_SIZE/1024)/1000)."MB.";
    }
  }

What I would like to do is say,

  1. IF there IS a file
    THEN
  2. IF it's NOT too large
    upload it
    IF it IS too large
    Add this to the MESSAGE STACK

Currently the error message is printed with the above line:

    echo $_FILES['uploaded_file']['name']." exceeds maximum file size of ".((MAX_FILE_UPLOAD_SIZE/1024)/1000)."MB.";

Followed by the message in this code:

	//Get the uploaded file information
	$name_of_uploaded_file =    basename($_FILES['uploaded_file']['name']); 
	//get the file extension of the file
	$type_of_uploaded_file =    substr($name_of_uploaded_file,   
	strrpos($name_of_uploaded_file, '.') + 1); $size_of_uploaded_file =    $_FILES["uploaded_file"]["size"]/1024;//size in KBs
	$path_of_uploaded_file = $upload_folder . $name_of_uploaded_file;
	$tmp_path = $_FILES["uploaded_file"]["tmp_name"];
	if(is_uploaded_file($tmp_path))
	{  
	 $pic_resize = '<a href="http://www.picresize.com/" target="_newbrowser">PicResize.com</a>';
    echo "Please resize large files (free resize tool available at " . $pic_resize ."), or contact us for alternate instructions.<p>
    Renaissance Man Inc.<br/>
2203 N. Pace Blvd.<br/>
Pensacola, FL 32505<br/>
(850) 432-1177<br/>
[email protected]</p> <hr>";
	if(!copy($tmp_path,$path_of_uploaded_file))  {    $errors .= '\n error while copying the uploaded file';  
	echo '\n error while copying the uploaded file<hr/>';}
	
	echo "Use browsers back button to return to contact form.";}

I am thinking I need to be working within the MESSAGE_STACK portion of the code:

else {
    $error = true;
    if (empty($name)) {
      $messageStack->add('image_to_contact', ENTRY_EMAIL_NAME_CHECK_ERROR);
    }
    if ($zc_validate_email == false) {
      $messageStack->add('image_to_contact', ENTRY_EMAIL_ADDRESS_CHECK_ERROR);
    }
    if (empty($enquiry)) {
      $messageStack->add('image_to_contact', ENTRY_EMAIL_CONTENT_CHECK_ERROR);
    }
  }

Input is greatly appreciated.

9 Jun 2014, 4:55 AM
#27
green_books avatar

green_books

New Zenner

Join Date:
Nov 2013
Location:
Hong Kong
Posts:
44
Plugin Contributions:
0

Re: Adding Multiple Images to Custom form To be sent to Admin Email

The code works, but I really wanna know:

Can I send the image without upload it to the server?
Cause it is dangerous to allow visitors uploading file to your website straightly , even if there is an anti-spam question.

Hope someone could tell me how...
I'm not good at coding.:dontgetit

18 Jun 2014, 8:56 AM
#28
dw08gm avatar

dw08gm

Totally Zenned

Join Date:
Sep 2008
Location:
DownUnder, overlooking South Pole.
Posts:
1,017
Plugin Contributions:
2

Re: Adding Multiple Images to Custom form To be sent to Admin Email

It is risky but there is a degree of safety in limiting the uploads to certain filetypes (eg images, not *.exe or *.bat) via .htaccess. Verifying the mimetype and using a lossless conversion method to switch between formats (eg *.doc -> *.pdf) should neutralise a large proportion of threats. For added security, do a server side virus scan before doing anything else with the upload.

18 Jun 2014, 2:24 PM
#29
mutinyzoo avatar

mutinyzoo

New Zenner

Join Date:
Mar 2011
Location:
Pensacola, FL
Posts:
88
Plugin Contributions:
2

Re: Adding Multiple Images to Custom form To be sent to Admin Email

dw08gm:

It is risky but there is a degree of safety in limiting the uploads to certain filetypes (eg images, not *.exe or *.bat) via .htaccess. Verifying the mimetype and using a lossless conversion method to switch between formats (eg *.doc -> *.pdf) should neutralise a large proportion of threats. For added security, do a server side virus scan before doing anything else with the upload.

Hi and thanks for the feedback and testing, Dave. And thank you very much for identifying potential security issues and your suggestions.

I got your test email and the image, though you say you received an error message. With MAX_FILE_UPLOAD_SIZE is set to 2MB, sending 1.99 somehow triggered the error message. Very interesting.

I'll also look into the .htaccess, mimetype verification, lossless conversion techniques and virus scan methods.

18 Jun 2014, 3:43 PM
#30
mutinyzoo avatar

mutinyzoo

New Zenner

Join Date:
Mar 2011
Location:
Pensacola, FL
Posts:
88
Plugin Contributions:
2

Re: Adding Multiple Images to Custom form To be sent to Admin Email

I'm having trouble duplicating your situation here. I was able to upload a file of 2051.55078 bytes with no error message.
I'm going to email you and ask for the specific file you tried to send and got the error message on.

18 Jun 2014, 4:35 PM
#31
mutinyzoo avatar

mutinyzoo

New Zenner

Join Date:
Mar 2011
Location:
Pensacola, FL
Posts:
88
Plugin Contributions:
2

Re: Adding Multiple Images to Custom form To be sent to Admin Email

In the updated version of the plugin I included a simple example htaccess page to include in the images/uploads directory:

# To prevent malicious uploads, replace or add to the contents of .htaccess file in images/uploads directory with this one  
# Edit FilesMatch list below as needed
# Be sure the file is named .htaccess and not just htaccess

# secure uploads directory
<Files ~ ".*\..*">
	Order Allow,Deny
	Deny from all
</Files>
<FilesMatch "\.(jpg|jpeg|jpe|gif|png|tif|tiff)$">
	Order Deny,Allow
	Allow from all
</FilesMatch>
19 Jun 2014, 6:36 AM
#32
dw08gm avatar

dw08gm

Totally Zenned

Join Date:
Sep 2008
Location:
DownUnder, overlooking South Pole.
Posts:
1,017
Plugin Contributions:
2

Re: Adding Multiple Images to Custom form To be sent to Admin Email

Mutinyzoo

The security side is largely covered by the link provided in Post 3 of this thread. I feel there is no need to reinvent the wheel.

Just to clarify the upload test, the error message I received was for trying to upload an image of size 2040Kb (ie > 2Mb). I then proceeded to upload a slightly smaller image (ie < 2Mb), which succeeded with no error message.

cheers

19 Jun 2014, 3:09 PM
#33
mutinyzoo avatar

mutinyzoo

New Zenner

Join Date:
Mar 2011
Location:
Pensacola, FL
Posts:
88
Plugin Contributions:
2

Re: Adding Multiple Images to Custom form To be sent to Admin Email

I actually think that 2040kb translates to a tiny bit smaller than 2mb at least in UNIX terms. https://wiki.ubuntu.com/UnitsPolicy. Is used this converter.

19 Jun 2014, 3:13 PM
#34
mutinyzoo avatar

mutinyzoo

New Zenner

Join Date:
Mar 2011
Location:
Pensacola, FL
Posts:
88
Plugin Contributions:
2

Re: Adding Multiple Images to Custom form To be sent to Admin Email

Inspired by above commentary from dw08gm, I've added some php code to verify acceptable extensions.

At the moment the array of extension is just residing here in the header_php.php file. Could someone tell me where a better place to hold it would be, if the user is modifying it by hand?

$acceptable_extensions = array(
	jpg, jpeg, gif, png, bmp, pdf, il, psd
	);
	foreach($_FILES as $key => $file) {
	$file_ext = basename($_FILES['uploaded_file']['name']); 
	$ext = substr($file_ext, strrpos($file_ext, '.') + 1);
	 if ((zen_not_null($_FILES[$key]['tmp_name'])) && (in_array($ext, $acceptable_extensions))
	 		&& $_FILES[$key]['tmp_name'] != 'none') {
		  if ($_FILES[$key]['size'] <= MAX_FILE_UPLOAD_SIZE) {
				  if ($upload = new upload($key, DIR_FS_UPLOADS)) {
				$att_array[] = array('file' => $upload->destination . $upload->filename, 'name' => $upload->filename);
			}
			} else {
			$Max_Size_Exceeded = $_FILES['uploaded_file']['name']." exceeds maximum file size of ".((MAX_FILE_UPLOAD_SIZE/1024)/1000)."MB. ";
				  $messageStack->add('image_to_contact', $Max_Size_Exceeded.FILE_SIZE_CHECK_ERROR);
				return false;
		  }//EOF Filesize check
	  }else{
		if ( zen_not_null($_FILES[$key]['tmp_name']) && ($_FILES[$key]['tmp_name'] != 'none') ) {
		$Unacceptable_Extension_Submitted = $_FILES['uploaded_file']['name']." contains the unnacceptable extension $ext.
		Please submit a version with one of the following extensions: ".implode(", ", $acceptable_extensions);
			  $messageStack->add('image_to_contact', $Unacceptable_Extension_Submitted.FILE_EXTENSION_SUBMISSION_ERROR);
			return false;
		}//EOF if acceptable extension
	  }
	}

Thanks a bunch.

Mike

20 Jun 2014, 5:26 AM
#35
dw08gm avatar

dw08gm

Totally Zenned

Join Date:
Sep 2008
Location:
DownUnder, overlooking South Pole.
Posts:
1,017
Plugin Contributions:
2

Re: Adding Multiple Images to Custom form To be sent to Admin Email

mutinyzoo:

I actually think that 2040kb translates to a tiny bit smaller than 2mb at least in UNIX terms. https://wiki.ubuntu.com/UnitsPolicy. Is used this converter.

Forgot about the conversion factor (2040 <2048). But then whatever I did seemed to work.

Nevertheless LadyBugMom provided a complete set of working files for file uploads. The only question I have is whether this file set is compatible with latter upgrades of php, mysql etc. This is not something that I have looked into.

cheers

29 Jan 2015, 5:59 PM
#36
digitalshadow avatar

digitalshadow

Totally Zenned

Join Date:
Mar 2009
Posts:
616
Plugin Contributions:
0

Re: Adding Multiple Images to Custom form To be sent to Admin Email

Great work with what has been made so far, what I'm trying to do now is modify the code to enable me to append something to the uploaded file name.

as the upload form uses classes/uploads.php I don't think this is possible, I think I would have to upload without using the uploads.php file.

What i am working towards is merging this image upload with http://www.zen-cart.com/downloads.php?do=file&id=109

Essentially enabling customers to ask a question on their order and upload an image should they want to.

The image file name could be renamed and its new numerical filename be stored in the Table: orders_status_history

Then the file could be shown as a link in the admin with his customer comment.

29 Jan 2015, 6:11 PM
#37
digitalshadow avatar

digitalshadow

Totally Zenned

Join Date:
Mar 2009
Posts:
616
Plugin Contributions:
0

Re: Adding Multiple Images to Custom form To be sent to Admin Email

As the customer is logged in to use order questions, the order number will be available

The files could be uploaded into a folder name = to the order number

But again to do that, I need to be able to modify either the filename or the upload directory.

I think to do this I need to not use classes/uploads.php

any thoughts?

29 Jan 2015, 6:25 PM
#38
drbyte avatar

drbyte

Sensei

Join Date:
Jan 2004
Posts:
63,513
Plugin Contributions:
176

Re: Adding Multiple Images to Custom form To be sent to Admin Email

Yes, you can still use the upload class, but will have to do the upload handling manually.

Instead of saying ```
$var = new upload($key, DIR_FS_UPLOADS);

Use something like this instead:```
$var = new upload; // without any parameters, it doesn't auto-upload and keep the same filename
$var->set_file = $key;
$var->set_destination=DIR_FS_UPLOADS;
if ($var->parse() == true) {
  $var->set_filename('put the filename and extension here'); // this is where you manually supply the whole filename
  $var->save();
} else {
  //die('could not manage uploads');
}
29 Jan 2015, 6:42 PM
#39
digitalshadow avatar

digitalshadow

Totally Zenned

Join Date:
Mar 2009
Posts:
616
Plugin Contributions:
0

Re: Adding Multiple Images to Custom form To be sent to Admin Email

DrByte:

$var = new upload; // without any parameters, it doesn't auto-upload and keep the same filename
$var->set_file = $key;
$var->set_destination=DIR_FS_UPLOADS;
if ($var->parse() == true) {
$var->set_filename('put the filename and extension here'); // this is where you manually supply the whole filename
$var->save();
} else {
//die('could not manage uploads');
}


I would need to use the same extension as the originally uploaded file?

to start with I'm trying to get the uploaded file name to have test placed before it.

so image.jpg would become testimage.jpg

once I have got the basics, i could try putting the $order_id instead of test...

$file_ext = basename($_FILES['uploaded_file']['name']); 
$ext = substr($file_ext, strrpos($file_ext, '.') + 1);
    $newname = 'test';
    $filename = $newname.$file_ext;

$var = new upload; // without any parameters, it doesn't auto-upload and keep the same filename
$var->set_file = $key;
$var->set_destination=DIR_FS_UPLOADS;
if ($var->parse() == true) {
$var->set_filename('$filename'); // this is where you manually supply the whole filename
$var->save();
} else {
//die('could not manage uploads');
}

29 Jan 2015, 6:48 PM
#40
drbyte avatar

drbyte

Sensei

Join Date:
Jan 2004
Posts:
63,513
Plugin Contributions:
176

Re: Adding Multiple Images to Custom form To be sent to Admin Email

For starters,

$var->set_filename([B]'[/B]$filename[B]'[/B]); 
```should be ```
$var->set_filename($filename);