A Python content management system designed for kirsle.net featuring a blog, comments and photo albums. https://rophako.kirsle.net/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

105 lines
3.4 KiB

  1. {% extends "layout.html" %}
  2. {% block title %}Upload a Photo{% endblock %}
  3. {% block content %}
  4. <h1>Upload a Photo</h1>
  5. You can upload a photo from your computer or by pasting in the URL to a photo
  6. somewhere else on the Internet.
  7. <form id="upload-form" action="{{ url_for('photo.upload') }}" method="POST" enctype="multipart/form-data">
  8. <input type="hidden" name="token" value="{{ csrf_token() }}">
  9. <fieldset>
  10. <legend>Where is your picture located?</legend>
  11. <label>
  12. <input type="radio" class="location" name="location" value="pc" checked> On my computer
  13. </label>
  14. <label>
  15. <input type="radio" class="location" name="location" value="www"> On the web
  16. </label><p>
  17. <div id="pic-pc" class="location-div">
  18. <strong>Upload a picture from my computer</strong><br>
  19. <input type="file" size="30" name="file" id="file-picker" accept="image/*" multiple><p>
  20. <strong>Or, drag images here:</strong><br>
  21. <div id="dropbox" class="photo-upload-dropbox">Drag and drop images into this box</div>
  22. </div>
  23. <div id="pic-www" class="location-div">
  24. <strong>Upload a picture from the Internet</strong><br>
  25. <input type="text" class="form-control" size="40" name="url" placeholder="http://" autocomplete="off">
  26. </div>
  27. <p>
  28. Only jpeg, gif and png images are supported. There is no maximum file size
  29. limit, but be reasonable.
  30. </fieldset>
  31. <p>
  32. <fieldset>
  33. <legend>Photo Options</legend>
  34. <strong>Photo album:</strong><br>
  35. <select id="album" name="album" class="form-control">
  36. <optgroup label="Albums">
  37. {% for album in album_list %}
  38. <option value="{{ album }}"{% if album == selected %} selected{% endif %}>{{ album }}</option>
  39. {% endfor %}
  40. </optgroup>
  41. <option value="">Create a new album</option>
  42. </select>
  43. <blockquote id="create-album">
  44. <strong>New album:</strong><br>
  45. <input type="text" class="form-control" size="20" id="new-album" name="new-album"><p>
  46. <strong>Album Description:</strong><br>
  47. <textarea cols="50" class="form-control" rows="6" name="new-description"></textarea><br>
  48. <small>Shows up at the top of the album.
  49. Use <a href="/markdown" target="_blank">Markdown</a> formatting.</small>
  50. </blockquote>
  51. </fieldset>
  52. <p>
  53. <fieldset id="upload-progress" style="display: none">
  54. <legend>Upload Progress</legend>
  55. <div class="upload-trough">
  56. <div id="upload-progress-bar" class="upload-progress-bar"></div>
  57. </div>
  58. </fieldset>
  59. <p>
  60. <button type="submit" class="btn btn-primary" id="upload-button">Upload Picture</button>
  61. </form>
  62. {% endblock %}
  63. {% block scripts %}
  64. <script type="text/javascript" src="/rophako/multiupload.js"></script>
  65. <script>
  66. $(document).ready(function() {
  67. $("#pic-www").hide();
  68. $("#create-album").hide();
  69. $(".location").change(function() {
  70. $(".location-div").hide();
  71. $("#pic-" + $(this).val()).show();
  72. });
  73. $("#album").change(function() {
  74. if ($(this).val() === "") {
  75. $("#create-album").show();
  76. }
  77. else {
  78. $("#new-album").val("");
  79. $("#create-album").hide();
  80. }
  81. });
  82. });
  83. </script>
  84. {% endblock %}