Écrire des données sur un serveur

Cliquez dans l'image ou appuyez sur le bouton pour charger un fichier à partir de votre espace disque.

Sélectionnez un fichier JPG, PNG, GIF ou SVG. NOTE : La taille maximum du fichier est configurée à 1 Mo et la largeur maximum de l'affichage à 320 px.

Ouvrez un dossier contenant des images avec l'explorateur de votre système de fichiers. Faites glisser et déposer un fichier JPG, PNG, GIF ou SVG sur l'image.

Éditez la largeur ou la hauteur de l'image.

Essayez les boutons Défaire et Refaire.

Rechargez la page. Les modifications sont enregistrées.

Pour le code de l'éditeur, consultez les pages du manuel ImageSizeInspector et Editor et l'article Architecture d'un éditeur.

Cliquez sur le bouton pour télécharger l'image avec ses dimensions sur le serveur.

Le fichier est transféré par blocs de 100 ko. La progression est affichée par un pourcentage. Quand le transfert est terminé, une coche est affichée à côté du bouton. Une erreur est signalée par un point d'exclamation en rouge.

Code

L'image est copiée dans l'espace disque du serveur en réponse à un POST par une fonction qui en extrait le type MIME et la taille du fichier, la largeur et la hauteur de l'image, le bloc de données qui est transféré, sa taille et sa position dans le fichier. Un bloc de données est encodé en BASE64.

uploadimage.php

Dans iZend, le fichier uploadimage.php s'installe directement dans le dossier actions. Pour activer l'URL /uploadimage dans un site web, une entrée est ajoutée dans le fichier aliases.inc à la liste des URLs communes à toutes les langues.

$aliases = array(
array(
'captcha' => 'captcha',

...

'uploadimage' => 'uploadimage',
),
'en' => array(

...

),
);

Adaptez l'installation de cette fonction à votre environnement de développement.

define('TMP_DIR', ROOT_DIR . DIRECTORY_SEPARATOR . 'tmp');
define('IMAGE_MAX_SIZE', 1000000);

Définit TMP_DIR - le dossier dans lequel le fichier de l'image est sauvegardé - au nom du sous-dossier tmp dans le dossier racine du site et IMAGE_MAX_SIZE - la taille maximum d'un image - à 1 Mo.

