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.
Project description
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. This uses no external JavaScript dependencies, all functionality is brought by this package.
- Github repository: https://github.com/blackbox-innovation/django-droppablefileinput/
- Documentation: https://blackbox-innovation.github.io/droppablefileinput/
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.
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Filter files by name, interpreter, ABI, and platform.
If you're not sure about the file name format, learn more about wheel file names.
Copy a direct link to the current filters
File details
Details for the file droppablefileinput-0.1.1.tar.gz.
File metadata
- Download URL: droppablefileinput-0.1.1.tar.gz
- Upload date:
- Size: 54.9 kB
- Tags: Source
- Uploaded using Trusted Publishing? No
- Uploaded via: uv/0.5.13
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
0097b0e1c13b7811305b7cb3714b9f792fca0986a7ec6500e6708823434b3771
|
|
| MD5 |
43f2c83376d8ddc0888495213b19a619
|
|
| BLAKE2b-256 |
8c2e03c9bdd4fc05b7830cf35923e414bde94101e0c08e52bb9be92a57bb96d1
|
File details
Details for the file droppablefileinput-0.1.1-py3-none-any.whl.
File metadata
- Download URL: droppablefileinput-0.1.1-py3-none-any.whl
- Upload date:
- Size: 14.6 kB
- Tags: Python 3
- Uploaded using Trusted Publishing? No
- Uploaded via: uv/0.5.13
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
aa5032a6808844ec96fcf83c2601626e8179dd55d42a7b0b42baad880e5697f0
|
|
| MD5 |
d42a74342c0e0ec6077749eeef6055ac
|
|
| BLAKE2b-256 |
a52088a228247842979aaf0195cd2523b4748ad6e1b2d6709a9ee435ff505998
|
