You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

droppablefileinput

Package Overview
Dependencies
Maintainers
1
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

droppablefileinput

DroppableFileInput is a custom Django widget that enhances the usability of file input forms by allowing users to drag and drop files. This widget utilizes JavaScript to provide interactive feedback, such as highlighting the drop area when a file is dragged over and displaying file details on the page.

0.1.1
pipPyPI
Maintainers
1

droppablefileinput

Release Build status codecov Commit activity License

DroppableFileInput is a custom Django widget that enhances the usability of file input forms by allowing users to drag and drop files. This widget utilizes JavaScript to provide interactive feedback, such as highlighting the drop area when a file is dragged over and displaying file details on the page. This uses no external JavaScript dependencies, all functionality is brought by this package.

Features

  • Drag and Drop: Easy file uploading by dragging files into the drop area.
  • Interactive Feedback: Highlights the drop area during a drag operation and shows file details once a file is selected.
  • Size Validation: Validates the file size on the client side before submitting to the server.
  • Type Validation: Ensures that only allowed file types can be uploaded.
  • Auto Submit: Optionally auto-submits the form once a file is selected.

Installation

To install DroppableFileInput, you can download it directly from GitHub or use pip:

pip install git+https://github.com/blackbox-innovation/django-droppablefileinput.git

Setup

After installation, add droppablefileinput to your INSTALLED_APPS in your Django settings:

INSTALLED_APPS = [
...
'droppablefileinput',
...
]

Ensure you have Django's static file handling set up, as this widget relies on associated CSS and JavaScript files.

Usage

To use the DroppableFileInput in your Django forms, import the widget and use it in a form field:

from django import forms
from droppablefileinput.widgets import DroppableFileInput
class UploadForm(forms.Form):
file = forms.FileField(widget=DroppableFileInput())

In your templates, make sure to include the form's media:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Upload File</title>
    {{ form.media }}
  </head>
  <body>
    <form method="post" enctype="multipart/form-data">
      {% csrf_token %} {{ form.as_p }}
      <button type="submit">Upload</button>
    </form>
  </body>
</html>

Customization

The DroppableFileInput widget can be customized with the following parameters:

  • auto_submit: Whether to auto-submit the form upon file selection.
  • max_file_size: Maximum file size allowed for upload.
  • allowed_types: List of allowed file MIME types.
  • icon_url: URL to the icon image to display in the drop area.
  • icon_width: Width of the icon image.
  • icon_height: Height of the icon image.

Example:

class UploadForm(forms.Form):
    file = forms.FileField(widget=DroppableFileInput(
    auto_submit=True,
    max_file_size="10M",
    allowed_types="image/jpeg,image/png",
    icon_url=static('images/custom-icon.svg'),
    icon_width=40,
    icon_height=40
))

Contributing

Contributions are welcome! If you would like to contribute to this project, please follow these steps:

  • Fork the repository on GitHub.
  • Clone your forked repository to your local machine.
  • Create a new branch for your feature or fix.
  • Make changes and test.
  • Submit a pull request with a clear description of the changes and any relevant issue numbers.

License

Distributed under the MIT License. See LICENSE file for more information.

Support

If you have any issues or feature requests, please file an issue on the GitHub repository issue tracker.

Keywords

django
drag-and-drop
file
upload
widget

FAQs

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

11 Malicious Go Packages Distribute Obfuscated Remote Payloads

Research

/

Security News

11 Malicious Go Packages Distribute Obfuscated Remote Payloads

Socket uncovered 11 malicious Go packages using obfuscated loaders to fetch and execute second-stage payloads via C2 domains.

By Olivia Brown  -  Aug 06, 2025