form.html 3.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. <!DOCTYPE html>
  2. <!--suppress XmlHighlighting -->
  3. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  4. <head>
  5. <!-- Required meta tags -->
  6. <meta charset="utf-8">
  7. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  8. <!-- Bootstrap CSS -->
  9. <!--suppress SpellCheckingInspection -->
  10. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
  11. integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  12. <!--suppress SpellCheckingInspection -->
  13. <script src="https://code.jquery.com/jquery-3.6.0.min.js"
  14. integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  15. <title>Grants - images</title>
  16. </head>
  17. <body>
  18. <div th:insert="~{fragments/layout::banner}"></div>
  19. <div class="container border border-info rounded-3 text-center p-4">
  20. <h3>Image Details</h3>
  21. <form th:object="${imageCommand}" th:action="@{/image}" method="post" enctype="multipart/form-data">
  22. <div th:if="${#fields.hasErrors('*')}" class="alert alert-danger">
  23. <p>Please Correct The Errors Below</p>
  24. </div>
  25. <table style="width:100%;">
  26. <tr>
  27. <td style="text-align: right;">
  28. <label for="id"><span style="color: rgb(255,0,0);">*</span>Database Id :&nbsp;</label>
  29. </td>
  30. <td style="text-align: left;">
  31. <input class="form-control" id="id"
  32. th:field="*{id}" type="text" readonly>
  33. </td>
  34. </tr>
  35. <tr>
  36. <td style="text-align: right;">
  37. <label for="name">Name :&nbsp;</label>
  38. </td>
  39. <td style="text-align: left;">
  40. <input class="form-control" id="name"
  41. th:field="*{name}" type="text">
  42. <div th:if="${#fields.hasErrors('name')}">
  43. <ul class="text-danger">
  44. <li th:each="err : ${#fields.errors('name')}" th:text="${err}"/>
  45. </ul>
  46. </div>
  47. </td>
  48. </tr>
  49. <tr>
  50. <td style="text-align: right;">
  51. <label for="fileName"><span style="color: rgb(255,0,0);">*</span>File Name :&nbsp;</label>
  52. </td>
  53. <td style="text-align: left;">
  54. <input class="form-control" id="fileName"
  55. th:field="*{fileName}" type="text" readonly>
  56. <div th:if="${#fields.hasErrors('name')}">
  57. <ul class="text-danger">
  58. <li th:each="err : ${#fields.errors('fileName')}" th:text="${err}"/>
  59. </ul>
  60. </div>
  61. </td>
  62. </tr>
  63. <tr>
  64. <td style="text-align: right;">
  65. <label for="file">File to upload :&nbsp;</label>
  66. </td>
  67. <td style="text-align: left;">
  68. <input type="file" name="file" id = "file"/>
  69. </td>
  70. </tr>
  71. <tr>
  72. <td>&nbsp;</td>
  73. </tr>
  74. </table>
  75. <div th:if="${image != null and !#strings.isEmpty(image)}">
  76. <img class='img-thumbnail' th:src="'data:image/jpeg;base64,' + ${image} "
  77. width="250" height="250" alt =""/>
  78. </div>
  79. <button type="submit" class="btn btn-primary">Commit</button>
  80. <a class="btn btn-secondary" th:href="@{/images}" th:text="${'List all'}">List all</a>
  81. <a class="btn btn-success" th:href="@{/}" th:text="${'Home'}">Home</a>
  82. <h6><span style="color: rgb(255,0,0);">*</span><span> Cannot be edited</span></h6>
  83. </form>
  84. </div>
  85. </body>
  86. </html>