It's a bit tricky to change the type "file" as HTML input in the PHPMailer module for emails with attachments

Here's a simple way to replace the button with the image of your choice.

The regular statement is
Code: Select all
<cms:input type='uploadfile' name='uploaded_img' required='0' allowed_ext='jpeg,jpg,gif,png' max_size='512' />


so change it for:
Code: Select all
<label for="file" /><img src="path/to/your_image.jpg"></label>
<cms:input type='uploadfile' id="file" name='uploaded_img' required='0' allowed_ext='jpeg,jpg,gif,png' max_size='512 />
<div id="file-upload-filename"></div>


Hide the file type with CSS and make the cursor as pointer over the label area.
Code: Select all
[type="file"] {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  white-space: nowrap;
  width: 1px;
}
label {cursor:pointer}


and since the file name does not appear anymore, a little JS to display it in the "file-upload-filename" DIV:
Code: Select all
<script>
var input = document.getElementById( 'file' );
var infoArea = document.getElementById( 'file-upload-filename' );

input.addEventListener( 'change', showFileName );

function showFileName( event ) {
 
  // the change event gives us the input it occurred in
  var input = event.srcElement;
 
  // the input has an array of files in the `files` property, each one has a name that you can use. We're just using the name here.
  var fileName = input.files[0].name;
 
  // use fileName however fits your app best, i.e. add it into a div
  infoArea.textContent = 'File name: ' + fileName;
}
</script>


et voilà...

Demo > https://motogpdrawings.com/devis/

Motogp Drawings - Dessins vectoriels imprimés sur toile.png
Image sample
Motogp Drawings - Dessins vectoriels imprimés sur toile.png (243.66 KiB) Viewed 3072 times