I am developing a cultural web portal where users, after registering, will be able to add an article via a dedicated form.
As happens in most cultural web portals and also on social media, articles will be accompanied by a cover image that will anticipate the topic, a title and a description, as well as other fields that are not relevant here.
The CMS I have developed for the management (insertion, updating, removal) of articles has been designed for the total management in PHP of the data sent by forms. No forms are or will be loaded via JS/Ajax.
The form for saving articles will contain both mandatory and optional fields. If a mandatory field (e.g. title or text) is not filled in, the PHP script will redirect to the form, displaying the information previously entered in the fields that were filled in, to ease the user by relieving them of the task of having to re-enter all the fields again.
This choice does not create any problems for text, select and textarea type fields. It does, however, create a problem for the file type field dedicated to loading the cover image, since for security reasons it is impossible to save the local path to the image in order to retrieve it in the form and display it in the file type field.
In the form, as can be seen in the snippet below, after choosing the image it will be displayed as a preview, so that the user can check that he has chosen the correct image for his article.
Is there a way or an alternative to be able to pre-fill the file field in order to relieve the user of the task of having to choose the image again? Because the save script will retrieve all the fields via $_POST and the image via $_FILES.
I want to absolutely avoid encoding the image in base64 because some of the images that will be loaded will exceed 1280px in width and the save operation, having to transmit all the base64 encoding, would slow down a lot. Test already carried out.
HTML (fields not pre-filled)
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form</title>
<script src="js/jquery.js"></script>
<script>
$(function () {
$('input:file').on('change', function () {
var reader = new FileReader();
reader.onload = function () {
$('.row').find('.preview').attr('src', reader.result);
}
reader.readAsDataURL(this.files[0]);
});
});
</script>
<style>
form {
width: 500px;
margin: auto;
}
.row {
padding: 10px 0;
}
.row label {
display: block;
}
.row .preview {
display: block;
margin: 20px 0;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<form method="post" action="save.php" enctype="multipart/form-data">
<fieldset>
<div class="row">
<label for="image">Image</label>
<input type="file" name="image" id="image">
<img src="" alt="" class="preview">
</div>
<div class="row">
<label for="title">Title</label>
<input type="text" name="title" id="title">
</div>
<div class="row">
<label for="text">Text</label>
<textarea name="text" id="text" cols="30" rows="10"></textarea>
</div>
</fieldset>
<input type="submit" name="submit" value="Submit">
</form>
</body>
</html>
HTML (pre-filled fields)
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form</title>
<script src="js/jquery.js"></script>
<script>
$(function () {
$('input:file').on('change', function () {
var reader = new FileReader();
reader.onload = function () {
$('.row').find('.preview').attr('src', reader.result);
}
reader.readAsDataURL(this.files[0]);
});
});
</script>
<style>
form {
width: 500px;
margin: auto;
}
.row {
padding: 10px 0;
}
.row label {
display: block;
}
.row .preview {
display: block;
margin: 20px 0;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<form method="post" action="save.php" enctype="multipart/form-data">
<fieldset>
<div class="row">
<label for="image">Image</label>
<input type="file" name="image" id="image">
<img src="" alt="" class="preview">
</div>
<div class="row">
<label for="title">Title</label>
<input type="text" name="title" id="title" value="<?php echo $_SESSION['title'] ?>">
</div>
<div class="row">
<label for="text">Text</label>
<textarea name="text" id="text" cols="30" rows="10"><?php echo $_SESSION['text'] ?></textarea>
</div>
</fieldset>
<input type="submit" name="submit" value="Submit">
</form>
</body>
</html>
Screenshot (fields not pre-filled, image chosen)
Screenshot (fields pre-filled, image to be chosen again)
