Drag-and-drop File Uploader with Preview and Validation – InputChooser

Preview:

Description:

InputChooser is a tiny JavaScript plugin that provides a user-friendly drag-and-drop file upload experience with built-in previews and validation.

Unlike heavier libraries like Dropzone.js, it provides essential features in 3KB (minified) while maintaining full control over the file input lifecycle.

Features:

• Drag and drop file uploads with click-to-upload fallback
• Automatic image preview functionality
• File validation for type, size, and dimensions
• Clean delete/clear option for selected files
• Auto-injected styles that require no additional CSS
• Full responsiveness across devices

How to use it:

1. Download the InputChooser.js library and include it on your webpage.

<script src="InputChooser.min.js"></script>

2. Add a container with the .dropzone-area class. This will be your drop zone.

<div class="dropzone-area">
</div>

3. Use the following data- attributes to configure the drop zone:

• data-name: Sets the name attribute of the hidden file input. Important for form submissions.
• data-size: Maximum file size in KB.
• data-type: Comma-separated list of allowed file types (without the image/ prefix).
• data-width: Maximum allowed image width in pixels.
• data-height: Maximum allowed image height in pixels.

<div 
  class="dropzone-area"
  data-name="cssscript"
  data-size="500"
  data-type="png,jpg,gif,webp"
  data-width="1920"
  data-height="1080">
</div>

4. initialize InputChooser on your dropzone. That’s it.

document.addEventListener("DOMContentLoaded", function() {
  new InputChooser(".dropzone-area");
});

FAQs:

Q: How do I handle server-side validation?

A: InputChooser provides client-side validation, but you should still implement server-side validation for security. The plugin helps reduce server load by preventing obviously invalid uploads but doesn’t replace proper server validation.

When implementing server validation, maintain consistent validation rules between client and server sides to provide a cohesive user experience.

Q: How can I customize the appearance of the drop zone?

A: You can modify the CSS within the injectStyles() method in InputChooser.js. This gives you complete control over the styling. Alternatively, you can override the default styles by adding your own CSS after the script is loaded, targeting the classes used by InputChooser (e.g., .dropzone-area, .preview-image, .clear-button).

Q: How do I access the uploaded file for form submission?

A: InputChooser creates a standard file input with the name specified in your `data-name` attribute. When your form is submitted, the file will be included in the form data.