function uploadimage($lang, $arglist=false) {

Définit la fonction uploadimage qui est appelée par l'URL /uploadimage du site. Les arguments $lang - la langue du contenu, qui sera toujours false - et $arglist - les paramètres passés dans l'URL - ne sont pas utilisés.

$maxfilesize=IMAGE_MAX_SIZE;
$filetypes=array('image/jpeg', 'image/png', 'image/gif', 'image/svg+xml');

Initialise $maxfilesize à IMAGE_MAX_SIZE et $filetypes à la liste de types MIME supportés.

$type=$data=false;
$size=$offset=0;
$width=$height=0;

Initialise les variables des arguments du POST.

if (isset($_POST['file_size'])) {
$size=$_POST['file_size'];
}
if (isset($_POST['file_type'])) {
$type=$_POST['file_type'];
}
if (isset($_POST['file_offset'])) {
$offset=$_POST['file_offset'];
}
if (isset($_POST['file_data'])) {
$data=base64_decode($_POST['file_data'], true);
}
if (isset($_POST['image_width'])) {
$width=$_POST['image_width'];
}
if (isset($_POST['image_height'])) {
$height=$_POST['image_height'];
}

Extrait les arguments du POST. Le bloc de données encodé en BASE64 est décodé.

if (($width = filter_var($width, FILTER_VALIDATE_INT, array('options' => array('min_range' => 0)))) === false)
goto badrequest;
if (($height = filter_var($height, FILTER_VALIDATE_INT, array('options' => array('min_range' => 0)))) === false)
goto badrequest;
if (($offset = filter_var($offset, FILTER_VALIDATE_INT, array('options' => array('min_range' => 0)))) === false)
goto badrequest;
if (($size = filter_var($size, FILTER_VALIDATE_INT, array('options' => array('min_range' => 0, 'max_range' => $maxfilesize)))) === false)
goto badrequest;
if (!$type or !in_array($type, $filetypes)) {
goto badrequest;
}

Vérifie les arguments du POST.

if (!$data) {
goto badrequest;
}
$datasize=strlen($data);
if ($offset + $datasize > $size) {
goto badrequest;
}

Vérifie la taille des données envoyées dans le POST.

goto trashfile;

Sur ce serveur, l'écriture du fichier est simulée. Pour vérifier que l'image a bien été copiée en l'affichant, commentez cette instruction et adaptez le reste du code pour enregistrer le fichier dans un dossier accessible en écriture par le serveur.

$name='image';
switch ($type) {
case 'image/jpeg':
$fname = $name . '.jpg';
break;
case 'image/png':
$fname = $name . '.png';
break;
case 'image/gif':
$fname = $name . '.gif';
break;
case 'image/svg+xml':
$fname = $name . '.svg';
break;
default:
goto badrequest;
}
$file = TMP_DIR . DIRECTORY_SEPARATOR . $fname;

Définit le nom du fichier de l'image. L'extension du nom du fichier dépend du type MIME de l'image.

$fout = @fopen($file, $offset == 0 ? 'wb' : 'cb');
if ($fout === false) {
goto internalerror;
}

Ouvre le fichier de l'image en mode binaire. Si le POST contient le premier bloc de données, le fichier est créé.

$r = fseek($fout, $offset);
if ($r == -1) {
goto internalerror;
}

Déplace le pointeur du fichier à la position du bloc de données.

$r = fwrite($fout, $data);
if ($r === false) {
goto internalerror;
}

Écrit le bloc de données.

if ($offset + $datasize < $size) {
return false;
}

Retourne un simple entête 200 Ok si plus de blocs de données sont attendus.

$file = TMP_DIR . DIRECTORY_SEPARATOR . $name . '.json';
$data = array('width' => $width, 'height' => $height, 'name' => $fname);
$r = @file_put_contents($file, json_encode($data));
if ($r === false) {
goto internalerror;
}
return false;

Si toutes les données de l'image ont été sauvegardées, crée un fichier image.json indiquant la largeur et la hauteur de l'image et le nom du fichier. Retourne un simple entête 200 Ok.

trashfile:
return false;

Retourne un simple entête 200 Ok sans enregistrer les données.

badrequest:
header('HTTP/1.1 400 Bad Request');
return false;

Retourne un simple entête 400 Bad Request si un des éléments du POST est invalide.

internalerror:
header('HTTP/1.1 500 Internal Error');
return false;
}

Retourne un simple entête 500 Internal Error si l'image n'a pas pu être correctement sauvegardée.

testImageLoader.phtml

<?php $debug=false; ?>

Mettre $debug à true permet d'accéder dans la console du navigateur à tous les composants de l'interface. Si $debug vaut false, tout le code en JavaScript est protégé par une fonction de fermeture.

<?php $filetypes=array('image/jpeg', 'image/png', 'image/gif', 'image/svg+xml'); ?>
<?php $maxsize=1000000; ?>
<?php $imgname='image'; ?>
<?php $imgsrc='/files/images/loadimage.png'; ?>
<?php $imgwidth=320; ?>
<?php $imgheight=180; ?>
<?php $uploadurl='/uploadimage'; ?>
<?php $chunksize=100000; ?>

Définit les types MIME supportés par l'éditeur, la taille maximum d'une image, le nom de l'item de stockage dans le navigateur, l'URL de l'image initiale, la largeur et la hauteur de l'affichage de l'image, l'URL de la fonction de sauvegarde du serveur, la taille des blocs de données envoyés au serveur.

<?php $id=uniqid('id'); ?>

