Question about mentions with image pulled from S3

[deronsizemore]

Hey! Back with another question. I've spent the last few days getting my uploads working with S3. Now that all my uploads are on S3, when I start typing a mention the mentions work fine except that with every key pressed, the image flickers. This behavior isn't present when I'm pulling image from my local server, only from S3. Any ideas why that might be? I'm currently on my local dev server (django site). So, not sure if this is just something with localhost or if it will also happen on production server.

[ivirabyan]

To diagnose this I'd recommend to use jQuery Autocomplete plugin alone, without mentions. Just make a simple autocomplete input, with list of images from s3, and look if they still flicker.

[deronsizemore]

So, I have the autocomplete working from my json data source but it's not displaying an image at all in my autocomplete drop down; it's only displaying the username. In the view I'm using that generates the json data, I'm appending value, image and uid to the returned json data source. I assume that autocomplete just doesn't understand my "image" value? I can't tell what it should be named.

If it helps, here's my view for that json data:

def mentions(request):
    # domain = 'http://' + str(request.META['HTTP_HOST']) + '/'
    data = MyProfile.objects.filter(user__username__startswith=request.GET.get('term'))[:5]

    mention_data = []
    for item in data:
        if item.mugshot:
            image = item.mugshot.url
        else:
            image = settings.USERENA_MUGSHOT_DEFAULT
        mention_data.append({
            'value': '%s' % (item.user.username),
            'image': image,
            'uid': '%s:%s' % (item.user.username, item.id),
        })

    return HttpResponse(json.dumps(mention_data), content_type='application/json')

[ivirabyan]

Can you post sample json data here?

[deronsizemore]

[{"image": "https://golfledger-dev.s3.amazonaws.com/uploads/mugshots/04f25b6f2e.jpg?Signature=OhKfJ1PjnT6xCNOovPowBryA6Fo%3D&Expires=1417718345&AWSAccessKeyId=AKIAJM7TD5KDKW4QLAUA", "uid": "deronsizemore:18", "value": "deronsizemore"}]

[ivirabyan]

I'm not familiar with amazon s3, but it seems like you're generating image url dynamically, and it's changing over time, or even on every request. I can tell this from the string: Expires=1417718345&AWSAccessKeyId=AKIAJM7TD5KDKW4QLAUA

If this is true, then browser has to load new image every time you type a character. I don't know why exactly those parameters are used, I tried https://golfledger-dev.s3.amazonaws.com/uploads/mugshots/04f25b6f2e.jpg without any args and it still works

[deronsizemore]

Thanks for that. You're correct, that was the problem. I'm using django-userena for my member profiles and for whatever reason, when I'm spitting out the user "mugshot" in my json view, it's also spitting out all that extra stuff from S3 in the url. Not sure why that is, but I was able to use some Python to remove everything after the ".jpg" in the URL and now it's working. I really appreciate all of your help.