The page to upload pictures can be built using EJS template engine by inserting the necessary data into the final HTML page as below:
<!--view/admin/index.ejs-->
<link rel="stylesheet" href="/styles/admin/index.css" />
<script src="/scripts/paginate.js"></script>
<section class="Header">
<div class="menu region">
<div class="logo"><%= data.pageTitle %></div>
<form>
<select name="adminSearch">
<option>ការងារ</option>
</select>
<input type="text" name="q" required placeholder="Search" />
<input type="submit" value="ស្វែងរក" />
</form>
<div class="logout"><a href="/">ទំព័រមុខ</a> | <a href="/login/logout">ចេញក្រៅ</a></div>
</div>
</section>
<section class="Main">
<div class="main region">
<div class="sidebar">
<div class="wrapper">
<a href="/admin/job"><img src="/images/jobs.png" /></a>
<a href="/admin/job">ការងារ</a>
<a href="/admin/category"><img src="/images/category.png" /></a>
<a href="/admin/category">ជំពូក</a>
<a href="/admin/upload"><img src="/images/upload.png" /></a>
<a href="/admin/upload">Upload</a>
<a href="/admin/user"><img src="/images/users.png" /></a>
<a href="/admin/user">អ្នកប្រើប្រាស់</a>
<a href="/admin/setting"><img src="/images/setting.png" /></a>
<a href="/admin/setting">Settings</a>
</div>
</div>
<div class="content">
<% if(data.route === '/admin/category'){ %>
<%- include('category.ejs') %>
<% }else if(data.route === '/admin/job'){ %>
<%- include('job.ejs') %>
<% }else if(data.route === '/admin/upload'){ %>
<%- include('upload.ejs') %>
<% } %>
</div>
</div>
</section>
<section class="Footer">
<div class="footer region">
<% if(data.count){ %>
<div class="info">សរុបទាំងអស់មានចំនួនៈ <%= data.count %></div>
<% }else{ %>
<div class="info">សរុបទាំងអស់មានចំនួនៈ </div>
<% } %>
<ul class="list">
<% if(data.items){ %>
<% for(let item of data.items) { %>
<li>
<div class='thumb'>
<a href='/<%= data.type %>/<%= item.id %>'><img src='<%= item.thumb %>'/></a>
</div>
<div class="title">
<a href="/<%= data.type %>/<%= item.id %>"><%= item.title %></a>
<div><%= (new Date(item.postdate)).toLocaleDateString('it-IT') %></div>
</div>
<div class="edit">
<a href="<%= data.route %>/edit/<%= item.id %>"><img src="/images/edit.png"/></a>
<a href="<%= data.route %>/delete/<%= item.id %>"><img src="/images/delete.png"/></a>
</div>
</li>
<% } %>
<% } %>
</ul>
<% if(data.route === '/admin/user'){ %>
<script>
$('.Listing .list li').css({'grid-template-columns':'13% auto 25%'})
$('.Listing .list li .thumb').css({'padding-top':'100%'})
$('.Listing .list li .thumb img').css({'border-radius':'50%'})
</script>
<% } %>
<div class="paginate region">
<img onclick="paginate('<%= data.route %>')" src="/images/load-more.png"/>
</div>
</div>
</section>
<!--views/admin/upload.ejs-->
<link href="/styles/admin/upload.css" rel="stylesheet"></link>
<div class='Upload'>
<form action='/admin/upload' method='post' enctype="multipart/form-data">
<input type='file' name='uploadFile' required />
<input type='text' value='<%= data.fileUrl %>'
placeholder='តំណរភ្ជាប់ឯកសារនៅលើ Server' />
<input type='submit' value='បញ្ជូនទិន្នន័យ' />
</form>
</div>
/* static/styles/admin/upload.css */
.Upload form{
display: grid;
grid-template-columns: 50%;
grid-gap: 3px;
}
.Upload form input{
font: var(--body-font);
padding: 2px 5px;
}
.Upload form input[type="file"]{
padding: 0;
color: black;
background: white;
}
