adding support for file upload

project/XMLConverter/settings.py

@@ -144,6 +144,8 @@ USE_L10N = True
 
 USE_TZ = True
 
+MEDIA_URL = "/media/"
+MEDIA_ROOT = BASE_DIR / "media"
 
 # Static files (CSS, JavaScript, Images)
 # https://docs.djangoproject.com/en/3.2/howto/static-files/

project/api/migrations/0003_imports_file.py

@@ -0,0 +1,20 @@
+# Generated by Django 3.2.12 on 2023-01-22 21:21
+
+from django.db import migrations, models
+import django.utils.timezone
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('api', '0002_auto_20230109_1432'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='imports',
+            name='file',
+            field=models.FileField(default=django.utils.timezone.now, upload_to=''),
+            preserve_default=False,
+        ),
+    ]

project/api/models.py

@@ -8,6 +8,7 @@ class Imports(models.Model):
     project_name = models.CharField(max_length=255, default="import")
     user_id = models.ForeignKey(User, on_delete=models.CASCADE)
     creation_date = models.DateTimeField(auto_now_add=True)
+    file = models.FileField()
 
 
 User = get_user_model()

project/api/serializers.py

@@ -13,7 +13,7 @@ class ImportsSerializer(serializers.ModelSerializer):
 class CreateConversionSerializer(serializers.ModelSerializer):
     class Meta:
         model = Imports
-        filelds = ['project_name', 'user_id', 'creation_date']
+        filelds = ['project_name', 'user_id', 'creation_date', 'file']
         exclude = ['id']
 
 # accounts 

project/api/urls.py

@@ -7,7 +7,7 @@ from .viewsets import ContactViewSet
 router = DefaultRouter()
 urlpatterns = [
     #re_path(r'^$', UserCreate.as_view(), name='account-create'),
-    path('register', UserCreate.as_view(), name='account-create'),
+    path('register/', UserCreate.as_view(), name='account-create'),
     path('list/', ImportsView.as_view({'get': 'list'})),
     path('create/', CreateImportsView.as_view()),
     path('token/', views.obtain_auth_token, name='token_obtain_pair'),

project/api/views.py

@@ -37,9 +37,11 @@ class CreateImportsView(generics.ListAPIView):
     
         serializer = self.serializer_class(data=request.data)
         if serializer.is_valid():
+            print("valid++++++++++++++++++++++++++++++++++++++++")
             name = serializer.data.get("project_name")
             user_id = serializer.data.get("user_id")
-            new_import = Imports(project_name=name, user_id_id=user_id)
+            file = serializer.data.get("file")
+            new_import = Imports(project_name=name, user_id_id=user_id, file = file)
             new_import.save()
         
         return Response(CreateConversionSerializer(new_import).data, status=status.HTTP_201_CREATED)

project/frontend_vue/package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "axios": "^1.2.2",
         "core-js": "^3.8.3",
+        "moment": "^2.29.4",
         "vue": "^3.2.13",
         "vue-router": "^4.0.3"
       },
@@ -12976,6 +12977,14 @@
       "integrity": "sha512-A/78XjoX2EmNvppVWEhM2oGk3x4lLxnkEA4jTbaK97QKSDjkIoOsKQlfylt/d3kKKi596Qy3NP5XrXJ6fZIC9Q==",
       "dev": true
     },
+    "node_modules/moment": {
+      "version": "2.29.4",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/mrmime": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz",
@@ -27376,6 +27385,11 @@
       "integrity": "sha512-A/78XjoX2EmNvppVWEhM2oGk3x4lLxnkEA4jTbaK97QKSDjkIoOsKQlfylt/d3kKKi596Qy3NP5XrXJ6fZIC9Q==",
       "dev": true
     },
+    "moment": {
+      "version": "2.29.4",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w=="
+    },
     "mrmime": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz",

project/frontend_vue/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "axios": "^1.2.2",
     "core-js": "^3.8.3",
+    "moment": "^2.29.4",
     "vue": "^3.2.13",
     "vue-router": "^4.0.3"
   },

project/frontend_vue/src/App.vue

@@ -4,7 +4,8 @@
       <router-link to="/about">About</router-link> |
       <router-link to="/login">Login</router-link> |
       <router-link to="/list">Import List</router-link> |
-      <router-link to="/create">Create import</router-link>
+      <router-link to="/register">Register</router-link> |
+      <router-link to="/create">Create</router-link>
   </div>
   <router-view />
 </template>

project/frontend_vue/src/router/index.js

@@ -4,6 +4,7 @@ import AboutView from "@/views/AboutView.vue";
 import LoginView from "@/views/LoginView.vue";
 import ImportListView from "@/views/ImportListView.vue";
 import CreateImportView from "@/views/CreateImportView.vue";
