j-FileUploader

jComponent 20 · jcomponent@20 component Exemple chargé avec jComponent 20

Un composant simple pour télécharger des fichiers. Il prend en charge le redimensionnement automatique des images.

IMPORTANT : dans jComponent v20, la valeur de opt.url doit être sous la forme POST /url/

Configuration :

url {String} une adresse URL par défaut pour le téléchargement

Méthodes :

fileuploader/upload(opt) affiche une boîte de dialogue de fichier
- opt.url {String} important URL où l'image sera téléchargée
- opt.callback(response, errors) {Function} un rappel important
- opt.multiple {Boolean} prend en charge plusieurs fichiers (par défaut : false)
- opt.progress(percentage) {Fonction}
- opt.accept {String} accepte le type (par défaut : */*)
- opt.prefix {String} un préfixe de nom <input name="file{0}" (par défaut : file{0})
- opt.files {FileList} en option (si vous utilisez par exemple le glisser-déposer)
- opt.data {Object} en option, données personnalisées supplémentaires key_string:value_string
- opt.width {Number} en option, largeur d'image
- opt.height {Number} en option, hauteur de l'image
- opt.background {String} en option, couleur d'arrière-plan définie en HEX ou peut être transparent
- opt.keeporiginal {Boolean} en option, empêche le double redimensionnement (par défaut : false)
- opt.onlylarger {Boolean} en option, redimensionne les images uniquement plus grandes que opt.width ou opt.height
- opt.base64 {String} facultatif, il peut contenir un format dataURI valide (obligatoire pour remplir opt.filename)
- opt.filename {String} en option, requis avec le champ opt.base64
- opt.quality {Number} en option, une qualité JPEG par défaut (par défaut : 90)
- NOUVEAU : opt.disproportionate {Boolean} utilise opt.width ou opt.height comme valeurs maximales

Composants conviviaux :

Ce composant fonctionne avec loading lors du téléchargement du fichier.

Utilisez-le avec <ui-component name="fileuploader">. Lorsque le composant n'est pas encore chargé, jComponent le télécharge lors de la première utilisation depuis l'adresse dans DEF.fallback (le CDN Componentator par défaut). Auteur : Peter Širka. Source : le référentiel de composants Componentator, licence MIT.

example.html

<ui-component name="fileuploader"></ui-component>
<div class="exec link" data-exec="upload">Upload</div>

<script>
	function upload() {

		var opt = {};

		opt.url = '/api/upload/';

		// jComponent v20:
		// opt.url = 'POST /api/upload/';

		// opt.multiple = true;
		// opt.accept = 'text/*';

		opt.callback = function(response, err) {
			console.log(response, err);
		};
		opt.progress = function(percentage) {
			console.log(percentage);
		};

		SETTER('fileuploader/upload', opt);
	}
</script>