Django изменить кнопку ввода FileField и метку в форме Django - PullRequest
Новая
       3

Django изменить кнопку ввода FileField и метку в форме Django

0 голосов
/ 01 апреля 2020

Я пытаюсь избавиться от обычного представления загрузки файлов по умолчанию в наборе форм Django, мой подход заключается в том, чтобы прямо сейчас скрыть входной файл, а затем использовать метку и сделать эту метку кликабельной для загрузки файла, однако, сейчас, после нажатия на мой ярлык, ничего не может быть загружено, и окно выбора файла не появляется, я использую чистый CSS для этого текущего моего html шаблона:

HTML ФОРМА 

<form method="POST" data-url="{% url 'home:post-create' %}" class="post-create-form">
    {% csrf_token %}
        <div class="modal-header">
            <h5 class="modal-title" >Create a Post</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    <div class="modal-body" style="overflow-y: auto;">
        {{ form|crispy }}
        <button type="button" id="show-image-upload-inputs" class="btn btn-sm mr-auto btn-primary pb-1">
            <span><i class="fas fa-camera"></i></span>
        </button>
        <div id="image-upload-div" class="mt-1 mx-1" style="display: none;">

                <div class="d-flex justify-content-center">
                    {% for a_form in formset %}
                    <div class="pl-1">
                        <label for="file"><i class="mt-2 fas fa-plus fa-5x"></i></label>
                        {{ a_form }}
                    </div>
                    {% endfor %}
                </div>


        </div>
    </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Post</button>
    </div>
</form>


<style>
input[type='file'] {
    display: none;
}
label[for='file'] {
    padding-left: 2px;
    cursor: pointer;
    background-color: rgb(212, 231, 238);
    border: 1em;
    border-radius: 10px;
    width: 6em;
    height: 6em;
    text-align: center;
    opacity: 0.5;
    color:lightblue;
}
</style>

Django Просмотр 

@login_required
def post_create(request):
    data = dict()
    ImageFormset = modelformset_factory(Images,form=ImageForm,extra=4)
    if request.method == 'POST':
        form = PostForm(request.POST)
        formset = ImageFormset(request.POST or None, request.FILES or None)
        if form.is_valid():    
            post = form.save(False)
            post.author = request.user
            #post.likes = None
            post.save()
            for f in formset:
                try:
                    i = Images(posts=post, image=f.cleaned_data['image'])
                    i.save()
                except Exception as e:
                    break
            data['form_is_valid'] = True
            posts = Post.objects.all()
            posts = Post.objects.order_by('-last_edited')
            data['posts'] = render_to_string('home/posts/home_post.html',{'posts':posts},request=request)
        else:
            data['form_is_valid'] = False
    else:
        form = PostForm  
        formset = ImageFormset(queryset=Images.objects.none())     
    context = {
    'form':form,
    'formset':formset,
    }
    data['html_form'] = render_to_string('home/posts/post_create.html',context,request=request)
    return JsonResponse(data)

Мне было интересно, как вообще можно изменить FIleField в форме Django? Я хочу использовать свой текущий подход и переопределить метки, созданные формой Django, однако я не знаю, является ли это правильным выбором.

1 Ответ

2 голосов
/ 01 апреля 2020

Браузеры обычно предотвращают срабатывание поля файла, когда оно установлено на display: none или visibility: hidden, хотя существуют приемы, когда вы перемещаете поле файла за пределы порта просмотра с помощью position: fixed/absolute; left:-10000px и запускаете поле файла с помощью JS.

Если вы хотите полностью не использовать JS, вы можете использовать следующий прием, который использует только HTML / CSS: 

form {
    position: relative;
    width: 100px;
    height: 30px;
}
input {
    position: absolute;
    height: 100%;
    width: 100%;
    opacity: 0;
    z-index: 1;
}

label {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 0;

    /* Your styling here */
    border-radius: 10px;
    line-height: 30px;
    text-align: center;
    color: white;
    background-color: #0095ff;
}

input:hover + label {
    background-color: #0065ad;
}
<form>
    <input type='file' />
    <label>Upload File</label>
</form>

По сути, вы закрываете свою пользовательскую метку полем файла и делаете поле файла прозрачным.

...