j-FileUploader

jComponent 20 · jcomponent@20 component Example loaded with jComponent 20

A simple component for uploading files. It supports auto-resizing images.

IMPORTANT: in jComponent v20, the value of opt.url must be in the form POST /url/

Configuration:

url {String} a default URL address for uploading

Methods:

fileuploader/upload(opt) shows a file dialog
- opt.url {String} important URL where will be image uploaded
- opt.callback(response, errors) {Function} a callback important
- opt.multiple {Boolean} supports multiple files (default: false)
- opt.progress(percentage) {Function}
- opt.accept {String} accept type (default: */*)
- opt.prefix {String} a name prefix <input name="file{0}" (default: file{0})
- opt.files {FileList} optional (if you use e.g Drag & Drop)
- opt.data {Object} optional, additional custom data key_string:value_string
- opt.width {Number} optional, image width
- opt.height {Number} optional, image height
- opt.background {String} optional, background color defined in HEX or can be transparent
- opt.keeporiginal {Boolean} optional, prevents for double resizing (default: false)
- opt.onlylarger {Boolean} optional, resizes images only larger than opt.width or opt.height
- opt.base64 {String} optional, it can contain a valid dataURI format (required to fill opt.filename)
- opt.filename {String} optional, required with opt.base64 field
- opt.quality {Number} optional, a default JPEG quality (default: 90)
- NEW: opt.disproportionate {Boolean} use opt.width or opt.height as maximum values

Friendly components:

This component works with loading when the file is uploading.

Use it with <ui-component name="fileuploader">. When the component is not loaded yet, jComponent downloads it on first use from the address in DEF.fallback (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license.

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>