update origin

index.js

@@ -1,3 +1,5 @@
+require('dotenv').config();
+
 const express = require('express');
 const path = require('path');
 const bodyParser = require('body-parser');
@@ -21,7 +23,7 @@ app.post('/', uploadMiddleware, (req, res) => {
   res.json({
     success: true,
     message: 'Success upload file',
-    urlImage: `https://img-resize-xxx.herokuapp.com/public/${req.file.filename}`,
+    urlImage: `${process.env.ORIGIN}/public/${req.file?.filename}`,
   });
 });
 

package.json

@@ -10,6 +10,7 @@
   "license": "ISC",
   "dependencies": {
     "body-parser": "^1.19.2",
+    "dotenv": "^16.0.3",
     "express": "^4.17.3",
     "multer": "^1.4.4",
     "sharp": "^0.28.3"

public/index.html

@@ -133,24 +133,12 @@
       <div class="form-options">
         <div class="input-wrapper">
           <label for="quality-input" class="label-option">Quality</label>
-          <input
+          <input id="quality-input" class="input-option-quality" type="range" max="100" min="1" />
-            id="quality-input"
-            class="input-option-quality"
-            type="range"
-            max="100"
-            min="1"
-          />
           <span id="value-quality" class="value-qty-img"></span>
         </div>
         <div class="checkbox-wrapper">
-          <label for="use-dimension-input" class="label-option-checkbox"
+          <label for="use-dimension-input" class="label-option-checkbox">Original Size</label>
-            >Original Size</label
+          <input id="original-size-input" type="checkbox" class="checkbox-option" />
-          >
-          <input
-            id="original-size-input"
-            type="checkbox"
-            class="checkbox-option"
-          />
         </div>
         <div class="input-wrapper">
           <label for="width-input" class="label-option">Width</label>
@@ -179,9 +167,7 @@
         </div>
       </div>
 
-      <button id="btn-submit" class="btn-submit" type="submit">
+      <button id="btn-submit" class="btn-submit" type="submit">Submit & Download</button>
-        Submit & Download
-      </button>
     </form>
 
     <a
@@ -231,9 +217,7 @@
         btnBrowse.style.backgroundSize = 'cover';
         btnBrowse.style.backgroundColor = 'transparent';
         btnBrowse.style.width = `70vw`;
-        btnBrowse.style.height = `calc(${
+        btnBrowse.style.height = `calc(${imageFile.height / imageFile.width}*70vw)`;
-          imageFile.height / imageFile.width
-        }*70vw)`;
         btnBrowse.style.placeContent = 'flex-end center';
         btnBrowse.innerHTML = 'Change Image';
       };
@@ -273,7 +257,7 @@
       btnSubmit.innerHTML = 'Loading...';
       btnSubmit.setAttribute('disabled', true);
 
-      fetch('https://img-resize-xxx.herokuapp.com/', {
+      fetch('/', {
         method: 'POST',
         headers: {},
         body: formData,