Discussion :

[User Name]

Bonjour à tous,

Je suis en train de modifier un formulaire envoyé par mail sur un site que j'ai mis en place, de sorte à pouvoir permettre aux utilisateurs d'envoyer une pièce jointe.

J'ai donc suivi notamment ce tuto et celui-ci côté serveur et modifié mon code comme suit :

index.html (côté client)

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<div class="ewf-span9">
   <form name="contactForm" id='contact_form' method="post" action='contact_mail.php' enctype="multipart/form-data">
      <div class="ewf-row">
         <div class="ewf-span6">
            <div id='name_error' class='error'>Please enter your name.</div>
            <div>
               <input type='text' name='name' id='name' class="form-control" placeholder="Your Name">
            </div>
         </div>
         <div class="ewf-span6">
            <div id='email_error' class='error'>Please enter a valid E-mail address.</div>
            <div>
               <input type='text' name='email' id='email' class="form-control" placeholder="Your Email">
            </div>
         </div>
      </div>
      <div id='subject_error' class='error'>Please enter the subject.</div>
      <div>
         <input type='text' name='subject' id='subject' class="form-control" placeholder="Subject">
      </div>
      <div id='message_error' class='error'>Please enter your message.</div>
      <div>
         <textarea name='message' id='message' class="form-control" placeholder="Your Message"></textarea>
      </div>
      <div id='mail_success' class='success'>Thank you. Your message has been sent successfully.</div>
      <div id='mail_fail' class='error'>Sorry, an error occured while attempting to send your message.<br>Please double check you entered a valid e-mail address.</div>
      <div id='recaptcha_fail' class='error'>Sorry, the reCaptcha validation seems to have failed.</div>
      <!-- Upload files control -->
      <div>
         <input type='file' name='attachmentFile' id='attachmentFile' class="form-control">
      </div>
      <p id='submit'>
         <!-- Submit button -->
         <input type='submit' id='send_message' value='Send Me a Message' class="button red" form="contact_form">
      </p>
   </form>
</div>

- Supprimé le recaptcha à des fins d'analyse pour l'instant
- Rajouté l'enctype "multiform/form-data" sur un conseil vu sur Stack Overflow (pour obtenir le même résultat)

- J'ai essayé une seconde version en mettant action='' et en mettant ceci plus bas dans le code :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script>
   $(document).ready(function (e){
   $("#contact_form").on('submit',(function(e){
   	e.preventDefault();
   	$('#loader-icon').show();
   	var valid;	
   	valid = validateContact();
   	if(valid) {
   		$.ajax({
   		url: "contact_mail.php",
   		type: "POST",
   		data:  new FormData(this),
   		contentType: false,
   		cache: false,
   		processData:false,
   		success: function(data){
   		$("#mail-status").html(data);
   		$('#loader-icon').hide();
   		},
   		error: function(){alert("A quite unexpected error occured.");} 	        
 
   		});
   	}
   }))});
</script>

