Question

I am making a Django app which allows users to upload pictures via the admin interface and then access the URL of those images via an API endpoint. On the admin interface, the user should be presented with the Filepicker.io widget (to enable drag and drop functionality, etc.) and the file should be uploaded to S3. I have already entered my S3 credentials into the Filpicker admin page of my account.

My question is how to bring all these elements together. Here the appropriate files from my project:

# models.py
from django.db import models
from django_filepicker.models import FPFileField

# Add field introspection for FPFileField 
# See http://south.aeracode.org/wiki/MyFieldsDontWork
from south.modelsinspector import add_introspection_rules
add_introspection_rules([], ["^django_filepicker\.models\.FPFileField"])

class Product(models.Model):
    product_logo = FPFileField(upload_to='uploads')

---

# forms.py
from django import forms
from django_filepicker.forms import FPFileField
from django_filepicker.widgets import FPFileWidget
from example.models import Product

class ProductForm(forms.ModelForm):
    class Meta:
        model = Product

    def __init__(self, *args, **kwargs):
        self.fields['product_logo'] = FPFileField(widget = FPFileWidget)
        super(ProductForm, self).__init__(*args, **kwargs)

---

# views.py
from django.http import HttpResponse
from example.models import Product
import json

def example_view():
    result = []
    products = Product.objects.all()
    for product in products:
        # I want the S3 URL here!
        result.append(product.product_logo.url)
    return HttpResponse(json.dumps(result, indent=2))

My problems are:

1. The Django admin interface displays the normal Django FileField widget, whereas I want the FPFileWidget instead
2. I want the image files to upload to S3 (not the /media directory of my site)
3. I want to retrieve the S3 URLs not the /media/xxxx URLs.

For example, a typical response is currently this:

[
  "/media/uploads/fp-file", 
  "/media/uploads/fp-file_1", 
  "/media/uploads/fp-file_2", 
  "/media/uploads/fp-file_3", 
  "/media/uploads/fp-file_4", 
  "/media/uploads/fp-file_5"
]

But I want something like:

[
  "https://s3-ap-southeast-2.amazonaws.com/XXXXXXXXX/TBtOcRSNyBAZZuNBFOpA_blah.png", 
  "https://s3-ap-southeast-2.amazonaws.com/XXXXXXXXX/8ODleDuKRIOAglFs0sKl_etc.png", 
]

---

Answer 1

You will need to change DEFAULT_STORAGE_BACKEND to an s3 storage backend. Please have a look at amazon-S3 backend of django-storages.

For using FPFileWidget on admin panel, please have a look at Django Admin: Using a custom widget for only one model field.

Changing these two settings should work for you.