Upload images with Django and Whitenoise

Question

i have just deployed a web using Django on Heroku with static files served by whitenoise. All the static files created before deploying works fine but if i want to upload new image (from both admin page and custom form) the image can not be found like below. Any help would be appreciated

Can find the image

settings.py

STATIC_URL = '/staticfiles/'

STATIC_ROOT = BASE_DIR / 'staticfiles'

STATICFILES_STORAGE = 'whitenoise.storage.CompressedStaticFilesStorage'

STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

MEDIA_URL = '/staticfiles/assets/images/'

MEDIA_ROOT = os.path.join(BASE_DIR, 'staticfiles/assets/images')

urls.py

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('accounts.urls')),
]

urlpatterns += static(settings.STATIC_URL, document_root = settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL, document_root = settings.MEDIA_ROOT)

models.py

class ProductImages(models.Model):
    product = models.ForeignKey(Product, on_delete=models.SET_NULL, null=True)
    img = models.ImageField(null=True, default= 'default_product_image.jpg',blank=True)

    class Meta:
        verbose_name_plural = "Product Image"

I tried uploading from both admin page and form that enable user to upload images but both result the same

Answer 1

Heroku is primarily a hosting platform that specializes in deploying web applications. It provides a platform-as-a-service (PaaS) solution, making it easy for developers to deploy, manage, and scale web applications without dealing with server management. You can't use Heroku to store all your images and video, you can only use it for deploying web application, but you can use Heroku and Cloudinary together to manage your media files.

Cloudinary , is a cloud-based media management platform. Developers often use Cloudinary to store and manipulate media assets in their applications. It's a fantastic choice if your application relies heavily on images and videos.