Added real file uploading via axios, and now list actual File objects, and load…

Added real file uploading via axios, and now list actual File objects, and load project details when loading the editor. Made components conditional based on when the editor loads project data.

src/components/Clips.vue

@@ -36,6 +36,7 @@
 <script>
 export default {
   name: "Clips.vue",
+  props: ['project'],
   data() {
     return {
       clips: [
@@ -51,7 +52,7 @@ export default {
 
 <style scoped>
   .scrolling-container {
-    height: 300px;
+    max-height: 300px;
     overflow: scroll;
   }
   .img-parent {

src/components/Files.vue

 <template>
   <div class="row mb-3 gy-2 gx-2 p-2 scrolling-container">
-    <h3>Files <button type="button" class="btn btn-primary upload-btn">Upload</button></h3>
+    <h3>Files <button type="button" class="btn btn-primary upload-btn" @click="chooseFiles">Upload</button></h3>
     <div class="col-sm-12">
       <div class="form-floating mb-3">
         <input type="text" class="form-control" id="floatingInput" placeholder="Search">
@@ -10,26 +10,34 @@
     <div v-for="file in files" :key="file.id" class="col-4" style="overflow: scroll;">
       <img @click="toggleSelection(file)" :class="getSelectedClass(file)" class="file-thumbnail img-fluid img-thumbnail" :title="file.name" src="../assets/logo.png"/>
     </div>
+    <input ref="fileUpload" type="file" @change="fileChanged" hidden>
   </div>
 </template>
 
 <script>
+import { mapActions, mapState } from "vuex";
+
 export default {
   name: "Files.vue",
+  props: ['project'],
   data() {
-    return {
-      files: [
-        { 'id': 1, 'name': 'filename1.mp4', 'selected': false },
-        { 'id': 2, 'name': 'filename1.mp4', 'selected': false },
-        { 'id': 3, 'name': 'filename1.mp4', 'selected': false },
-        { 'id': 4, 'name': 'filename1.mp4', 'selected': false },
-        { 'id': 5, 'name': 'filename1.mp4', 'selected': false },
-        { 'id': 6, 'name': 'filename1.mp4', 'selected': false },
-        { 'id': 7, 'name': 'filename1.mp4', 'selected': false },
-      ]
-    }
+    return {}
   },
   methods: {
+    chooseFiles() {
+      this.$refs.fileUpload.click()
+    },
+    fileChanged(event) {
+      let data = new FormData();
+      data.append('media', event.target.files[0]);
+      data.append('project', this.project.url);
+      data.append('json', "{}");
+      let payload = { project_id: this.project.id,
+                      project_url: this.project.url,
+                      data}
+      this.createFile(payload)
+
+    },
     toggleSelection(fileObject) {
       fileObject.selected = !fileObject.selected
     },
@@ -39,14 +47,21 @@ export default {
       } else {
         return ''
       }
-    }
+    },
+    ...mapActions(['loadFiles', 'createFile'])
+  },
+  computed: {
+    ...mapState(['files'])
+  },
+  mounted() {
+    this.loadFiles(this.project.id)
   }
 }
 </script>
 
 <style scoped>
   .scrolling-container {
-    height: 300px;
+    max-height: 300px;
     overflow: scroll;
   }
   .upload-btn {

src/components/Preview.vue

@@ -11,7 +11,8 @@
 
 <script>
 export default {
-  name: "Preview.vue"
+  name: "Preview.vue",
+  props: ['project']
 }
 </script>
 

src/store/index.js

@@ -6,7 +6,8 @@ import { instance } from "./axios"
 export default createStore({
   state: {
     counter: 1,
-    projects: {},
+    projects: [],
+    files: [],
     user: null,
     errors: []
   },
@@ -22,17 +23,14 @@ export default createStore({
     clearErrors(state) {
       state.errors = []
     },
-    increment(state, amount) {
-      state.counter += amount
-    },
-    decrement(state, amount) {
-      state.counter -= amount
+    setUser(state, user) {
+      state.user = user
     },
     setProjects(state, projects) {
       state.projects = projects
     },
-    setUser(state, user) {
-      state.user = user
+    setFiles(state, files) {
+      state.files = files
     }
   },
   getters: {
@@ -51,7 +49,6 @@ export default createStore({
       }
     },
     async loadProjects({commit}) {
-      // Send response
       try {
         const response = await instance.get('/projects/')
         commit('setProjects', response.data.results)
@@ -59,6 +56,13 @@ export default createStore({
         commit('addError', JSON.stringify(err.response.data))
       }
     },
+    async getProject({commit}, project_id) {
+      try {
+        return instance.get(`projects/${project_id}/`)
+      } catch(err) {
+        commit('addError', JSON.stringify(err.response.data))
+      }
+    },
     async createProject({dispatch, commit}, payload) {
       try {
         await instance.post('/projects/', payload)
@@ -67,14 +71,29 @@ export default createStore({
         commit('addError', JSON.stringify(err.response.data))
       }
     },
-    async deleteProject({commit, dispatch}, id) {
-      // Send response
+    async deleteProject({commit, dispatch}, project_id) {
       try {
-        await instance.delete(`projects/${id}/`)
+        await instance.delete(`projects/${project_id}/`)
         dispatch('loadProjects')
       } catch(err) {
         commit('addError', JSON.stringify(err.response.data))
       }
+    },
+    async loadFiles({commit}, project_id) {
+      try {
+        const response = await instance.get(`projects/${project_id}/files/`)
+        commit('setFiles', response.data.results)
+      } catch(err) {
+        commit('addError', JSON.stringify(err.response.data))
+      }
+    },
+    async createFile({dispatch, commit}, payload) {
+      try {
+        await instance.post(`${payload.project_url}files/`, payload.data)
+        dispatch('loadFiles', payload.project_id)
+      } catch(err) {
+        commit('addError', JSON.stringify(err.response.data))
+      }
     }
   },
   modules: {

src/views/Editor.vue

 <template>
  <div class="row">
    <div class="col-sm-12 col-md-4">
-     <Files/>
-     <Clips/>
+     <Files v-if="hasData" :project="project"/>
+     <Clips v-if="hasData" :project="project"/>
    </div>
    <div class="col-sm-12 col-md-8">
-     <Preview/>
+     <Preview v-if="hasData" :project="project"/>
    </div>
  </div>
 </template>
 
 <script>
+import { mapActions } from "vuex";
 import Files from "../components/Files";
 import Clips from "../components/Clips";
 import Preview from "../components/Preview";
 
 export default {
   name: "Editor.vue",
+  data() {
+    return {
+      hasData: false,
+      project: {}
+    }
+  },
+  methods: {
+    ...mapActions(['getProject'])
+  },
   computed: {
     id() {
       return this.$route.params.id
@@ -24,6 +34,11 @@ export default {
   },
   components: {
     Files, Clips, Preview
+  },
+  async mounted() {
+    let results = await this.getProject(this.$route.params.id)
+    this.project = results.data
+    this.hasData = true
   }
 }
 </script>