tobias/the_works
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added file size validation

Browse Source
This commit is contained in:
eclipse 2025-08-23 12:05:54 +02:00
parent ea47355c00
commit 633d91a11d
2 changed files with 27 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
the_works/static/js/fileinput.js
View File

@ -2,28 +2,28 @@
* FILE INPUT FUNCTIONS
*/
function initFileinput(id_stub, current_stub, modal_id) {
// add input element event handler
// add "change" event listener to file input element
document.getElementById(id_stub + "-upload").addEventListener("change", handleFileinputChange);
// add event handler to modal that shows the current image if the modal was raised by an update action, and hides it otherwise
// add "toggle" event listener to modal that shows the current image if the modal was raised by an update action, and hides it otherwise
document.getElementById(modal_id).addEventListener("toggle", handleModalToggle);
}
function handleFileinputChange(event) {
let id_stub = event.target.id.split("-")[0];
let fi = event.target
let id_stub = fi.id.split("-")[0];
// mark change
document.getElementById(id_stub + "-haschanged").value += "+";
console.dir(event);
// no file chosen -> show placeholder
if ( ! event.target.files.length ) {
if ( ! fi.files.length ) {
showOrHideThumbnail(id_stub, "hide");
return true;
}
// set img src to the uploaded file
let f = event.target.files[0];
let f = fi.files[0];
let tn = document.getElementById(id_stub + "-thumbnail");
tn.src = URL.createObjectURL(f);
@ -39,7 +39,7 @@ console.dir(event);
document.getElementById(id_stub + "-hoehe").innerText = tn.naturalHeight;
// remove image object from memory
URL.revokeObjectURL(tn.src);
};
}
}
@ -90,3 +90,16 @@ function showOrHideThumbnail(id_stub, mode) {
}
}
function validate_filesize(input_id="titelbild-upload") {
let fi = document.getElementById(input_id);
console.dir(fi);
fi.setCustomValidity("");
fi.setAttribute("aria-invalid", "false");
if ( fi.files[0].size > fi.dataset.maxfilesize ) {
fi.setCustomValidity("Datei ist zu groß, bitte kleinere auswählen.");
fi.setAttribute("aria-invalid", "true");
fi.reportValidity();
}
}

13
the_works/templates/views/titelbild.html
View File

@ -58,9 +58,9 @@
</label>
<label for="titelbild-upload" role="button">Bild aussuchen</label>
<div class="thumbnail-div">
<a class="thumbnail-a display-none" id="titelbild-bild" href="" title="zum Originalbild">
<span class="display-none" id="titelbild-bild">
<img class="thumbnail-img" id="titelbild-thumbnail" alt="Thumbnail" src="" />
</a>
</span>
<div class="placeholder" id="titelbild-placeholder">
<svg viewbox="0 0 90 128">
<use href="#placeholder" />
@ -69,13 +69,14 @@
</div>
<div id="titelbild-info" class="display-none">
<small>
<span id="titelbild-dateiname"></span> Bytes<br />
<span id="titelbild-dateiname"></span><br />
<span id="titelbild-dateigroesse"></span> Bytes, <span id="titelbild-breite"></span>x<span id="titelbild-hoehe"></span> px
</small>
</div>
<div id="titelbild-controls">
<input type="file" id="titelbild-upload" name="form_Titelbild" aria-label="Titelbild" placeholder="kein Titelbild" accept="image/*"/>
<small>max. Dateigröße: 2 MB</small>
<input type="file" id="titelbild-upload" name="form_Titelbild" aria-label="Titelbild" placeholder="kein Titelbild" accept="image/*" data-maxfilesize="{{ config['MAX_CONTENT_LENGTH'] }}" required />
<small id="titelbild-toolarge" class="display-none">Datei ist zu groß!</small>
<small>max. Dateigröße: {{ config['MAX_CONTENT_LENGTH'] }} Bytes</small>
<input type="hidden" id="titelbild-haschanged" name="form_Titelbild_haschanged" value="" />
</div>
</section>
@ -96,7 +97,7 @@
</section>
<footer class="grid">
<button id="form_submit" type="submit" formmethod="post" formaction="{{ url_for('titelbild.create') }}">OK</button>
<button id="form_submit" type="submit" onclick="return validate_filesize()" formmethod="post" formaction="{{ url_for('titelbild.create') }}">OK</button>
<button class="secondary" aria-label="close" formmethod="dialog" formnovalidate>Abbrechen</button>
</footer>
</form>