<label class="uploader" ondragover="return false;"
	   [class.loaded]="loaded"
	   [style.outlineColor]="dragging ? activeColor : baseColor"
	   (dragenter)="handleDragEnter()"
	   (dragleave)="handleDragLeave()"
	   (drop)="handleDrop($event)">

	<table style="margin-top: 50px; font-weight: bold; color: gray;">
		<tr style="text-align: center">
			<i class="glyphicon glyphicon-cloud-upload" [style.color]="dragging ? ((imageSrc.length > 0) ? overlayColor : activeColor): ((imageSrc.length > 0) ? overlayColor : baseColor)" style="font-size: 100px"></i>

			<img [src]="imageSrc" (load)="handleImageLoad()" [class.loaded]="imageLoaded" style="z-index: 0"/>
			<input multiple type="file" name="file" accept="image/*" (change)="handleInputChange($event)">
		</tr>
		<br>
		<tr style="text-align: center; padding-top: 10px" [style.color]="dragging ? ((imageSrc.length > 0) ? overlayColor : activeColor): ((imageSrc.length > 0) ? overlayColor : grayColor)">
			<span>Arrastra las imagenes aqui.</span> <br>
			<span>{{msg}}</span>
		</tr>
	</table>

</label>

