Image upload button doesn't work.

lomber1 commented 5 years ago

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

dearandrewkim commented 4 years ago

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.

timonweb commented 4 years ago

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

dearandrewkim commented 4 years ago

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

stribny commented 1 year ago

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

timonweb / django-bulma

Image upload button doesn't work. #30