Need help in validating image upload validation

Store Design
, , , , , ,

Topic summary

A developer created a file uploader for their Shopify site that fails with larger files and needs help implementing file size validation.

Code Provided:

  • Custom file upload interface with styling for thumbnails, remove buttons, and loading states
  • JavaScript handling file selection, preview generation using FileReader API, and dynamic file list management
  • Note: The code snippet appears partially corrupted/reversed in the original post

Solution Offered:
Another user recommended using the File API to validate file size before upload:

  • Access file size via event.target.files[0].size property
  • Check size in bytes within a ‘change’ event listener on the file input
  • Referenced Mozilla Developer Network documentation for File System API and File API
  • Provided link to Stack Overflow example for JavaScript file upload size validation

Status: The discussion remains open with one proposed solution but no confirmation of implementation or resolution from the original poster.

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.
1

I developed a file uploader for my Shopify site, but it fails when handling larger files. How can I validate the file size to ensure it meets certain limits?

Here’s the code :

.file-upload-container { display: flex; align-items: center; } .file-name { margin-left: 10px; font-style: italic; } .loading-message { color: blue; font-weight: bold; margin-top: 10px; } .file-list { margin-top: 10px; display: flex; flex-wrap: wrap; } .file-item { display: flex; flex-direction: column; align-items: center; margin-right: 10px; margin-top: 10px; } .file-item img { max-width: 100px; max-height: 100px; border: 1px solid #ccc; margin-bottom: 5px; } .remove-button { background-color: red; color: white; border: none; padding: 2px 5px; cursor: pointer; } .remove-button:hover { background-color: darkred; }
Your photos
Upload Files

No file chosen

Please upload your file(s).

Please wait, your files are being uploaded...

2

Hi @Samarpanbh :waving_hand: use the File apis https://developer.mozilla.org/en-US/docs/Web/API/File_System_API https://developer.mozilla.org/en-US/docs/Web/API/File

Given an input of this: , use:

const input = document.getElementById('fileInput');
input.addEventListener('change', (event) => {
  const file = event.target.files[0];
  if (file) {
    console.log('File size:', file.size, 'bytes');
  }
});

Or literally see https://stackoverflow.com/questions/3717793/javascript-file-upload-size-validation

Good Luck.