Définit l'identifiant de la <div> qui encadre l'affichage de l'éditeur.

#<?php echo $id; ?> .ojs img {
max-width: <?php echo $imgwidth; ?>px;
}
#<?php echo $id; ?> #uploadstatus {
font-size: smaller;
}

Configure la largeur de l'affichage de l'image. Montre la progression d'un transfert dans une fonte plus petite.

<div id="<?php echo $id; ?>" class="noprint">
<div class="ojs">
<div>
<div class="ojs_undo">
<button type="submit" class="ojs_button narrow control_undo" disabled><i class="fas fa-undo"></i></button>
<button type="submit" class="ojs_button narrow control_redo" disabled><i class="fas fa-redo"></i></button>
</div>
<span class="ojs_dimension">
<input class="ojs_width" type="number" min="0"/> <i class="fas fa-arrows-alt-h small"></i>
<input class="ojs_height" type="number" min="0"/> <i class="fas fa-arrows-alt-v small"></i>
</span>
</div>
<div><img src="<?php echo $imgsrc; ?>" alt="" width="<?php echo $imgwidth; ?>" height="<?php echo $imgheight; ?>"/></div>
<div>
<span><button id="loadimage" type="submit" class="ojs_button narrow"><i class="fas fa-file-image"></i></button></span>
<span><button id="uploadimage" type="submit" class="ojs_button narrow"><i class="fas fa-file-export"></i></button></span>
<span id="uploadstatus"></span>
</div>
</div>
</div>

Crée les widgets pour les instances de UndoPanel et de ImageSizeInspector, le conteneur de l'image et les boutons pour charger un fichier local et le télécharger sur le serveur.

<?php head('javascript', '/objectivejs/Objective.js'); ?>
<?php head('javascript', '/objectivejs/Responder.js'); ?>
<?php head('javascript', '/objectivejs/View.js'); ?>
<?php head('javascript', '/objectivejs/Model.js'); ?>
<?php head('javascript', '/objectivejs/Validator.js'); ?>
<?php head('javascript', '/objectivejs/Editor.js'); ?>
<?php head('javascript', '/objectivejs/Inspector.js'); ?>
<?php head('javascript', '/objectivejs/NumberInspector.js'); ?>
<?php head('javascript', '/objectivejs/DimensionInspector.js'); ?>
<?php head('javascript', '/objectivejs/ImageInspector.js') ?>
<?php head('javascript', '/objectivejs/SequenceInspector.js') ?>
<?php head('javascript', '/objectivejs/ImageSizeInspector.js') ?>
<?php head('javascript', '/objectivejs/ImageModel.js'); ?>
<?php head('javascript', '/objectivejs/Undo.js'); ?>
<?php head('javascript', '/objectivejs/Panel.js'); ?>
<?php head('javascript', '/objectivejs/UndoPanel.js'); ?>
<?php head('javascript', '/objectivejs/ModelStorageDelegate.js'); ?>

Inclut le code de toutes les classes nécessaires. RAPPEL : La fonction head de la librairie iZend ajoute une balise telle que <script src="/objectivejs/Objective.js"></script> à la section <head> du document HTML. Adaptez le code à votre environnement de développement.

