image fields

.env

@@ -0,0 +1,3 @@
+CLOUDINARY_CLOUD_NAME=cccccccccccc
+CLOUDINARY_API_KEY=ccccccccccccccc
+CLOUDINARY_API_SECRET=ccccccccccccc

apps/core/migrations/0001_initial.py

@@ -0,0 +1,21 @@
+# Generated by Django 4.1.3 on 2023-02-13 03:09
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Image',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('image_url', models.URLField()),
+            ],
+        ),
+    ]

apps/core/models.py

@@ -1,3 +1,5 @@
 from django.db import models
 
 # Create your models here.
+class Image(models.Model):
+    image_url = models.URLField()

apps/core/urls.py

@@ -1,8 +1,9 @@
 from django.urls import path
 from django.contrib.auth import views
-from apps.core.views import logout_view, UsersList
+from apps.core.views import ImageViewSet, logout_view, UsersList
 
 urlpatterns = [
     path('api/v1/auth/logout/', logout_view, name='logout'),
     path('api/users/', UsersList.as_view(), name='api_get_users'),
+    path('api/upload_image/', ImageViewSet.as_view({'post': 'upload_image'}), name='api_upload_image'),
 ]

apps/core/views.py

@@ -1,14 +1,33 @@
+import os
 from rest_framework import generics
 from django.views.decorators.csrf import csrf_exempt
-
+from rest_framework import viewsets
+from rest_framework.response import Response
+from rest_framework.decorators import action
+import requests
+import json
 from django.contrib.auth.models import User
 
+from apps.core.models import Image
+
 from .serializers import UserSerializer
 from django.contrib.auth import logout
 from django.http import JsonResponse
+from cloudinary import uploader
+import cloudinary
 
-@csrf_exempt
+CLOUDINARY_CLOUD_NAME = os.environ.get('CLOUDINARY_CLOUD_NAME')
+CLOUDINARY_API_KEY = os.environ.get('CLOUDINARY_API_KEY')
+CLOUDINARY_API_SECRET = os.environ.get('CLOUDINARY_API_SECRET')
 
+cloudinary.config(
+  cloud_name = CLOUDINARY_CLOUD_NAME,
+  api_key = CLOUDINARY_API_KEY,
+  api_secret = CLOUDINARY_API_SECRET,
+  secure = True
+)
+
+@csrf_exempt
 def logout_view(request):
     logout(request)
     return JsonResponse({'message': 'Logged out successfully'}, status=200)
@@ -17,4 +36,13 @@ class UsersList(generics.ListAPIView):
     serializer_class = UserSerializer
 
     def get_queryset(self):
-        return User.objects.all()
+        return User.objects.all()
+
+class ImageViewSet(viewsets.ModelViewSet):
+    @action(detail=False, methods=['post'])
+    def upload_image(self, request):
+        image = request.data['file']
+        result = uploader.upload(image, upload_preset="ml_default")
+        image_url = result['secure_url']
+        Image.objects.create(image_url=image_url)
+        return Response({'image_url': image_url})

frontend/src/components/EditProfile.vue

@@ -2,6 +2,7 @@
     <div class="flex-col w-full bg-white dark:bg-slate-900 border-solid border-x-2 border-gray-100 dark:border-gray-700 max-[600px]:border-x-0" id="twikkerprofileapp">
         <div class="border-x-2 border-gray-100 dark:border-gray-700 max-[600px]:border-x-0">
             <div class="border-gray-100 border-y-2 dark:border-gray-700 pb-3">
+                <Image />
                 <div>
                     <div class="px-2 pb-1 border-gray-100 border-b-2 dark:border-gray-700 mt-2 mb-5">
                         <h1 class="text-xl">Edit profile</h1>
@@ -28,4 +29,8 @@
             </div>
         </div>
     </div>
-</template>
+</template>
+
+<script setup>
+import Image from '../components/Image.vue'
+</script>

frontend/src/components/Image.vue

@@ -0,0 +1,26 @@
+<template>
+    <div>
+        <input type="file" @change="uploadImage"/>
+        <img v-if="imageUrl" :src="imageUrl"/>
+    </div>
+</template>
+
+<script setup>
+import axios from 'axios'
+import { ref } from 'vue'
+
+const imageUrl  = ref('');
+
+async function uploadImage(event){
+    const file = event.target.files[0];
+    const formData = new FormData();
+    formData.append('file', file);
+    await axios.post('/api/upload_image/', formData)
+    .then(response => {
+        imageUrl.value = response.data['image_url']
+    })
+    .catch(error => {
+        console.log('error' + error)
+    })
+}
+</script>

requirements.txt

@@ -23,7 +23,7 @@ six==1.16.0
 sqlparse==0.4.3
 Twisted==22.10.0
 txaio==22.2.1
-typing_extensions==4.4.0
-zope.interface==5.5.1
+typing_extensions==4.4.0zope.interface==5.5.1
+cloudinary
 djoser
 django-cors-headers

twikker/settings.py

@@ -147,3 +147,8 @@
 # https://docs.djangoproject.com/en/4.1/ref/settings/#default-auto-field
 
 DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"
+
+
+# cloudinary settings
+from cloudinary.uploader import upload
+from cloudinary.utils import cloudinary_url