(Au passage, j'ai dû corriger une fin de fichier (ligne 24) par rapport au tuto du site, pour corriger une erreur de jeton inattendu).
Cette seconde version a donné exactement le même résultat, décrit ci-dessous.

contact_mail.php (côté serveur)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$mail = new PHPMailer();
$mail->IsSMTP();
$mail->SMTPDebug = 0;
$mail->SMTPAuth = TRUE;
$mail->SMTPSecure = "tls";
$mail->Port     = 587; //Essayé aussi 465, aucune différence 
$mail->Username = "xxx@gmail.com";
$mail->Password = "xxx";
$mail->Host     = "smtp.gmail.com";
$mail->Mailer   = "smtp";
$mail->SetFrom($_POST["email"], $_POST["name"]);
$mail->AddReplyTo($_POST["email"], $_POST["name"]);
$mail->AddAddress("adresse@destinataire.xxx");    
$mail->Subject = ("[MyResume] ".$_POST["subject"]);
$mail->WordWrap   = 80;
$mail->MsgHTML($_POST["message"]);
 
 if(is_array($_FILES)) {
     $mail->AddAttachment($_FILES['attachmentFile']['tmp_name'],$_FILES['attachmentFile']['name']); 
 }
 
$mail->IsHTML(true);
if(!$mail->Send()) {
    echo "sent";
} else {
    echo "failed";
}

Dans le code ci-dessus, la ligne 19 est incriminée. Dans le log PHP, ça donne ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
[01-Jun-2019 05:56:31 UTC] PHP Notice:  Undefined index: attachmentFile in C:\wamp\www\contact_mail.php on line 5464
[01-Jun-2019 05:56:31 UTC] PHP Stack trace:
[01-Jun-2019 05:56:31 UTC] PHP   1. {main}() C:\wamp\www\contact_mail.php:0

Je précise que j'ai dû inclure les classes SMTP et PHPMailer directement dans le fichier contact_mail.php, au moins temporairement, pour contourner des problèmes d'import.

L'erreur PHP que j'obtiens ci-dessus est en local sur WAMP. Ma version PHP est 7.2.14 et ma version jQuery 2.1.1 (un peu obsolète car je travaille sur une maquette un peu ancienne que la nouvelle version fout complètement en l'air).

J'ai aussi essayé le formulaire directement sur mon hébergement mutualisé chez 1and1, et le résultat est que lorsque je soumets le formulaire, le bouton reste coincé à "Sending...", rien ne se passe, et le log PHP que j'ai mis en place sur 1and1 grâce à ce tuto et celui-ci reste vierge.

J'ai épluché plein de tutos qui parlent de cette erreur sur le web, mais aucune solution ne m'a convenu.
Pouvez-vous m'aider SVP ?

Merci d'avance.

[ThomasR]

Bonjour,
Ton attribut enctype est incorrect, c'est multipart/form-data et non multiform/form-data.

[User Name]

Salut,

Merci pour ta réponse, mais dans le code, c'était déjà le cas.
C'est juste dans le texte de mon message que je l'ai mal retranscris.

Je ne sais pas si ça peut apporter quoi que ce soit de plus à l'analyse, mais en essayant mon code sur 1and1 même SANS le champ du fichier, ça coince sur "Sending..." quand même en utilisant PHPMailer, tandis qu'en n'utilisant que mail(); ça fonctionne parfaitement.

[ThomasR]

Bonjour,

OK. En fait, ton souci vient du fait qu'un fichier (input type="file") ne peut pas transiter par AJAX.
Il va te falloir faire autrement. Ce que tu peux faire, avant ton $.ajax, c'est de récupérer le contenu de l'input avec FileReader.readAsDataURl (comme https://developer.mozilla.org/fr/doc.../readAsDataURL), et tu envoies cette chaine de caractère (le fichier encodé en base64) via AJAX.

[User Name]

Bonjour,

Merci pour ta réponse.
Pour le moment, j'ai viré ce code et suis parti dans une autre direction, mais si j'aurai peut-être l'occasion d'y revenir dans quelques jours, dans quel cas je te tiendrai au courant sur si ta solution fonctionne.

Merci !

[User Name]

Bonjour ThomasR,

Finalement, je suis passé de PHPMail à SwiftMailer que je trouve plus simple et mieux documenté.
En me basant sur cet article pour implémenter d'abord un FileReader, sans succès à cause de l'explication incomplète du code pour moi, je suis passé à une FormData. Voici mon nouveau code:

SwiftSendMail.php (qui remplace email.php)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 
<?php 
require_once("vendor/autoload.php"); 
 
//Message preparation
$subject = '[MyResume] ' . $_REQUEST['subject']; // Subject of your email
$to = 'xxx@xxx.xxx';  //Recipient's E-mail
 
$headers  = 'My-Resume: 1.0' . "\r\n";
$headers .= "From: " . $_REQUEST['email'] . "\r\n"; // Sender's E-mail
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
 
$message = '<b>Name:</b> ' . $_REQUEST['name'] . "<br>";
$message .= '<b>Message:</b> ' . $_REQUEST['message'] . "<br>";
 
$attachment = $_REQUEST['fileupload'];
 
// Create the Transport
$transport = (new Swift_SmtpTransport('smtp.gmail.com', 587, 'tls'))
  ->setUsername('xxx@xxx.xxx')
  ->setPassword('xxx')
;
 
// Create the Mailer using your created Transport
$mailer = new Swift_Mailer($transport);
 
// Create a message
$message = (new Swift_Message($subject))
  ->setFrom([$_REQUEST['email'] => $_REQUEST['name']])
  ->setTo(['xxx@xxx.xxx' => 'John Doe'])
  ->setBody($message, 'text/html')
  ->setCharset('UTF-8')
  ;
 
//Enclose attachment
$message->attach(
	Swift_Attachment::fromPath($_FILES['fileupload']['tmp_name'])->setFilename($_FILES['fileupload']['name'])
	);
 
// Send the message
$result = $mailer->send($message);
 
// Echo the result
if ($result>0) {
	echo 'sent';
}else{
	echo 'failed';
}

validation.js (le JS qui sert à valider mes données côté client)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
//[...]     
            // If there is no validation error, next to process the mail function
            if(error == false){
                // Disable submit button just after the form processed 1st time successfully.
                 $('#send_message').attr({'disabled' : 'true', 'value' : 'Sending...' });
 
				//Send data to server using FileReader
				//TODO: Handle reCaptcha
				var $data = new FormData();
				$data.append('name', $name);
				$data.append('email', $email);
				$data.append('subject', $subject);
				$data.append('message', $message);
				$data.append('fileupload', $("#fileupload")[0].files[0]);
 
				// processData & contentType should be set to false
				$.ajax({
					type: 'POST',
					url: '/SwiftMailer/SwiftSendMail.php',
					data: $data,
					success: function(response) {
						if(response == 'sent'){
                        //If the email is sent successfully, remove the submit button
                        $('#submit').remove();
						//Hide error message if it exists
						$('#mail_fail').fadeOut(500);
                        //Display the success message
                        $('#mail_success').fadeIn(500);
						}else{
							if(response == 'recaptcha_issue')
							{
								//Display the error message
								$('#recaptcha_fail').fadeIn(500);
								//Enable the submit button again
								$('#send_message').removeAttr('disabled').attr('value', 'Send The Message');
							}else{
								//Display the error message
								$('#mail_fail').fadeIn(500);
								//Enable the submit button again
								$('#send_message').removeAttr('disabled').attr('value', 'Send The Message');
								//grecaptcha.reset();
							}
						},
					error: function(response) {
						print_r(response);
					},
					processData: false,
					contentType: false
				});
//[...]

Le résultat est le même dans le log:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
[07-Jun-2019 12:33:26 UTC] PHP Notice:  Undefined index: fileupload in C:\wamp\www\SwiftMailer\SwiftSendMail.php on line 15
[07-Jun-2019 12:33:26 UTC] PHP Stack trace:
[07-Jun-2019 12:33:26 UTC] PHP   1. {main}() C:\wamp\www\SwiftMailer\SwiftSendMail.php:0
[07-Jun-2019 12:33:26 UTC] PHP Notice:  Undefined index: fileupload in C:\wamp\www\SwiftMailer\SwiftSendMail.php on line 36
[07-Jun-2019 12:33:26 UTC] PHP Stack trace:
[07-Jun-2019 12:33:26 UTC] PHP   1. {main}() C:\wamp\www\SwiftMailer\SwiftSendMail.php:0
[07-Jun-2019 12:33:26 UTC] PHP Fatal error:  Uncaught Swift_IoException: The path cannot be empty in C:\wamp\www\SwiftMailer\vendor\swiftmailer\swiftmailer\lib\classes\Swift\ByteStream\FileByteStream.php:45
Stack trace:
#0 C:\wamp\www\SwiftMailer\vendor\swiftmailer\swiftmailer\lib\classes\Swift\Attachment.php(50): Swift_ByteStream_FileByteStream->__construct(NULL)
#1 C:\wamp\www\SwiftMailer\SwiftSendMail.php(36): Swift_Attachment::fromPath(NULL)
#2 {main}
  thrown in C:\wamp\www\SwiftMailer\vendor\swiftmailer\swiftmailer\lib\classes\Swift\ByteStream\FileByteStream.php on line 45

Pour l'instant, j'ai désactivé le reCaptcha.
Est-ce normal ? Si oui, pourquoi ?

Merci pour ton aide.