function ImageLoader(model, inspectors, panel, upload, status) {
Editor.call(this, model, null, inspectors, panel);
if (upload)
upload.onclick = () => this.upload();
this._upload = upload;
this._status = status;
}
ImageLoader.prototype = Object.create(Editor.prototype);
Object.defineProperty(ImageLoader.prototype, 'constructor', { value: ImageLoader, enumerable: false, writable: true });
ImageLoader.uploadURL = '/uploadimage';
ImageLoader.chunkSize = 100000;
ImageLoader.prototype.upload = function() {
const {image} = this._model.get();
if (image.image === null)
return;
const [url] = image.image;
const [width, height] = image.size;
const imgtype = /^data:(image\/[-.+0-9a-zA-Z]+);base64,/.exec(url)[1];
const imgdata = atob(url.substring(url.indexOf(',')+1));
const imgsize = imgdata.length;
const uploadurl = ImageLoader.uploadURL;
const chunksize = ImageLoader.chunkSize;
let offset = 0;
let progress = 0;
const uploadslice = () => {
if (this._status && imgsize > chunksize)
this._status.innerText = `${progress}%`;
const data = imgdata.substring(offset, offset + chunksize);
$.post(uploadurl, {file_size: imgsize, file_type: imgtype, file_offset: offset, file_data: btoa(data), image_width: width, image_height: height })
.done(() => {
offset += data.length;
progress = Math.floor((offset / imgsize) * 100);
if (progress < 100)
uploadslice();
else {
if (this._status)
this._status.innerHTML = '<i class="fas fa-check-circle"></i>';
if (this._upload)
this._upload.disabled = false;
}
})
.fail(() => {
if (this._status)
this._status.innerHTML = '<i class="fas fa-exclamation-circle inerror"></i>';
if (this._upload)
this._upload.disabled = false;
});
};
if (this._status)
this._status.innerText = '';
if (this._upload && imgsize > chunksize)
this._upload.disabled = true;
uploadslice();
}

Une instance de ImageLoader est un Editor qui peut télécharger une image avec une taille sur un serveur. upload récupère les données du modèle, extrait le type de l'image et les données de l'image en BASE64, en calcule la taille, transmet au serveur toutes ces informations et les données de l'image par blocs séquentiels de 100 ko, affiche le statut de l'opération.

<?php if (!$debug): ?>
(function() {
<?php endif; ?>

Isole tout le code en JavaScript dans une fonction de fermeture si $debug vaut false.

const model = new ImageModel('<?php echo $imgname; ?>');
const container = document.querySelector('#<?php echo $id; ?>');
const panel = new UndoPanel();
panel.setManagedWidget(container.querySelector('.ojs_undo')).resetWidget();
const filetypes = [<?php echo implode(',', array_map(function($s) { return "'$s'"; }, $filetypes)); ?>];
const imageInspector = new ImageInspector(null, { filetypes: filetypes, maxsize: <?php echo $maxsize; ?> });
imageInspector.setManagedWidget(container.querySelector('img'));
const sizeInspector = new DimensionInspector(0, 0, {minWidth: 0, minHeight: 0});
sizeInspector.setManagedWidget(container.querySelector('.ojs_dimension')).resetWidget();
const imageSizeInspector = new ImageSizeInspector(imageInspector, sizeInspector);
const loadimage = container.querySelector('#loadimage');
loadimage.onclick = () => imageInspector.loadImage();
const inspectors = {
image: imageSizeInspector
};
const uploadimage = container.querySelector('#uploadimage');
const uploadstatus = container.querySelector('#uploadstatus');
const editor = new ImageLoader(model, inspectors, panel, uploadimage, uploadstatus);
model.setDelegate(new ModelStorageDelegate());
model.readIn();
model.enableSync();

Crée le modèle de données à éditer. Récupère la <div> qui encadre le HTML du programme. Crée le panneau avec les boutons pour défaire et refaire une modification, crée l'inspecteur de l'image et de sa taille, crée le bouton indépendant qui permet de charger une image, crée l'éditeur. Associe le modèle à un délégué en charge de la sauvegarde de ses données dans l'espace de stockage du navigateur. Configure le modèle avec les données déjà enregistrées. Active la sauvegarde des données du modèle dès modification.

<?php if (!$debug): ?>
})();
<?php endif; ?>

Ferme la fonction qui isole le code en JavaScript si $debug vaut false.

VOIR AUSSI

ImageModel, ModelStorageDelegate, ImageSizeInspector, Editor, Wall, Architecture d'un éditeur, Configurer des graphiques par Plotly

objectivejs.org