Django Cloudinary Form Field Display Image

29 views Asked by At

I would like to change the way a Cloudinary field is displayed. By defauly, a link is supplied for the user to see the current image. I would like to display the image directly on the page. Can anyone advise as to how to approach this?

Model:

class UserProfile(models.Model):
    user = models.OneToOneField(User, on_delete=models.CASCADE, null=True,
                             blank=True)
    image = CloudinaryField('image', null=True, blank=True)
    created = models.DateTimeField(auto_now_add=True)
    updated = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        field_values = []
        for field in self._meta.get_fields():
            field_values.append(str(getattr(self, field.name, '')))
        return ' '.join(field_values)

    class Meta:
        ordering = ['image']

Form:

class UserProfileForm(ModelForm):
    class Meta:
        model = UserProfile
        fields = ['image']

View:

def update_profile(request):
    try:
        profile = UserProfile.objects.get(user=request.user)
    except UserProfile.DoesNotExist:
        profile = None

    form = UserProfileForm(instance=profile)

    if request.method == 'POST':
        form = UserProfileForm(request.POST, request.FILES, instance=profile)

        if form.is_valid():
            form.save()

            return redirect('.')

    context = {'form': form}

    return render(request, 'profile.html', context)

HTML:

                    <form class="m-1 p-2" method="POST" enctype="multipart/form-data" action=''>
                        {% csrf_token %}
                        <div class="row mb-5">
                            <div class="col">
                                {{ form.image }}
                            </div>
                        </div>
                        <input id="submit-button" class="btn btn-primary" type="submit" value="&nbsp;Save&nbsp;">
                    </form>

The current rendering is:

Current

I would like something like this:

required

Thanks in advance.

Steve

0

There are 0 answers