+import RegisterView from "@/views/RegisterView.vue";
 import { userStore } from "../store/userStore.js";
 
 const routes = [
@@ -19,7 +20,7 @@ const routes = [
   },
   {
     path: "/login",
-    name: "Login",
+    name: "login",
     component: LoginView,
   },
   {
@@ -32,6 +33,11 @@ const routes = [
     name: "create",
     component: CreateImportView,
   },
+  {
+    path: "/register",
+    name: "register",
+    component: RegisterView,
+  },
 ];
 
 const router = createRouter({

project/frontend_vue/src/views/CreateImportView.vue

@@ -7,6 +7,7 @@
         v-model="input.importName"
         placeholder="Import name"
       />
+      <input type="file" ref="fileInput" @change="uploadFile"/>
       <button type="button" @click="creat()">Create</button>
     </div>
   </template>
@@ -47,26 +48,10 @@
             .catch((error) => {
               console.error("Error:", error);
             });
-      },/*
-      async getUser() {
-          console.log(userStore.userToken)
-          await axios({
-            method: "GET",
-            url: "http://localhost:8000/api/me/",
-            headers: {
-              'authorization': `Token ${userStore.userToken}`,
-            }
-          })
-            .then((response) => {
-              //layout.value = response.data;
-              console.log(response.data);
-              userStore.userID = response.data.id;
-              console.log(userStore.userID);
-            })
-            .catch((error) => {
-              console.error("Error:", error);
-            });
-      },*/
+      },
+      uploadFile() {
+        this.$refs.fileInput.click()
+      },
     },
   };
   </script>

project/frontend_vue/src/views/ImportListView.vue

@@ -1,19 +1,36 @@
 <template>
   <div id="form_style">
     <h1>Import List</h1>
-    <button type="button" @click="getImportList()">List</button>
+    <router-link to="/create"><button type="button" >New file</button></router-link>
     <button type="button" @click="getUser()">User</button>
   </div>
+  <div class="main_list">
+    <div class="item_list" v-for="item in list" :key="item.id">
+      {{ item.project_name }} {{ dateTime(item.creation_date) }} <button type="button" @click="getUser()">View</button><button type="button" @click="getUser()">Delete</button><button type="button" @click="getUser()">Rename</button>
+    </div>
+  </div>
 </template>
 
 <script>
 import axios from "axios";
 import { userStore } from "../store/userStore.js";
+import moment from 'moment';
+import { ref } from 'vue'
 
 export default {
   name: "ImportListView",
+  data() {
+  },
   methods: {
-    async getImportList() {
+    dateTime(value) {
+      return moment(value).format('YYYY-MM-DD');
+    },
+
+
+  },
+  setup() {
+    const list = ref([])
+    const getImportList = async () => {
         console.log(userStore.userToken)
         await axios({
           method: "GET",
@@ -24,14 +41,15 @@ export default {
         })
           .then((response) => {
             //layout.value = response.data;
+            list.value = response.data;
             console.log(response.data);
             console.log(userStore.userName);
           })
           .catch((error) => {
             console.error("Error:", error);
           });
-    },
-    async getUser() {
+    };
+    const getUser = async () => {
         console.log(userStore.userToken)
         await axios({
           method: "GET",
@@ -49,7 +67,10 @@ export default {
           .catch((error) => {
             console.error("Error:", error);
           });
-    },
+    };
+    getUser();
+    getImportList();
+    return { list }
   },
 };
 </script>
@@ -63,4 +84,19 @@ export default {
   margin-top: 200px;
   padding: 20px;
 }
+.main_list{
+  width: 500px;
+  border: 1px solid #cccccc;
+  background-color: #ffffff;
+  margin: auto;
+  margin-top: 200px;
+  padding: 20px;
+}
+.item_list{
+  border: 1px solid #cccccc;
+  background-color: #adadad;
+  margin: auto;
+  margin-top: 10px;
+  padding: 10px;
+}
 </style>

project/frontend_vue/src/views/LoginView.vue

@@ -20,6 +20,7 @@
 <script>
 import axios from "axios";
 import { userStore } from "../store/userStore.js";
+import router from '@/router'
 
 export default {
   name: "LoginView",
@@ -47,6 +48,7 @@ export default {
             userStore.userToken = response.data.token;
             userStore.userName = this.input.username;
             console.log(userStore);
+            router.push({ name: 'list' })
           })
           .catch((error) => {
             console.log(error);

project/frontend_vue/src/views/RegisterView.vue

@@ -0,0 +1,74 @@
+<template>
+    <div id="register">
+      <h1>Register</h1>
+      <input
+        type="text"
+        name="username"
+        v-model="input.username"
+        placeholder="Username"
+      />
+      <input
+        type="password"
+        name="password"
+        v-model="input.password"
+        placeholder="Password"
+      />
+      <button type="button" @click="register()">Register</button>
+    </div>
+  </template>
+  
+  <script>
+  import axios from "axios";
+  import { userStore } from "../store/userStore.js";
+  import router from '@/router'
+  
+  export default {
+    name: "RegisterView",
+    data() {
+      return {
+        input: {
+          username: "",
+          email: "gmail@gmail.com",
+          password: "",
+        },
+      };
+    },
+    methods: {
+      async register() {
+        if (this.input.username != "" && this.input.password != "") {
+          await axios({
+            method: "POST",
+            url: "http://localhost:8000/api/register/",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            data: JSON.stringify(this.input),
+          })
+            .then((response) => {
+              console.log(response);
+              userStore.userName = this.input.username;
+              console.log(userStore);
+              router.push({ name: 'login' })
+            })
+            .catch((error) => {
+              console.log(error);
+            });
+        } else {
+          console.log("A username and password must be present");
+        }
+      },
+    },
+  };
+  </script>
+  
+  <style scoped>
+  #register {
+    width: 500px;
+    border: 1px solid #cccccc;
+    background-color: #ffffff;
+    margin: auto;
+    margin-top: 200px;
+    padding: 20px;
+  }
+  </style>
+