Nicorama Site

L' API imgbb

Minimaliste

Ce code trouvé à Stack Overflow, est bon mais il affiche un bouton à cliquer pas très original. Il faudrait y ajouter du style CSS

Le formulaire n' est pas fonctionnel car j' ai désactivé le javascript

Mon choix final

S' est porté sur l' excellent code en pur Javascript de Supun Kavinda qui permet aux utilisateurs de transférer une image sur votre compte imgbb par glisser-déposer ou avec un simple clic dans la zone d' envoi. J' y ai ajouté une icône pour faire plus sexy.
Supun Kavinda sur Fiddle

L' application est fonctionnelle. Voir ensuite le résultat à "Images reçues" ci-dessous.

  Images reçues

Attention .

Les images envoyées étant visibles par toutes et tous, surveillez bien qu'il ne s' agit pas d' images inappropriées.
Les images test envoyées par ce formulaire ne seront conservées que trois jours.
Vous pouvez aussi utiliser le formulaire autonome aller ici

Javascript

<script>
var
 // where files are dropped + file selector is opened
	dropRegion = document.getElementById("drop-region"),
	// where images are previewed
	imagePreviewRegion = document.getElementById("image-preview");


// open file selector when clicked on the drop region
var fakeInput = document.createElement("input");
fakeInput.type = "file";
fakeInput.accept = "image/*";
fakeInput.multiple = true;
dropRegion.addEventListener('click', function() {
	fakeInput.click();
});

fakeInput.addEventListener("change", function() {
	var files = fakeInput.files;
	handleFiles(files);
});


function preventDefault(e) {
	e.preventDefault();
  	e.stopPropagation();
}

dropRegion.addEventListener('dragenter', preventDefault, false)
dropRegion.addEventListener('dragleave', preventDefault, false)
dropRegion.addEventListener('dragover', preventDefault, false)
dropRegion.addEventListener('drop', preventDefault, false)


function handleDrop(e) {
	var dt = e.dataTransfer,
		files = dt.files;

	if (files.length) {

		handleFiles(files);
		
	} else {

		// check for img

		var html = dt.getData('text/html'),

	        match = html && /\bsrc="?([^"\s]+)"?\s*/.exec(html),
	        url = match && match[1];




	    if (url) {
	        uploadImageFromURL(url);
	        return;
	    }

	}


	function uploadImageFromURL(url) {
		var img = new Image;
        var c = document.createElement("canvas");
        var ctx = c.getContext("2d");

        img.onload = function() {
            c.width = this.naturalWidth;     // update canvas size to match image
            c.height = this.naturalHeight;
            ctx.drawImage(this, 0, 0);       // draw in image
            c.toBlob(function(blob) {        // get content as PNG blob

            	// call our main function
                handleFiles( [blob] );

            }, "image/png");
        };


        img.onerror = function() {
            alert("Error in uploading");
        }
        img.crossOrigin = "";              // if from different origin
        img.src = url;
	}

}

dropRegion.addEventListener('drop', handleDrop, false);



function handleFiles(files) {
	for (var i = 0, len = files.length; i < len; i++) {
		if (validateImage(files[i]))
			previewAnduploadImage(files[i]);
	}
}

function validateImage(image) {
	// check the type
	var validTypes = ['image/jpeg', 'image/png', 'image/gif'];
	if (validTypes.indexOf( image.type ) === -1) {
		alert("Invalid File Type");

		return false;
	}

	// check the size
	var maxSizeInBytes = 10e6; // 10MB
	if (image.size > maxSizeInBytes) {
		alert("File too large");
		return false;
	}


	return true;


}

function previewAnduploadImage(image) {

	// container
	var imgView = document.createElement("div");
	imgView.className = "image-view";



	imagePreviewRegion.appendChild(imgView);

	// previewing image
	var img = document.createElement("img");
	imgView.appendChild(img);

	// progress overlay
	var overlay = document.createElement("div");
	overlay.className = "overlay";
	imgView.appendChild(overlay);


	// read the image...
	var reader = new FileReader();
	reader.onload = function(e) {
		img.src = e.target.result;
	}
	reader.readAsDataURL(image);

	// create FormData
	var formData = new FormData();
	formData.append('image', image);

	// upload the image
	var uploadLocation = 'https://api.imgbb.com/1/upload';
	formData.append('key', 'entrez ici votre clé API');

	var ajax = new XMLHttpRequest();
	ajax.open("POST", uploadLocation, true);

	ajax.onreadystatechange = function(e) {
		if (ajax.readyState === 4) {
			if (ajax.status === 200) {
				// done!
			} else {
				// error!
			}
		}
	}

	ajax.upload.onprogress = function(e) {

		// change progress

		// (reduce the width of overlay)

		var perc = (e.loaded / e.total * 100) || 100,
			width = 100 - perc;

		overlay.style.width = width;
	}

	ajax.send(formData);

}
</script>

Créer un formulaire autonome

Ci-dessous vous trouverez deux liens DEMO et ZIP

• À DEMO le ien vous amène vers une page entière dédié au formulaire fonctionnant aussi sur des appareils mobiles.
  Si ce modèle vous plait vous pouvez télécharger la page. Mais ensuite, n' oubliez pas d' entrer votre clé personnelle dans la partie javascript.
  À "Partage d' images", changer l' url de mon compte IMGBB par l' url de votre compte IMGBB.
• À ZIP, après décompression vous trouverez séparément les 3 fichiers HTML, javascript et CSS.

À "Votre avis m' intéresse" je répondrais à toutes vos questions.

Vous pouvez tester ce formulaire DEMO qui est totalement fonctionnel.

Pour ceux qui veulent coder, je mets à leur disposition un ZIP. Ils pourront ainsi changer la couleur, le texte et la disposition du formulaire en modifiant les pages HTML et CSS.

DEMO ZIP

Commentaires (4)

Sam Haïti

Commentaire : C' est fantastique

Perle

Merci pour les explications pour créer un formulaire.
Je suis débutante et vos explications sont nettes et précises.
Une question, comment ajouter une ligne pour que la personne qui remplit le formulaire, puisse joindre une image style une bannière dans son message.
Merci à vous.

webmaster

Commentaire : Vous trouverez un début de réponse dans cette page j' espère.

webmaster

Commentaire : Indiquez moi les 32 caractères alphanumériques de votre clé d' API et l' url de votre compte ImgBB. Je vous créerai un formulaire non pas en mode démonstration comme Claudie mais en mode autonome hébergé sur mon site vers lequel vous n' aurez plus qu' à faire un lien depuis votre site. Cette offre est gratuite, n' hésitez pas à me contacter.