Bestanden uploaden met UPLOAD() en voortgang

jComponent 20 · jcomponent@20 jcomponentfrontenduploadfiles Uitgevoerd met jComponent 20

UPLOAD('POST /url/', formdata, callback, onprogress) post een FormData (het adres begint met de HTTP-methode, zoals bij AJAX()) en roept de callback aan met het geparsede antwoord. Het optionele vierde argument krijgt het percentage terwijl de upload loopt. Bouw de FormData uit een bestandsinvoer (new FormData() en append('file', input.files[0])); de serverkant is de @upload-route van het recept over bestandsuploads.

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 });
	});
}

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>

Probeer het in je browser

Bewerk het voorbeeld en voer het uit. Het draait in een geïsoleerd frame in je browser; er wordt niets naar onze server gestuurd.

Code

Voorbeeld