<?php require "../vendor/autoload.php";

// display_errors($_ALL);

?>
<!DOCTYPE html>
<html>
	<head>
		<title>Page Title</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="css/site.css">
	</head>
	<body>
		<header>
			<div class="container">
				<h1>Simple File Uploader</h1>
			</div>
		</header><!-- /header -->
		<main class="container">
			<div class="col-md-8">
				<form class="uploadForm" action=""  accept-charset="utf-8" enctype="multipart/form-data" data-action="/upload">
					<!-- 
						Input options:
						data: 
							- allowed-extensions(required): set array of allowed file upload extensions,
							- upload-folder(required): path of folder where file should be uploaded,
							- max-file-size(required): set maximum file size that could be uploaded (KB),
							- min-file-size(optional): set number of minFileSize (if is not set or if it is 0 it will not be checked) (KB),
							- preview(optional): expected value: 1, if is not set default value is 0,
							- draggable(optional): expected value: 1, if is not set default value is 0,
							- upload info(optional): TODO,
							- file-info(optional): TODO,
							- multiple(optional): TODO
							- model: TODO,
							- foreignKey model: TODO
							- progressbar: TODO
							- alt: TODO
							- watermark (optional): TODO

					  -->
					<div class="col-md-6">
						<div class="form-group file-uploader">
							<div>Upload info
								<ul>
									<li>File types</li>
									<li>File sizes</li>
									<li>File dimensions</li>
									<li>...</li>
								</ul>
							</div>
							<img class="preview hidden" alt="your image" width="200" height="200" />
							<div class="drop-zone">
								<label class="btn btn-default btn-file clickHere" for="file1">Browse
									<input id="file1" name="file" type="file"  class="hidden" data-allowed-extension="'image/jpg','image/jpeg','image/gif','image/png'" data-min-file-size="0" data-max-file-size="5" data-upload-folder="upload/" data-preview="1" />
								</label>
							</div>
							<p class="error-text hidden"></p>
							<div class="file-info">
								<ul>
									<li>Type</li>
									<li>File size</li>
								</ul>
							</div>
						</div>
						<div class="form-group">
							<input type="text" name="test" />
						</div>
						<div class="form-group">
							<button id="uploadButton" class="btn btn-primary">Upload</button>
						</div>
						<div><img id="testShowImage" src="" alt=""></div>
					</div>
					
				</form>
			</div>
			
		</main>
		<footer>
			
		</footer>
		<script src="js/jquery-3.1.1.min.js"  type="text/javascript"  ></script>
		<script src="js/bootstrap.min.js"  type="text/javascript" ></script>
		<script src="dist/custom.js" type="text/javascript"></script>
	</body>
</html>