概要
djangoにてwidget_tweaksを用いてformをtemplateに表示させてcssを適用させています。
しかし画像アップロードがformのデフォルト設定が出てきてしまい、うまく表示できていません。
「アイコンを選択」の箇所を押したらアップロードできるようにしたいです。
一通り検索したのですが、どこにも情報がなく、、、。
わかる方教えていただけると嬉しいです。
うまくいってない画面
コード
html
1 <div class="custom-file"> 2 <div class="upload-portfolio-image-btn"> 3 <label class="custom-file-label" for="customFile">アイコンを選択</label> 4 </div> 5 {% render_field form.icon class="custom-file-input upload-portfolio-image" id="customFile" %} 6 <hr> 7 <div class="form-row portfolio-image-group"> 8 <!-- ここで画像をプレビュー --> 9 </div> 10 </div>
forms.py
1class ProfileForm(forms.ModelForm): 2 def __init__(self, *args, **kwargs): 3 super(ProfileForm, self).__init__(*args, **kwargs) 4 for field in self.fields.values(): 5 field.widget.attrs["class"] = "form-control" 6 field.widget.attrs['placeholder'] = field.label 7 8 username = forms.CharField(required=True, label="username") 9 CHOICES = ( 10 ('female', '女の子',), 11 ('male', '男の子',), 12 ) 13 gender = forms.ChoiceField(widget=forms.RadioSelect, choices=CHOICES, required=True) 14 15 age = forms.IntegerField(validators=[MinValueValidator(12), MaxValueValidator(120)], required=False, label=20) 16 17 CHOICES2 = ( 18 ('PS4', 'PS4',), 19 ('PC', 'PC',), 20 ('swich', 'swich',), 21 ('xbox', 'xbox',), 22 ('mobile', 'スマホ',) 23 ) 24 game_device = forms.MultipleChoiceField(widget=forms.CheckboxSelectMultiple, choices=CHOICES2, required=False) 25 26 CHOICES3 = ( 27 ('OK', 'できる'), 28 ('Friend', '仲良くなってから'), 29 ('Listen_only', '聞き専',), 30 ('TIME', '時間による',), 31 ('NG', 'できない',) 32 ) 33 voice = forms.MultipleChoiceField(widget=forms.CheckboxSelectMultiple, choices=CHOICES3, required=False) 34 35 CHOICES4 = ( 36 ('discode', 'discode'), 37 ('line', 'line'), 38 ('skype', 'skype',), 39 ('kakao', 'カカオトーク',), 40 ('NG', 'できない',) 41 ) 42 voice_device = forms.MultipleChoiceField(widget=forms.CheckboxSelectMultiple, choices=CHOICES4, required=False) 43 44 CHOICES5 = ( 45 ('gati', 'ガチ'), 46 ('enjoy', 'エンジョイ'), 47 ('which', 'どちらでも',), 48 ) 49 play_style = forms.MultipleChoiceField(widget=forms.CheckboxSelectMultiple, choices=CHOICES5, required=False) 50 play_time = forms.CharField(max_length=50, required=False, label='平日は夜・休日は一日中') 51 52 CHOICES6 = ( 53 ('1', '1 はじめて'), 54 ('2', '2 苦手'), 55 ('3', '3 普通'), 56 ('4', '4 得意',), 57 ('5', '5 職人',) 58 ) 59 craft_level = forms.ChoiceField(widget=forms.RadioSelect, choices=CHOICES6, required=False) 60 61 one_message = forms.CharField(max_length=200, required=False, label='よろしくね!') 62 63 # 後で追加情報追記 64 class Meta: 65 model = Profile 66 fields = ( 67 'username', 'icon', 'gender', 'age', 'game_device', 'voice', 'voice_device', 'play_style', 'play_time', 68 'craft_level', 'one_message')
models.py
1class Profile(models.Model): 2 # 性別,年齢,ゲームデバイス,通話可能か,通話デバイス,プレイスタイル,プレイ時間帯,建築レベル,一言メッセージ 3 id = models.OneToOneField(User, primary_key=True, on_delete=models.CASCADE) 4 username = models.CharField(_('user name'), null=True, max_length=20, blank=True) 5 icon = models.ImageField(default='/icon/default.jpg', blank=True, null=True, upload_to='icon') 6 gender = models.CharField(max_length=20, null=True, blank=True) 7 age = models.IntegerField(validators=[MinValueValidator(12), MaxValueValidator(120)], null=True, blank=True) 8 game_device = models.CharField(max_length=30, null=True, blank=True) 9 voice = models.CharField(max_length=30, null=True, blank=True) 10 voice_device = models.CharField(max_length=30, null=True, blank=True) 11 play_style = models.CharField(max_length=30, null=True, blank=True) 12 play_time = models.CharField(max_length=30, null=True, blank=True) 13 craft_level = models.CharField(max_length=30, null=True, blank=True) 14 one_message = models.CharField(max_length=200, null=True, blank=True) 15 16 def __str__(self): 17 return self.username
あなたの回答
tips
プレビュー