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
so change it for:
Hide the file type with CSS and make the cursor as pointer over the label area.
and since the file name does not appear anymore, a little JS to display it in the "file-upload-filename" DIV:
et voilà...
Demo > https://motogpdrawings.com/devis/
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/