# Μεταφόρτωση αρχείων με UPLOAD() και πρόοδο

> Στείλτε ένα FormData σε μια διαδρομή @upload του Total.js με UPLOAD() και παρακολουθήστε την πρόοδο.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: el
Content-SHA256: aa6808d983e37120f31f1eaddcbd8ea196a2ff14b1cca65d175c47c5453efcff
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: jcomponent20@3fedd009a277f50fddc608b97afbec553b67c51b
Review: not-recorded

Το `UPLOAD('POST /url/', formdata, callback, onprogress)` στέλνει ένα `FormData` (η διεύθυνση ξεκινά με τη μέθοδο HTTP, όπως στο `AJAX()`) και καλεί το callback με την αναλυμένη απάντηση. Το προαιρετικό τέταρτο όρισμα παίρνει το ποσοστό όσο τρέχει η μεταφόρτωση. Χτίστε το `FormData` από ένα πεδίο αρχείου (`new FormData()` και `append('file', input.files[0])`)· η πλευρά του διακομιστή είναι η διαδρομή `@upload` της συνταγής για τη μεταφόρτωση αρχείων.

```js controllers/upload.js
exports.install = function() {
	ROUTE('POST /upload/ @upload <5mb', upload);
};

function upload($) {

	var file = $.files[0];

	file.read(function(err, buffer) {
		$.json({ filename: file.filename, text: buffer.toString('utf8'), title: $.body.title });
	});
}
```

```html public/index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>jComponent</title>
	<link rel="stylesheet" href="//cdn.componentator.com/spa.min@20.css" />
	<script src="//cdn.componentator.com/spa.min@20.js"></script>
</head>
<body>
	<script>

		var form = new FormData();
		form.append('title', 'My note');
		form.append('file', new Blob(['hello from the browser'], { type: 'text/plain' }), 'note.txt');

		var progress = [];

		UPLOAD('POST /upload/', form, function(response) {
			SET('uploaded', response);
		}, function(percentage) {
			progress.push(percentage);
		});

	</script>

</body>
</html>
```
