0

I have an Django app that displays user uploaded images on the home page. I've used filepicker.io to handle the uploads, then store them in my Amazon S3 Bucket.

Problem is, when I try to serve them online, they aren't displaying correctly, b/c filepicker adds a unique key into the name of the file after uploading.

ie Uploaded file is called : milkshake.jpg.

after uploaded into S3 with filepicker, file is named : 97oj3Y12TIWylfhwlqtT_milkshake.jpg

An example file is hosted here: https://s3.amazonaws.com/mrt-static/97oj3Y12TIWylfhwlqtT_milkshake.jpg

When clicking on the image on the site, the URL it loads is this: https://s3.amazonaws.com/mrt-static/media/milkshake.jpg

How do I serve this on my site? Code below

#models.py
class Movie(models.Model):
poster          = django_filepicker.models.FPFileField(upload_to='movie_poster')
#also, not uploading to the folder in the bucket (called movie_poster), just uploading into the bucket

#home.html
<img src = "{{ MEDIA_URL }}{{ movie.poster }}">

#settings.py
MEDIA_URL = 'https://s3.amazonaws.com/mrt-static/'
agassi0430
  • 1,155
  • 1
  • 13
  • 31

1 Answers1

2

The right way to doing this in your template code is to do this:

<img src = "{{ movie.poster.url }}">
Siddharth Sarda
  • 486
  • 2
  • 7
  • thanks, appreciate it, but doesn't answer my question. do you know what to do? – agassi0430 Nov 14 '12 at 03:41
  • Does putting this in your template code not solve your problem? It should. The url will have the random key attached to it and the image will show up. – Siddharth Sarda Nov 14 '12 at 03:53
  • no, when I do that the URL that the image wants to pull from is https://s3.amazonaws.com/mrt-static/https://s3.amazonaws.com/mrt-static/media/cloudatlas.jpg. I tried removing MEDIA_URL so that the HTML reads and then it wants to pull from https://s3.amazonaws.com/mrt-static/media/cloudatlas.jpg, without the random key. any idea why? thanks – agassi0430 Nov 14 '12 at 04:09
  • Can you please describe how have you set up S3 and Filepicker integration? – Siddharth Sarda Nov 14 '12 at 05:32
  • sure. haven't done much except go to filepicker.io developer dashboard, and enter my S3 Key ID, my S3 Secret Access Key, and my S3 Bucket Name. I tested the S3 settings and it worked. Other than that, I added into the bottom of my HTML page where the file is being uploaded. I haven't done other than that. – agassi0430 Nov 14 '12 at 06:24
  • Also added my FILEPICKER_API_KEY = 'myapikey' to the bottom of settings.py – agassi0430 Nov 14 '12 at 06:27
  • I just suggest you create an issue here https://github.com/Filepicker/django-filepicker/issues as it definitely looks an error on their end. – Siddharth Sarda Nov 14 '12 at 11:53