Photo not uploading to post

[ShadowXG]

What stack are you using?

(ex: MERN(mongoose + react), DR(django + react), PEN, etc.)

Django, Python

What's the problem you're trying to solve?

giving the post a picture

Post any code you think might be relevant (one fenced block per file)

def want_photo(request, post_id):
    return render(request, 'main_app/add_photo_form.html', { 'post_id': post_id })

@login_required
def add_photo(request, post_id):
    # photo-file will be the name attribute of our form input
    photo_file = request.FILES.get('photo-file', None)
    # use conditional logic to make sure a file is present
    if photo_file:
        print('testing \n testing \n testing')
        # S3_BASE_URL
        # if present, we'll use this to create a reference to the boto3 client
        s3 = boto3.client('s3', aws_access_key_id=AWS_ACCESS_KEY, aws_secret_access_key=AWS_SECRET_ACCESS_KEY)
        # create a uniqu key for our photos
        key = uuid.uuid4().hex[:6] + photo_file.name[photo_file.name.rfind('.'):]
        try:
            # if success
            s3.upload_fileobj(photo_file, S3_BUCKET, key)
            # build the full url string to upload the s3
            url = f"{S3_BASE_URL}{S3_BUCKET}/{key}"
            # if our upload was successful
            # we want to ust that photo location to creat a Photo model
            photo = Photo(url=url, post_id=post_id)
            # save the photo to the db
            print(photo)
            photo.save()
        except Exception as error:
            # print an error message
            print('Error uploading photo', error)
            return redirect('index')
    return redirect('index')

If you see an error message, post it here. If you don't, what unexpected behavior are you seeing?

No error, the image doesn't get added to the post

What is your best guess as to the source of the problem?

Probably doing the routing wrong

What things have you already tried to solve the problem?

Not much, Not sure what to change

For extra reference

add_photo_form

{% extends 'base.html' %}

{% block content %}
    <h1>Add Photo to {{ post.title }}</h1>
    <form method="POST" action="{% url 'add_photo' post_id %}" enctype="multipart/form-data">
        {% csrf_token %}
        <label for="photo">Photo:</label>
        <input type="file" name="photo-file">
        <br><br>
        <input type="submit" class="btn blue lighten-1" value="Upload Photo">
    </form>
    <a href="{% url 'index' %}" class="btn blue lighten-1">No</a>
{% endblock %}

urls

    path('posts/<int:post_id>/want_photo/', views.want_photo, name='want_photo'),
    path('posts/<int:post_id>/add_photo/', views.add_photo, name='add_photo'),

Paste a link to your repository here https://github.com/ShadowXG/capstone-project

[timmshinbone]

What does this print message display?

 print(photo)

[ShadowXG]

It prints a link to the image on aws.

[timmshinbone]

with no relation to the post model?

[ShadowXG]

It knows the post id it has that in there as well.

[timmshinbone]

Share the view for the detail page of the parent element of the photo

[ShadowXG]

I guess for us that's the post index

{% extends 'base.html' %}
{% block content %}
    <h1>Post List</h1>

    {% for post in posts %}
        {% with post.replies.all as replies %}
        {% with reply_count=replies.count %}
        <div class="card">
            <div class="card-content">
                <p class="float-right" style="float: right">posted: {{post.created_date}}</p>
                <span class="card-title">{{ post.title }}</span>

                <img src="{{ photo.url }}" alt="blog photo" class="responsive-img card-panel">

                <form 
                class="card-panel"
                action="{% url 'add_photo' post.id %}"
                method="POST"
                enctype="multipart/form-data" 
            >
                {% csrf_token %}
                <input type="file" name="photo-file" />
                <br/><br/>
                <input type="submit" class="btn blue lighten-1" value="Upload Photo"/>
            </form>
                <p>Body: {{ post.body }}</p>
            </div>
            <div class="card-action">
                <div class="row">
                    {% if request.user == post.user %}
                        <div class="col s6">
                            <a href="{% url 'posts_update' post.id %}" class="blue-text text-lighten-2">Edit</a>
                            <a href="{% url 'posts_delete' post.id %}" class="blue-text text-lighten-2">Delete</a>
                        </div>
                        <div class="col s6 right-align">
                            <form method="POST" action="{% url 'toggle_like' post_id=post.id %}" class="float-right" title="Like">
                                {% csrf_token %}
                                <button type="submit" class="btn btn-sm {% if request.user in post.likes.all %}btn-primary{% else %}btn-secondary{% endif %}">
                                    {% if request.user in post.likes.all %}
                                        <i class="fas fa-heart red-text"></i>
                                    {% else %}
                                        <i class="far fa-heart black-text"></i>
                                    {% endif %}
                                </button>
                            </form>
                        </div>
                    {% else %}
                        <div class="col s12 right-align">
                            <form method="POST" action="{% url 'toggle_like' post_id=post.id %}" class="float-right">
                                {% csrf_token %}
                                <button type="submit" class="btn btn-sm {% if request.user in post.likes.all %}btn-primary{% else %}btn-secondary{% endif %}" title="Like">
                                    {% if request.user in post.likes.all %}
                                        <i class="fas fa-heart red-text"></i>
                                    {% else %}
                                        <i class="far fa-heart black-text"></i>
                                    {% endif %}
                                </button>
                            </form>
                        </div>
                    {% endif %}
                </div>
            </div>
            <div class="card-action" style="border-radius: 10px;">
                <button class="reply-button btn blue lighten-1" style="margin-bottom: 5px;"data-post-id="{{ post.id }}"><i class="material-icons right" title="Replies">sms</i>{{ reply_count }}</button>
                <form class="reply-form" id="reply-form-{{ post.id }}" method="POST" action="{% url 'add_reply' %}" data-post-id="{{ post.id }}">
                    {% csrf_token %}
                    <textarea name="content" placeholder="Your reply here..."></textarea>
                    <input type="hidden" name="post_id" value="{{ post.id }}">
                    <button type="submit" class="blue-text text-lighten-2" style="border: 2px solid #5da6fa;background-color: white; padding: 6px;">Reply</button>
                </form>
                <ul>
                    {% for reply in post.replies.all %}
                        <li class="card reply-card" style="padding: 12px" data-post-id="{{ post.id }}">{{ reply.user.username }}: {{ reply.content }}
                            {% if request.user == reply.user %}
                                <a href="{% url 'reply_delete' reply.id %}" class="blue-text text-lighten-2" style="float: right; margin-left: 10px;" title="Delete"><i class="material-icons">clear</i></a>
                                <a href="{% url 'reply_update' reply.id %}" class="blue-text text-lighten-2" style="float: right;" title="Edit"><i class="material-icons">edit</i></a>
                            {% endif %}
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
        {% endwith %}
        {% endwith %}
    {% endfor %}
    <style>
        .card {
            border-radius: 10px;
        }
    </style>
    <script>
        jQuery(document).ready(function() {
            jQuery('.reply-form').hide()
            jQuery('.reply-card').hide()
            jQuery('.reply-button').click(function() {
                let postId = jQuery(this).data('post-id')
                jQuery('#reply-form-' + postId).toggle()
                jQuery('.reply-card[data-post-id="' + postId + '"]').toggle()
            })
        })
    </script>
{% endblock %}

[ShadowXG]

the reason for the form in there was to test if that made a difference in the photo appearing

[timmshinbone]

I meant the view function I have a feeling you're not getting the data from the photo, you might need to say something like photo = Photo.objects.get(post_id=post.id) or something along those lines in the view function. take a look at the catcollector code for reference.

[timmshinbone]

and that line of code might not be the exact one you need, just something like it?