How can I style the filefield button on django?

Question

I have been trying to style the filefield upload button but since it is run on the forms.py and not on the html, even with ours of investigation, I still don't know how to do it. Is there any way I can style the button? Well the goal is trying to have an icon instead of a button.

models.py

    class Post(models.Model):
        text = models.CharField(max_length=200)
        posti = models.ImageField(upload_to='media/images', null=True, blank="True")
        user = models.ForeignKey(User, related_name='imageuser', on_delete=models.CASCADE, default=2)

forms.py (I am missing the posti = form.ImageField under the text variable)

    class PostForm(forms.ModelForm):
        text = forms.CharField(widget=forms.TextInput(
            attrs={
                'class': 'form-control',
                'placeholder': 'Add a comment...'
            }
            ))
        class Meta:
            model = Post
            fields = ('text', 'posti')
            exclude = ['author']

uploadimage.html (It posts the image on the imagelist view)

    <div class="container" style="margin-top: 200px; margin-left:50px;">
        <form method="POST" enctype="multipart/form-data">
            {% csrf_token %}
            <div id="formtext" class="overflow-hidden" type="input">{{ form.text }}</div>
            <div id="formimage" class="overflow-hidden" type="button">{{ form.posti }}</div>
            <button type="submit" class="btn btn-primary mb-2">submit</button>
        </form>
    </div>

Have you tried using css? https://stackoverflow.com/questions/14950238/can-you-style-html-form-buttons-with-css — Philip, May 02 '20 at 03:36

score 1 · Answer 1 · answered May 02 '20 at 05:31

1

class PostForm(forms.ModelForm):
    class Meta:
        model = Post
        fields = ('text', 'posti')
        exclude = ['author']
        widgets = {
            'text': forms.TextInput(attrs={
                'class': 'form-control',
                'placeholder': 'Add a comment...'
            }),
        }

answered May 02 '20 at 05:31

Blackdoor

922
1
6
12

that is runs the same code I have before, I have already custumize the textfield what I want is to customize the filefield. – Juan Martin Zabala May 02 '20 at 16:54
You should drop 'text' field item in Meta. – Blackdoor May 02 '20 at 23:33

score 0 · Accepted Answer · answered May 03 '20 at 02:12

I have found an answer to my problem well I just added some javascript that fixed my problem.

    <style>
    #custom-button {
        background: rgba(222, 184, 135, 0);
        border-radius: 10px;
        cursor: pointer;
        border: 0px;

    }
    #custom-button:hover {
        background: rgba(13, 177, 40, 0.226);
        border-radius: 10px;
        cursor: pointer;
        border: 0px;

    }
    #custom-text {
        display: None;
    }
</style>
<form method="POST" enctype="multipart/form-data">
    {% csrf_token %}
    <input type="text" name="text" class="form-control" placeholder="Add a comment..." required="" id="id_text">
    <input type="file" hidden="hidden" name="posti" accept="image/*" id="id_posti">
    <button type="button" id="custom-button"><i class="far fa-image"></i></button>
    <span id="custom-text">no file choosen, yet</span>
    <button type="submit" class="btn btn-primary mb-2">submit</button>
</form>
<script type="text/javascript">
    const realFileBtn = document.getElementById("id_posti");
    const customBtn = document.getElementById("custom-button");

    customBtn.addEventListener("click", function() {
        realFileBtn.click();
    });

</script>

How can I style the filefield button on django?

2 Answers2