Using Instagram API to make users populate images into my Django application directly from Instagram Pictures - django

Question

My use case or what I want to do is:
Users click a Upload button,
it authenticates user,
its shows Instagram images,
users select, and
user click upload button to upload images or videos (media) from
Instagram directly into my django app.
What I have done is:
Instagram integration:
pip install python-instagram
views.py:
#login_required()
def instagram_pictures(request, template='dashboard/add-instagram-pictures.html'):
user = request.user
gallery = []
gallery = Gallery.objects.filter(service_provider=user.service_provider_profile)
context = {'gallery': gallery}
return render(request, template, context)
#login_required()
def add_instagram_pictures(request, template='dashboard/add-instagram-pictures.html'):
access_token = "YOUR_ACCESS_TOKEN" # Dont know how this gets factored in for any user
client_secret = settings.SECRET_ID
api = InstagramAPI(access_token=access_token, client_secret=client_secret)
recent_media, next_ = api.user_recent_media(user_id="userid", count=10)
for media in recent_media:
print(media.caption.text)
template/my-gallery.html:
{% extends 'base.html' %}
{% load static %}
{% block title %}My Dashboard{% endblock %}
{% block content %}
<div class="page-header" style="background: url({% static 'img/banner1.jpg' %});">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="page-title">My Gallery</h1>
</div>
</div>
</div>
</div>
<div id="content">
<div class="container">
<div class="row">
{% include '_side_menu.html' %}
<div class="col-md-8 page-content">
<div class="inner-box text-center">
<a href="{% url 'dashboard:add-instagram-pictures' %}" class="btn btn-md btn-success">
<span class="fa fa-plus-circle"> Upload from Instagram</span>
</a>
<ul>
<!-- I will re-write this loop to redefine how images are rendered for the project. Maybe in Carousels-->
{% for p in photos %}
<li>{{ p.name }}</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
template/add-instagram-pictures.html:
{% extends 'base.html' %}
{% load static %}
{% block title %}Add Gallery{% endblock %}
{% block content %}
<div class="page-header" style="background: url({% static 'img/banner1.jpg' %});">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="page-title">Add Instagram Pictures</h1>
</div>
</div>
</div>
</div>
<div id="content">
<div class="container">
<div class="row">
{% include '_side_menu.html' %}
<div class="col-md-8 page-content">
<div class="inner-box text-center">
<a href="{% url 'dashboard:my-gallery' %}" class="btn btn-md btn-success">
<span class="fa fa-chevron-circle-left"> Back to Album List</span>
</a>
</div>
</div>
</div>
</div>
</div> {% endblock %}Add
url.py:
from django.conf.urls import url, include
from dashboard.views import dashboard, my_services, add_service, my_gallery, add_gallery, bank_profile, add_bank_profile, add_instagram_pictures
def ajax_photo_upload_view(args):
pass
urlpatterns = [
url(r'^$', dashboard, {}, name='home'),
url(r'^bank-profile/$', bank_profile, {}, name='bank-profile'),
url(r'^add-bank-profile/$', add_bank_profile, name='add-bank-profile'),
url(r'^my-services/$', my_services, name='my-services'),
url(r'^add-service/$', add_service, name='add-service'),
url(r'^add-gallery/$', add_gallery, name='add-gallery'),
url(r'^my-gallery/$', my_gallery, name='my-gallery'),
url(r'^add-gallery/$', add_instagram_pictures, name='add-instagram-pictures'),
]
settings.py:
# instagram settings
CLIENT_ID = "XXXXXXXXXXXXXXXXXXXX"
SECRET_ID = "XXXXXXXXXXXXXXXXXXXX"
How do I go about my use case as I have stated, my solution is in no way closer to what I want to do.