Image Uplaod Module

admin1234
Jan 30, 2026 3
Live Preview

Live Editor

<label class="upload" id="drop">
  <input type="file" accept="image/*" id="file">
  <div class="icon">📷</div>
  <h3>Upload Image</h3>
  <p>Click or drag & drop your image</p>

  <div class="preview" id="preview">
    <img id="img">
  </div>
</label>
body{
  margin:0;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#020617;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  color:#fff;
}

/* upload box */
.upload{
  width:300px;
  padding:28px;
  border-radius:24px;
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(16px);
  box-shadow:
    0 30px 80px rgba(0,0,0,.5),
    inset 0 0 0 1px rgba(255,255,255,.18);
  text-align:center;
  cursor:pointer;
  transition:.3s;
}

.upload:hover{
  transform:translateY(-6px);
  box-shadow:
    0 40px 100px rgba(0,0,0,.7),
    inset 0 0 0 1px rgba(139,92,246,.6);
}

/* icon */
.icon{
  width:72px;
  height:72px;
  border-radius:50%;
  margin:0 auto 16px;
  display:grid;
  place-items:center;
  font-size:32px;
  background:linear-gradient(135deg,#8b5cf6,#3b82f6);
  box-shadow:0 0 35px rgba(139,92,246,.7);
}

.upload p{
  margin:0;
  font-size:14px;
  opacity:.8;
}

/* preview */
.preview{
  display:none;
  margin-top:18px;
}
.preview img{
  width:100%;
  border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}

/* hidden input */
input{
  display:none;
}
</style>
const fileInput = document.getElementById("file");
const preview = document.getElementById("preview");
const img = document.getElementById("img");
const drop = document.getElementById("drop");

fileInput.addEventListener("change", showImage);

// drag & drop
drop.addEventListener("dragover", e => {
  e.preventDefault();
  drop.style.boxShadow = "0 0 0 2px #8b5cf6";
});

drop.addEventListener("dragleave", () => {
  drop.style.boxShadow = "";
});

drop.addEventListener("drop", e => {
  e.preventDefault();
  drop.style.boxShadow = "";
  fileInput.files = e.dataTransfer.files;
  showImage();
});

function showImage(){
  const file = fileInput.files[0];
  if(!file) return;
  img.src = URL.createObjectURL(file);
  preview.style.display = "block";
}
Categories

Image Uplaod Module

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
