JSFiddle - React, Tailwind, and code Playground

HTML

<div id="dropbox" data-bind="style: {background: mapBackground}, event:{dragenter:imageDropboxDragEnter, dragover:imageDropboxDragOver, drop: imageDropboxDrop}"></div>
<p data-bind="text:status"></p>

CSS

#dropbox{
	width: 400px;
    height: 400px;
    background-color: #ccc;
}

JavaScript

var viewModel;

	function ViewModel()
	{
		var self = this;
		self.status = ko.observable();
		self.mapBackground = ko.observable();

		self.imageDropboxDragEnter = function(data, event)
		{
			self.status('enter');
		}
		self.imageDropboxDragOver = function(data, event)
		{
			self.status('over');
		}
		self.imageDropboxDrop = function(data, event)
		{
			event.stopPropagation();
			self.status('drop');
			console.log(event.dataTransfer.files[0]);

			var fileReader = new FileReader();
			fileReader.onload = function(event)
			{
				console.log(event);
				var mapImage = event.target.result;
				self.mapBackground('url(' + mapImage + ') no-repeat center');
			}
			fileReader.readAsDataURL(event.dataTransfer.files[0]);
		}
	}

	viewModel = new ViewModel();
	ko.applyBindings(viewModel);