django-bulma Image upload button doesn't work.

Hi! I really like how forms look with the "bulma" tag. Only problem is, that I can't upload images, which works fine in django's admin panel. form_base.html:

{% load bulma_tags %}

<form method="post">
  {% csrf_token %}
  {{ form|bulma }}

  <div class="field is-grouped">
    <div class="control">
      <input class="button is-link" type="submit" value="Zatwiedź">
    </div>
    <div class="control">
      <a href="{{ request.META.HTTP_REFERER }}" class="button is-danger">Anuluj</a>
    </div>
  </div>
</form>

article_update_form.html:

{% extends "adminpanel/base.html" %}

{% block content %}

{% include 'adminpanel/forms/form_base.html' %}

{% endblock %}

base.html :

{% load pwa %}
{% load static %}

<!DOCTYPE html>
<html lang="en">

<head>
  {% progressive_web_app_meta %}
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  {% block meta_description %}{% endblock %}
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
    integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  <link rel="stylesheet" href="{% static 'bulma/css/style.min.css' %}">
  <link rel="stylesheet" href="{% static 'css/website.css' %}">
  <title>{% block title %}Panel administratora{% endblock %}</title>
</head>

<body>
  {% include "adminpanel/includes/header.html" %}
  
  <section class="section">
    <div class="container">
      <div class="columns">

        <!-- Sidebar -->
        <div class="column is-3">
          {% include "adminpanel/includes/admin-sidebar.html" %}
        </div>

        <!-- Content -->
        <div class="column is-9">
          {% block content %}{% endblock %}
        </div>
      </div>
    </div>
  </section>

  {% include "adminpanel/includes/footer.html" %}

  <!-- Javascript -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
  <script src="{% static 'jquery/js/jquery-3.4.0.min.js' %}"></script>
</body>

</html>

gif

Apr 25 '19 12:04 lomber1

Hi @AmazingMorbid ,

I ran into the same problem today. I tried changing the Django Clearable File Input template but unfortunately the way it is sitting in the div class, it wasn't rendering nicely.

What I ended up doing was editing django-bulma bulma_tags.py and remove the is_file filter and also commenting out in the field.html. So my one is using just a browser standard file input. It's not as pretty as it could be, but it's good enough for me.

Maybe someone in the future can solve this issue, it would be amazing once they do.

Aug 21 '20 12:08 dearandrewkim

@dearandrewkim I'm currently working on the updated field handling for Django bulma, hope will release it soon and will solve this issue too.

Aug 21 '20 13:08 timonweb

Very excited! Looking forward to it and thanks again for the awesome repo.

Aug 21 '20 13:08 dearandrewkim

Not sure if you are still planning on updating django-bulma, but the support for the file field would be appreciated! Thanks!

Jan 23 '23 21:01 stribny

django-bulma django-bulma copied to clipboard

Image upload button doesn't work.

django-bulma
django-bulma copied to clipboard