Как я могу стилизовать кнопку поля файла на django? - PullRequest
Новая
       23

Как я могу стилизовать кнопку поля файла на django?

0 голосов
/ 02 мая 2020

Я пытался стилизовать кнопку загрузки файлового поля, но, поскольку она запускается на файле forms.py, а не на html, даже при нашем исследовании я все еще не знаю, как это сделать. Есть ли способ, которым я могу стиль кнопки? Ну, цель состоит в том, чтобы попытаться создать значок вместо кнопки.

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 (мне не хватает posti = form.ImageField под текстовой переменной) 

    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 (Публикация изображения в представлении списка изображений) 

    <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>

Ответы [ 2 ]

0 голосов
/ 03 мая 2020

Я нашел ответ на свою проблему, я просто добавил немного javascript, которое решило мою проблему. 

    <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>
0 голосов
/ 02 мая 2020 
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...'
            }),
        }
...