Pyuploadcare ImageField upload option is not visible at useredit html page

Question

I have integrated the Pyuploadcare module in my django App. I have added an ImageField in the models.py of my application as shown below. Image upload for cover field is not displayed in the edit page accessed by the individual user.

where as the pyuploadcare API integration is working fine from the admin console of django.

from pyuploadcare.dj.models import ImageField

class Profile(models.Model):
    user = models.OneToOneField(settings.AUTH_USER_MODEL, 
                                             on_delete=models.CASCADE)
    date_of_birth = models.DateField(blank=False, null=True)
    img = models.ImageField(upload_to=upload_to, blank=True, db_index=True)
    slug = models.SlugField(max_length=200, blank=True)
    cover = ImageField(blank=True, manual_crop="")

The User_edit page is shown below:

<pre>
{% block content %}
    <div class="edit-form">
        <h1>Edit your account</h1>
        <p>You can edit your account using the following form:</p>
        <form action="." method="post" enctype="multipart/form-data" id="controlForm">
            {{ user_form.as_p }}
            {% csrf_token %}
            {{ profile_form.as_p}}
            <p><input type="submit" value="Save changes"></p>
        </form>
    </div>
{% endblock %}
</pre>

I have tried updating the form that is generated from forms.py shown below


class ProfileEditForm(forms.ModelForm):
     cover = ImageField(label='')

    class Meta:
         model = Profile
         fields = ('date_of_birth', 'img', 'cover')
         widgets = {
                'date_of_birth': DateInput(),
         }

The form generates the cover with type hidden

Expected result is

<tr><th></th><td><input type="file" name="cover" value="https://ucarecdn.com/182065fa-d558-47e5-beb6-0d0c3dd8baf2/" role="uploadcare-uploader" data-public-key="bce890ec49219565dc75" data-integration="Django/2.1.7; PyUploadcare-Django/2.6.0" data-images-only="" re
quired id="id_cover"></td></tr>

The actual results is captured during the page rendering from views.py

actual result is :

<tr><th></th><td><input type="hidden" name="cover" value="https://ucarecdn.com/182065fa-d558-47e5-beb6-0d0c3dd8baf2/" role="uploadcare-uploader" data-public-key="bce890ec49219565dc75" data-integration="Django/2.1.7; PyUploadcare-Django/2.6.0" data-images-only="" re
quired id="id_cover"></td></tr>

the result are captured from views.py where the profile form i generated

For reference the Github link is provided below, Application Name impacted is Accounts. https://github.com/bikirandas/OmexOnline

Issue also created for the same in GIthub at the below link https://github.com/bikirandas/OmexOnline/issues/5

what is the actual question here? your expected result is wrong, the field should be rendered as input type=hidden :) — Dmitry Mukhin, Mar 29 '19 at 10:24
maybe the issue is that you're not loading uploadcare widget library on the page and the hidden input is not taken care of it. — Dmitry Mukhin, Mar 29 '19 at 10:26
The actual issue is - That i am unable to upload image for the cover field option defined in my models.py file. the cover field is using pyuploadcare module for image upload. The same option is available in the django admin interface but not available when the user is trying to edit the profile from the useredit page. — Bikiran Das, Mar 29 '19 at 10:27
@DmitryMukhin yes i am facing issue with the hidden input. The form generates input type as "Hidden" — Bikiran Das, Mar 29 '19 at 10:28
@DmitryMukhin - You can check my Expected result and Actual result code. You will get to know the issue. — Bikiran Das, Mar 29 '19 at 10:30
Yes I got that, see my answer. You can check that I'm right by inspecting what is being actually rendered on your admin page. It will be input type=hidden :) — Dmitry Mukhin, Mar 29 '19 at 10:42

score 1 · Accepted Answer · answered Mar 29 '19 at 10:40

The actual result in rendered HTML is indeed an expected result, if you're using pyuploadcare.dj.models.ImageField your actually capture strings that contain CDN URLs for uploaded files from your users.

Most likely, you forgot to load javascript library to your page. Just add this to your template:

<script>
  UPLOADCARE_PUBLIC_KEY = '*your key*';
</script>
<script src="https://ucarecdn.com/libs/widget/3.x/uploadcare.full.min.js"></script>

And it will work the same as on admin page. On admin page those media are being loaded automatically.

Pyuploadcare ImageField upload option is not visible at useredit html page

1 Answers1