Creating forms with multiple input types

Question

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

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?

To clarify, do you mean you want to display the image when the user uploads it? — user9727749
– user9727749, Commented Apr 6, 2019 at 13:58

Jeffrey Chidi · Accepted Answer · 2019-04-08 12:23:30Z

4

+25

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)

answered Apr 8, 2019 at 12:23

Jeffrey Chidi

3713 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mikey Lockwood · Accepted Answer · 2019-04-04 16:06:14Z

0

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

answered Apr 4, 2019 at 16:06

Mikey Lockwood

1,2611 gold badge11 silver badges22 bronze badges

Comments

Devang Padhiyar · Accepted Answer · 2019-04-05 04:50:02Z

0

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.

answered Apr 5, 2019 at 4:50

Devang Padhiyar

3,7153 gold badges25 silver badges42 bronze badges

1 Comment

Zanam Over a year ago

This method can upload the file but it doesn't create twitter kind of box where the image shows up in display immediately.

Collectives™ on Stack Overflow

Creating forms with multiple input types

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related