Skip to main content

A modern, Django FileField replacement that uploads files via AJAX.

Project description

django-ajax-filefield

⚠️ WARNING: Work in Progress

This package is under active development and is not ready for production use. APIs may change without notice. Use at your own risk.

A modern, Django FileField replacement that uploads files via AJAX instantly upon selection.

🌟 Overview

django-ajax-filefield reimagines Django's native file handling, delivering a user experience that treats file uploads just like any other form fields. By implementing instant uploads, the package eliminates user frustration associated with traditional file fields.

This package features:

  • Instant Uploads: Files are uploaded via AJAX immediately upon selection, not when the form is submitted.
  • Progress Bar: Provides immediate visual feedback on the upload status, eliminating anxiety over large files.
  • Data Retention: Files are retained server-side and re-presented to the user upon form validation failure.
  • Unobtrusive Widget: Integrates cleanly with Django's form system and templates.

💔 Why Not Use Django's Default FileField?

The native FileField and its associated widgets suffer from several usability issues, especially in modern web applications and complex forms:

Problematic Behavior Pain Point
No Progress Feedback For large files, users have no way of knowing if the file upload is progressing or if the browser has frozen.
Late Validation File validation (e.g., size checks, type checks) is deferred until the user hits the final form submit button. If the file is invalid, the user only finds out after waiting for the upload.
File Field Cleared on Error This is arguably the most frustrating issue. If any other field in the form fails validation, the browser clears the file input field, forcing the user to pick and re-upload the file—even if the file itself was valid.
FormSet/Inline Admin Complexity This issue is compounded when dealing with Django FormSets or the admin's inline interface, where losing file context across multiple forms is a workflow killer.

django-ajax-filefield solves all of these problems by decoupling the file selection process from the form submission process.

🚀 Installation

  1. Install:

    pip install django-ajax-filefield

  2. Add to INSTALLED_APPS in your project's settings.py:

    INSTALLED_APPS = [
        # ... other apps
        'ajax_filefield',
    ]
    
  3. Configure the upload URL in your urls.py:

    # urls.py
    from django.urls import path
    from ajax_filefield.views import AjaxUploadView
    
    urlpatterns = [
        # ... other urls
        path('ajax-upload/', AjaxUploadView.as_view(), name='ajax_upload'),
    ]
    

💡 Usage

Simply use the custom field in your Django form, specifying the upload_view_name:

Forms

# forms.py
from django import forms
from ajax_filefield import AjaxFileField

class DocumentForm(forms.Form):
    title = forms.CharField(max_length=100)
    document = AjaxFileField(upload_view_name='ajax_upload')

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

django_ajax_filefield-0.1.1.tar.gz (18.2 kB view details)

Uploaded Source

Built Distribution

If you're not sure about the file name format, learn more about wheel file names.

django_ajax_filefield-0.1.1-py3-none-any.whl (20.9 kB view details)

Uploaded Python 3

File details

Details for the file django_ajax_filefield-0.1.1.tar.gz.

File metadata

File hashes

Hashes for django_ajax_filefield-0.1.1.tar.gz
Algorithm Hash digest
SHA256 ce111acd12de003800fd0a87cb9c15d688154eadadac56f6dcd753ee77dacc46
MD5 760504cc56ad986a683fc271df66a25a
BLAKE2b-256 cc0664ef259a9e3d54e30e54d7c76115545b3a3be3774bf2566c5759106522af

See more details on using hashes here.

File details

Details for the file django_ajax_filefield-0.1.1-py3-none-any.whl.

File metadata

File hashes

Hashes for django_ajax_filefield-0.1.1-py3-none-any.whl
Algorithm Hash digest
SHA256 c5a20ebb26d786a305887df1d8e0546321a57917e4f88678c9389eec9a575137
MD5 4f08e4a10cff8662c32f08348df4633e
BLAKE2b-256 7995a0ff2c65c97c809d8aa2e03849eda7c3fed3dec6583a180abab02310fdca

See more details on using hashes here.

Supported by

AWS Cloud computing and Security Sponsor Datadog Monitoring Depot Continuous Integration Fastly CDN Google Download Analytics Pingdom Monitoring Sentry Error logging StatusPage Status page