test.html

<style>
	.dropArea {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 150px;
		width: 150px;
		background-color: rgba(175, 50, 50, 0.7);
	}
</style>

<a href="#" id="browseButton">Select files</a>

<div id="dropArea" class="dropArea">
	<p>DROP</p>
</div>

<div style="margin-top: 1rem; display: flex; flex-direction: column; width: fit-content">
	<label> Current verbosity level: <span id="verbosityLevelDisplay"></span> </label>
	<button onclick="cycleVerbosityLevel()">Cycle message verbosity level</button>
</div>

<script src="dist/main.js"></script>
<script>
	let verbosityLevel = 2;

	var r = new resumablejs.Resumable({
		target: 'test.html',
		fileCategories: ['test-category-1', 'test-category-2', 'test-category-2'],
		debugVerbosityLevel: verbosityLevel,
		maxChunkRetries: 0,
	});

	r.assignBrowse(document.getElementById('browseButton'), false, 'test-category-1');
	r.assignDrop(document.getElementById('dropArea'), 'test-category-1');

	r.on('fileAdded', function (file, event) {
		r.upload();
	});
	r.on('filesAdded', function (array) {
		r.upload();
	});

	cycleVerbosityLevel = function () {
		verbosityLevel = (verbosityLevel + 1) % 3;
		r.debugVerbosityLevel = verbosityLevel;
		updateVerbosityDisplay();
	};

	updateVerbosityDisplay = function () {
		document.getElementById('verbosityLevelDisplay').innerText = verbosityLevel;
	};

	updateVerbosityDisplay();
</script>