If you have a file upload template (including a upload field within a .file-box element, 2 output for file name and size) then you can use this FileUploadHandler class.
To instantiate the input watcher (to automatically validate and preview the file): use


var file = new FileUploadHandler.Watch("querySelector to input[type=file]", {

	preview: $("app[name=main] > main querySelector to .file-box"),

	property: {

		name: d.querySelector("app[name=main] > main querySelector to output[data-name=name]"),

		size: d.querySelector("app[name=main] > main querySelector to output[data-name=size]")

	}, options: {

		sizeLimit: , // in Bytes. Use FileUploadHandler.convertSize.MB2B() to convert from MB

		types: ["list of file extensions"]

	}, message: {

		noFile: `กรุณาเลือกไฟล์${available global variable}`

	}

});

To validate the file manually: use
sv.file.validate(true)

To upload the selected file: use


file.uploadTo(API_URL,

	{param: "value"}, {

		form: $("app[name=main] > main querySelector to form"),

		buttons: $("app[name=main] > main querySelector to button in form"),

		uploadIcon: $("app[name=main] > main querySelector to .upload-icon")

	},

	function(dat) {

		if (!dat) return;

		if (dat.action == "close") return top.app.UI.lightbox.close();

		d.querySelector("app[name=main] > main querySelector to form").reset();

		complete();

	}

);