rophako/rophako/modules/photo/templates/photos/upload.html

105 řádky
3.4 KiB
HTML

{% extends "layout.html" %}
{% block title %}Upload a Photo{% endblock %}
{% block content %}
<h1>Upload a Photo</h1>
You can upload a photo from your computer or by pasting in the URL to a photo
somewhere else on the Internet.
<form id="upload-form" action="{{ url_for('photo.upload') }}" method="POST" enctype="multipart/form-data">
<input type="hidden" name="token" value="{{ csrf_token() }}">
<fieldset>
<legend>Where is your picture located?</legend>
<label>
<input type="radio" class="location" name="location" value="pc" checked> On my computer
</label>
<label>
<input type="radio" class="location" name="location" value="www"> On the web
</label><p>
<div id="pic-pc" class="location-div">
<strong>Upload a picture from my computer</strong><br>
<input type="file" size="30" name="file" id="file-picker" accept="image/*" multiple><p>
<strong>Or, drag images here:</strong><br>
<div id="dropbox" class="photo-upload-dropbox">Drag and drop images into this box</div>
</div>
<div id="pic-www" class="location-div">
<strong>Upload a picture from the Internet</strong><br>
<input type="text" class="form-control" size="40" name="url" placeholder="http://" autocomplete="off">
</div>
<p>
Only jpeg, gif and png images are supported. There is no maximum file size
limit, but be reasonable.
</fieldset>
<p>
<fieldset>
<legend>Photo Options</legend>
<strong>Photo album:</strong><br>
<select id="album" name="album" class="form-control">
<optgroup label="Albums">
{% for album in album_list %}
<option value="{{ album }}"{% if album == selected %} selected{% endif %}>{{ album }}</option>
{% endfor %}
</optgroup>
<option value="">Create a new album</option>
</select>
<blockquote id="create-album">
<strong>New album:</strong><br>
<input type="text" class="form-control" size="20" id="new-album" name="new-album"><p>
<strong>Album Description:</strong><br>
<textarea cols="50" class="form-control" rows="6" name="new-description"></textarea><br>
<small>Shows up at the top of the album.
Use <a href="/markdown" target="_blank">Markdown</a> formatting.</small>
</blockquote>
</fieldset>
<p>
<fieldset id="upload-progress" style="display: none">
<legend>Upload Progress</legend>
<div class="upload-trough">
<div id="upload-progress-bar" class="upload-progress-bar"></div>
</div>
</fieldset>
<p>
<button type="submit" class="btn btn-primary" id="upload-button">Upload Picture</button>
</form>
{% endblock %}
{% block scripts %}
<script type="text/javascript" src="/rophako/multiupload.js"></script>
<script>
$(document).ready(function() {
$("#pic-www").hide();
$("#create-album").hide();
$(".location").change(function() {
$(".location-div").hide();
$("#pic-" + $(this).val()).show();
});
$("#album").change(function() {
if ($(this).val() === "") {
$("#create-album").show();
}
else {
$("#new-album").val("");
$("#create-album").hide();
}
});
});
</script>
{% endblock %}