djangopython-3.xuploadcare

Pyuploadcare ImageField upload option is not visible at useredit html page


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


Solution

  • 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.