Django-crispy-forms with bootstrap4 not showing selected result in browse file field

Question

Attempting to use bootstrap4 with django for forms. Installed crispy forms and and everything seems to work as I expected except for the browse file button selection functionality. When a file selection window comes up and file is choosen from explorer it does not show as selected it the field. However when the form is submitted everything works as expected and the file is uploaded. Am I missing a helper class setting? I could not find one that looked like it addresses this.

Any help is appreciated, details below.

rendered html

Environment:

Windows 10
bootstrap 4.3.1
Python 3.7.4
Django 2.2.5
Django crispy forms 1.8.0

Models.py

    from django.db import models

    # Create your models here.

    class Csvfile_model(models.Model):
        name = models.CharField(max_length=50)
        csv_file_name = models.FileField(upload_to='csv_file/')

forms.py

    from django import forms
    from crispy_forms.helper import FormHelper
    from .models import *

    class CsvForm(forms.ModelForm):
         helper = FormHelper()

         class Meta:
              model = Csvfile_model
              fields = ['name', 'csv_file_name']

views.py

    from django.shortcuts import render,redirect
    from django.http import HttpResponse
    from .forms import *
    # Create your views here.
    def csv_upload(request):
        if request.method == "POST":
            form = CsvForm(request.POST, request.FILES)
            if form.is_valid():
                form.save()
                return redirect('sucess')
        else:
            form = CsvForm()
        return render(request, 'csv_upload.html', {'form' : form})

    def sucess(request):
        return HttpResponse('sucessfully uploaded')

csv_upload.html


{% extends 'base.html' %}
{% load crispy_forms_tags %}
{% crispy form form.helper %}

{% block title %}Home{% endblock %}

{%block subject%} Pandas Profiler Home {% endblock %}

{% block content %}

        
                
                         CSV Upload
                        
                                
                                    {% csrf_token %}
                                    
                                         {% crispy form %}
                                         
                                             
                                         
                                     
                                 
                        
                
        

{% endblock %}

base.html





  {% block title %}Django Auth Tutorial{% endblock %}
  
  
  
  
  
  
  




  {% block subject %}  Django Auth Tutorial 
{% endblock %}
  Quick and dirt responsive website to do eploratory data analysis (EDA) 



  Menu
  
  
    
      
        Home
      
      
        About
      
      
        Contact Us
      
    
  



  
    
        {% block content %}
        {% endblock %}
    
  



  Pandas Profiler is an experiment using django, bootstrap to upload a file to a website, process that file and display the results back to the user withouth having to know python or pandas.  It's also great for lazy data scientests

settings.py

import os

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/2.2/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'y(9-(8p)v+s8!i#f0&4_@#zd#lw3qq9^fj@$e7vt(#&%7kih_o'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = []


# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',                                                                                                                                                  'django.contrib.staticfiles',                                                                                                                                               'csvfile.apps.CsvfileConfig',
    'crispy_forms',
]

...


# Internationalization
# https://docs.djangoproject.com/en/2.2/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.2/howto/static-files/

STATIC_URL = '/static/'

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
CRISPY_TEMPLATE_PACK = 'bootstrap4'

Brian Bishop · Accepted Answer

This is bootstrap4 functionality and not crispy. To correct this you need to add some javascript to interact with the form button and the filename field. Insert this at the bottom of your html file and it should work.

Django-crispy-forms with bootstrap4 not showing selected result in browse file field

Answers (1)

Related Questions