CODEWITHSUNDEEP
djangohtmlpython-3.5
Zanam
Zanam

Reputation: 4807

Creating forms with multiple input types

I am trying to create an input form field which can take text, images or videos as we see in Twitter.

I am trying the following:

from django import forms
from .models import Tweet

class TweetModelForm(forms.ModelForm):
    content = forms.CharField(label='',
                widget=forms.Textarea(
                        attrs={'placeholder': "Your message",
                            "class": "form-control"}
                    ))

Which produces enter image description here

However, I am trying to use the same input box so that user can upload image, video, GIFs or just type text in the box. I am not sure how to modify the above form field.

Edit: If it is not possible using Django, can this be done using HTML5?

Upvotes: 4

Views: 275

Answers (3)

Jeffrey Chidi
Jeffrey Chidi

Reputation: 351

enter image description here

You should use a WYSIWYG Editor for that like Froala Editor

Usage

from django import forms
from froala_editor.widgets import FroalaEditor

 class PageForm(forms.ModelForm):
     content = forms.CharField(widget=FroalaEditor)

Upvotes: 4

Devang Padhiyar
Devang Padhiyar

Reputation: 3697

For adding file upload in Django form you need to add FileField into your form class.

Update your forms.py as below.

from django import forms
from .models import Tweet

class TweetModelForm(forms.ModelForm):
    content = forms.CharField(label='',
                widget=forms.Textarea(
                        attrs={'placeholder': "Your message",
                            "class": "form-control"}
                    ))
    file = forms.FileField(label="Upload file", blank=True)

This would render separate file field that user could upload images and other files.

Upvotes: 0

Mikey Lockwood
Mikey Lockwood

Reputation: 1261

Have you tried using a WYSIWYG plugin? Django summernote might work https://github.com/summernote/django-summernote

You could then set the widget to SummernoteWidget in the form

Upvotes: 0

Related Questions