<div id="direct_upload_jquery">
	<h1>New Photo</h1>
	<h2>Direct upload from the browser with jQuery File Upload</h2>
	<p>You can also drag and drop an image file into the dashed area.</p>
	<form>
		<div class="form_line">
			<label path="title">Title:</label>
			<div class="form_controls">
				<input type="text" #title class="form-control" placeholder="Title" (keyup)="updateTitle(title.value)" (blur)="updateTitle(title.value)"
				/>
			</div>
		</div>
		<div class="form_line">
			<label>Image:</label>
			<div class="form_controls">
				<div class="upload_button_holder">
					<a href="#" class="upload_button">Upload</a>
					<input type="file" name="file" class="cloudinary_fileupload" multiple>
				</div>

			</div>
		</div>

	</form>
	<h2>Status</h2>
	<div class="file" *ngFor="let file of files">
		<h3>{{file.name}}</h3>
		<div class="status">{{file.status}}</div>
		<div class="progress-bar">
			<div class="progress" [style.width.%]="file.progress" ng-init="progress=0"></div>
		</div>
		<div class="form_line">
			<div class="form_controls">
				<div class="preview">
					<img ngf-src="file.result.url || file">
				</div>
			</div>
		</div>
		<div class="info">
			<table>
				<tr *ngFor="let property of getFileProperties(file.result)">
					<td> {{ property.key }} </td>
					<td> {{ property.value | json}} </td>
				</tr>
			</table>
		</div>

	</div>
</div>

<a routerLink="" class="back_link">Back to list</a>