solehudin/simple-image-resizer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add Dockerfile & update response api

Browse Source
This commit is contained in:
solehudin5699
2024-03-08 22:10:21 +07:00
parent 67481f1d19
commit 9dc2020ad2
6 changed files with 1235 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.dockerignore
+1
View File
@@ -0,0 +1 @@
node_modules
.gitignore
+1 -1
View File
@@ -1,2 +1,2 @@
/node_modules /node_modules
package-lock.json .env
Dockerfile
+12
View File
@@ -0,0 +1,12 @@
FROM node:14-alpine
WORKDIR /app
COPY package*.json .
RUN npm i
COPY . .
EXPOSE 5000
CMD [ "npm","start" ]
index.js
+14 -14
View File
@@ -1,11 +1,11 @@
require('dotenv').config(); require("dotenv").config();
const express = require('express'); const express = require("express");
const path = require('path'); const path = require("path");
const bodyParser = require('body-parser'); const bodyParser = require("body-parser");
const resizer = require('./helper/resizer'); const resizer = require("./helper/resizer");
const uploadMiddleware = require('./helper/middleware'); const uploadMiddleware = require("./helper/middleware");
const logger = require('./helper/logger'); const logger = require("./helper/logger");
const PORT = process.env.PORT || 5000; const PORT = process.env.PORT || 5000;
const app = express(); const app = express();
@@ -13,17 +13,17 @@ const app = express();
app.use(logger); app.use(logger);
app.use(bodyParser.json()); app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false })); app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.static('public')); app.use(express.static("public"));
app.get('/', async (req, res) => { app.get("/", async (req, res) => {
res.sendFile(path.join(__dirname, './public/index.html')); res.sendFile(path.join(__dirname, "./public/index.html"));
}); });
app.get('/public/:filename', resizer); app.get("/public/:filename", resizer);
app.post('/', uploadMiddleware, (req, res) => { app.post("/", uploadMiddleware, (req, res) => {
res.json({ res.json({
success: true, success: true,
message: 'Success upload file', message: "Success upload file",
urlImage: `${process.env.ORIGIN}/public/${req.file?.filename}`, path: `public/${req.file?.filename}`,
}); });
}); });
package-lock.json
Generated
+1144
View File
File diff suppressed because it is too large Load Diff
public/index.html
+63 -44
View File
@@ -133,12 +133,24 @@
<div class="form-options"> <div class="form-options">
<div class="input-wrapper"> <div class="input-wrapper">
<label for="quality-input" class="label-option">Quality</label> <label for="quality-input" class="label-option">Quality</label>
<input id="quality-input" class="input-option-quality" type="range" max="100" min="1" /> <input
id="quality-input"
class="input-option-quality"
type="range"
max="100"
min="1"
/>
<span id="value-quality" class="value-qty-img"></span> <span id="value-quality" class="value-qty-img"></span>
</div> </div>
<div class="checkbox-wrapper"> <div class="checkbox-wrapper">
<label for="use-dimension-input" class="label-option-checkbox">Original Size</label> <label for="use-dimension-input" class="label-option-checkbox"
<input id="original-size-input" type="checkbox" class="checkbox-option" /> >Original Size</label
>
<input
id="original-size-input"
type="checkbox"
class="checkbox-option"
/>
</div> </div>
<div class="input-wrapper"> <div class="input-wrapper">
<label for="width-input" class="label-option">Width</label> <label for="width-input" class="label-option">Width</label>
@@ -167,7 +179,9 @@
</div> </div>
</div> </div>
<button id="btn-submit" class="btn-submit" type="submit">Submit & Download</button> <button id="btn-submit" class="btn-submit" type="submit">
Submit & Download
</button>
</form> </form>
<a <a
@@ -180,69 +194,71 @@
></a> ></a>
</body> </body>
<script> <script>
const formSubmit = document.getElementById('form-submit'); const formSubmit = document.getElementById("form-submit");
const btnBrowse = document.getElementById('btn-browse'); const btnBrowse = document.getElementById("btn-browse");
const btnSubmit = document.getElementById('btn-submit'); const btnSubmit = document.getElementById("btn-submit");
const inputFile = document.getElementById('input-file'); const inputFile = document.getElementById("input-file");
const anchorDonwload = document.getElementById('anchor-donwload'); const anchorDonwload = document.getElementById("anchor-donwload");
const inputQuality = document.getElementById('quality-input'); const inputQuality = document.getElementById("quality-input");
const valueQuality = document.getElementById('value-quality'); const valueQuality = document.getElementById("value-quality");
const inputWidth = document.getElementById('width-input'); const inputWidth = document.getElementById("width-input");
const inputHeight = document.getElementById('height-input'); const inputHeight = document.getElementById("height-input");
const checkboxOriSize = document.getElementById('original-size-input'); const checkboxOriSize = document.getElementById("original-size-input");
const setInitialState = (() => { const setInitialState = (() => {
if (checkboxOriSize.checked) { if (checkboxOriSize.checked) {
inputHeight.setAttribute('disabled', true); inputHeight.setAttribute("disabled", true);
inputWidth.setAttribute('disabled', true); inputWidth.setAttribute("disabled", true);
} else { } else {
inputHeight.removeAttribute('disabled'); inputHeight.removeAttribute("disabled");
inputWidth.removeAttribute('disabled'); inputWidth.removeAttribute("disabled");
} }
valueQuality.innerHTML = inputQuality.value; valueQuality.innerHTML = inputQuality.value;
btnSubmit.setAttribute('disabled', true); btnSubmit.setAttribute("disabled", true);
})(); })();
btnBrowse.addEventListener('click', (e) => { btnBrowse.addEventListener("click", (e) => {
inputFile.click(); inputFile.click();
}); });
inputFile.addEventListener('change', (e) => { inputFile.addEventListener("change", (e) => {
const file = e.target.files[0]; const file = e.target.files[0];
const imageFile = new Image(); const imageFile = new Image();
imageFile.onload = function () { imageFile.onload = function () {
// URL.revokeObjectURL(image.src); // URL.revokeObjectURL(image.src);
btnBrowse.style.backgroundImage = `url(${URL.createObjectURL(file)})`; btnBrowse.style.backgroundImage = `url(${URL.createObjectURL(file)})`;
btnBrowse.style.backgroundSize = 'cover'; btnBrowse.style.backgroundSize = "cover";
btnBrowse.style.backgroundColor = 'transparent'; btnBrowse.style.backgroundColor = "transparent";
btnBrowse.style.width = `70vw`; btnBrowse.style.width = `70vw`;
btnBrowse.style.height = `calc(${imageFile.height / imageFile.width}*70vw)`; btnBrowse.style.height = `calc(${
btnBrowse.style.placeContent = 'flex-end center'; imageFile.height / imageFile.width
btnBrowse.innerHTML = 'Change Image'; }*70vw)`;
btnBrowse.style.placeContent = "flex-end center";
btnBrowse.innerHTML = "Change Image";
}; };
imageFile.src = URL.createObjectURL(file); imageFile.src = URL.createObjectURL(file);
btnSubmit.removeAttribute('disabled'); btnSubmit.removeAttribute("disabled");
}); });
inputQuality.addEventListener('change', (e) => { inputQuality.addEventListener("change", (e) => {
const qualityValue = e.target.value; const qualityValue = e.target.value;
valueQuality.innerHTML = qualityValue; valueQuality.innerHTML = qualityValue;
}); });
checkboxOriSize.addEventListener('change', (e) => { checkboxOriSize.addEventListener("change", (e) => {
const isChecked = e.target.checked; const isChecked = e.target.checked;
if (isChecked) { if (isChecked) {
inputHeight.setAttribute('disabled', true); inputHeight.setAttribute("disabled", true);
inputWidth.setAttribute('disabled', true); inputWidth.setAttribute("disabled", true);
} else if (!isChecked) { } else if (!isChecked) {
inputHeight.removeAttribute('disabled'); inputHeight.removeAttribute("disabled");
inputWidth.removeAttribute('disabled'); inputWidth.removeAttribute("disabled");
} }
}); });
formSubmit.addEventListener('submit', (e) => { formSubmit.addEventListener("submit", (e) => {
e.preventDefault(); e.preventDefault();
const heightValue = inputHeight.value; const heightValue = inputHeight.value;
@@ -252,13 +268,13 @@
const imageFile = inputFile.files[0]; const imageFile = inputFile.files[0];
const formData = new FormData(); const formData = new FormData();
formData.append('image', imageFile); formData.append("image", imageFile);
btnSubmit.innerHTML = 'Loading...'; btnSubmit.innerHTML = "Loading...";
btnSubmit.setAttribute('disabled', true); btnSubmit.setAttribute("disabled", true);
fetch('/', { fetch("/", {
method: 'POST', method: "POST",
headers: {}, headers: {},
body: formData, body: formData,
}) })
@@ -267,14 +283,17 @@
const params = isOriginalSize const params = isOriginalSize
? `?quality=${qualityValue}` ? `?quality=${qualityValue}`
: `?quality=${qualityValue}&width=${widthValue}&height=${heightValue}`; : `?quality=${qualityValue}&width=${widthValue}&height=${heightValue}`;
anchorDonwload.setAttribute('href', result.urlImage + params); anchorDonwload.setAttribute(
"href",
`${window.location.origin}/${result.path}${params}`
);
anchorDonwload.click(); anchorDonwload.click();
btnSubmit.innerHTML = 'Submit & Download'; btnSubmit.innerHTML = "Submit & Download";
btnSubmit.removeAttribute('disabled'); btnSubmit.removeAttribute("disabled");
}) })
.catch((err) => { .catch((err) => {
btnSubmit.innerHTML = 'Submit & Download'; btnSubmit.innerHTML = "Submit & Download";
btnSubmit.removeAttribute('disabled'); btnSubmit.removeAttribute("disabled");
}); });
}); });
</script> </script>