I would like to use a form to send a few pictures via email. Unfortunately, this does not work as reliably as I had hoped. If I want to send a few small pictures it works but as soon as the pictures get a little bit bigger they are not noticed at all.
Here is my code
HTML:
<div class="form-check">
<div class="input-group">
<!--<input type="file" class="form-control" id="files" name="uploaded_file[]" accept="image/jpeg,image/gif,image/png,application/pdf" multiple="multiple"/>-->
<button type="button" class="btn btn-outline-send" data-bs-toggle="modal" data-bs-target="#exampleModal">
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="upload" class="svg-inline--fa fa-upload " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M296 384h-80c-13.3 0-24-10.7-24-24V192h-87.7c-17.8 0-26.7-21.5-14.1-34.1L242.3 5.7c7.5-7.5 19.8-7.5 27.3 0l152.2 152.2c12.6 12.6 3.7 34.1-14.1 34.1H320v168c0 13.3-10.7 24-24 24zm216-8v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h136v8c0 30.9 25.1 56 56 56h80c30.9 0 56-25.1 56-56v-8h136c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"></path>
</svg>
Dokumente hochladen
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Bitte wählen Sie aus, welche Dokumente Sie hochladen möchten.</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<input type="file" class="form-control" id="files" name="uploaded_file[]" accept="image/jpeg, image/jpg, image/gif, image/png, application/pdf" multiple="multiple" value=""/>
<output id="list"></output>
<div class="progress" id="progress_bar" style="display:none; ">
<div class="progress-bar" id="progress_bar_process" role="progressbar" style="width:0%; background-color: #a1131c;">0%</div>
</div>
<div id="uploaded_image" class="row mt-2">
</div>
<small>
<strong>
<br>
Hinweis: Es können <u>maximal 15</u> Dateien aufeinmal versendet werden! <br>Unterstützte Dateiformate: PDF, JPG und PNG
</strong>
</small>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-send" id="clearFiles">Inhalte löschen</button>
<button type="button" class="btn btn-outline-send" data-bs-dismiss="modal">Weiter</button>
<!--<button type="button" class="btn btn-primary">Save changes</button>-->
</div>
</div>
</div>
</div>
</div>
</div>
PHP:
$totalFiles = count($_FILES['uploaded_file']['tmp_name']);
for ($i = 0; $i < $totalFiles; $i++) {
//if (($_FILES['uploaded_file']) && $_FILES['uploaded_file']['error'] == UPLOAD_ERR_OK) {
$fileMimeType = mime_content_type($_FILES['uploaded_file']['tmp_name'][$i]);
$path = $_FILES['uploaded_file']['tmp_name'][$i];
$name = $_FILES['uploaded_file']['name'][$i];
if(in_array($fileMimeType, $imageMimeTypes)) {
$mail->addattachment($path,$name);
echo $name . ' successfull <br>';
}
}
JavaScript:
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*') && !f.type.match('pdf')) {
console.log(f.type)
continue;
}
// A flag to know if the file is an image or a PDF
let source_is_image = true;
if(!f.type.match('image.*')){
source_is_image = false;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var span = document.createElement('span');
// Based on the flag, decide to use the image or the PDF logo
var file = source_is_image ? e.target.result : "images/PDFlogo.png";//"https://upload.wikimedia.org/wikipedia/commons/8/87/PDF_file_icon.svg";
span.innerHTML = ['<img class="uploadFile" src="', file,
'" title="', escape(theFile.name), '" style=" height: 100px; max-width: 150px; border: 1px solid #000; margin: 10px 5px 0 0;"/>'
].join('');
document.getElementById('list').append(span);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
// To clear the images
document.querySelector("#clearFiles").addEventListener("click", function(){
document.querySelector("#list").innerHTML = "";
document.querySelector("#progress_bar").innerHTML = "";
document.querySelector("#uploaded_image").innerHTML = "";
});
I can not say exactly what it is and hope that I can be helped here
