reworked uploading paths (MEDIA_ROOT)

backend/.gitignore

@@ -1,4 +1,5 @@
 secret.txt
 mysql.cnf
 
-uploads
+media
+static

backend/pycs_api/models/file.py

@@ -15,7 +15,7 @@ class Extensions(enum.Enum):
 
 
 def project_directory(instance: "File", filename: str):
-    return f"uploads/{instance.project.id}/{filename}"
+    return f"{instance.project.data_folder}/{filename}"
 
 class File(base.BaseModel):
 
@@ -50,10 +50,14 @@ class File(base.BaseModel):
     serializer_fields = base.BaseModel.serializer_fields + [
         "project",
         "created",
-        "path",
+        "url",
         "uuid",
     ]
 
+    @property
+    def url(self):
+        return self.path.url
+
     @classmethod
     def create(cls, uploaded_file: UploadedFile, project: Project):
 

backend/pycs_backend/settings/media.py

@@ -1,4 +1,5 @@
 import os
+from pathlib import Path
 
 from .base import BASE_DIR
 
@@ -21,12 +22,16 @@ TEMPLATES = [
 # Static files (CSS, JavaScript, Images)
 # https://docs.djangoproject.com/en/3.2/howto/static-files/
 
+MEDIA_URL = '/media/'
 STATIC_URL = '/static/'
 
-STATIC_DIR = os.environ.get("PYCS_STATIC_DIR", BASE_DIR / "static")
+
+MEDIA_ROOT = Path(os.environ.get("PYCS_MEDIA_ROOT", BASE_DIR / "media"))
+STATIC_ROOT = Path(os.environ.get("PYCS_STATIC_ROOT", BASE_DIR / "static"))
 
 STATICFILES_DIRS = [
-    STATIC_DIR,
+    STATIC_ROOT,
 ]
 
-PROJECTS_DIR = os.environ.get("PYCS_PROJECTS_DIR", "projects")
+
+PROJECTS_DIR = Path(os.environ.get("PYCS_PROJECTS_DIR", MEDIA_ROOT / "projects"))

backend/pycs_backend/urls.py

@@ -13,11 +13,13 @@ Including another URLconf
     1. Import the include() function: from django.urls import include, path
     2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
 """
+from django.conf import settings
+from django.conf.urls.static import static
 from django.contrib import admin
-from django.urls import path
 from django.urls import include
+from django.urls import path
 
 urlpatterns = [
     path(r'', include('pycs_api.urls')),
     path('admin/', admin.site.urls),
-]
+] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

frontend/src/services/api.js

@@ -1,7 +1,8 @@
 import axios from 'axios'
+import store from '@/store'
 
 const instance = axios.create({
-  baseURL: 'http://127.0.0.1:5000',
+  baseURL: store.getters.getAPIUrl,
   timeout: 1000,
   headers: {
     "Content-Type": "application/json",

frontend/src/store/index.js

@@ -8,6 +8,7 @@ Vue.use(Vuex);
 
 export default new Vuex.Store({
   state: {
+    apiURL: "http://127.0.0.1:5000",
     currentProject: null,
   },
 
@@ -25,6 +26,10 @@ export default new Vuex.Store({
 
     getCurrentProject: state => {
       return state.currentProject;
+    },
+
+    getAPIUrl: state => {
+      return state.apiURL;
     }
 
   },

frontend/src/views/project/Data.vue

@@ -26,6 +26,35 @@
       </v-card-title>
       <v-card-text>
         <v-row dense>
+
+          <v-col
+            v-for="file in files"
+            :key="file.uuid"
+            cols="4"
+            class="d-flex child-flex"
+          >
+            <v-img
+              :src="`${getAPIUrl}${file.url}`"
+              :lazy-src="`https://via.placeholder.com/150x100/?text=Image`"
+              aspect-ratio="4/3"
+              class="grey lighten-2"
+              contain
+            >
+              <template v-slot:placeholder>
+                <v-row
+                  class="fill-height ma-0"
+                  align="center"
+                  justify="center"
+                >
+                  <v-progress-circular
+                    indeterminate
+                    color="grey lighten-5"
+                  ></v-progress-circular>
+                </v-row>
+              </template>
+            </v-img>
+          </v-col>
+
           <v-col
             v-for="file in files"
             :key="file.uuid"
@@ -50,6 +79,7 @@
 <script>
   import Upload from "@/components/Upload"
   import DataService from '@/services/data.service';
+  import { mapGetters } from 'vuex'
 
 
   export default {
@@ -59,7 +89,7 @@
 
     computed: {
 
-      // ...mapState(['data']),
+      ...mapGetters(['getAPIUrl']),
       projectId() {
         return this.$route.params.id;
       },