Upload File into specified folder

motorradig/.idea/workspace.xml

@@ -2,15 +2,13 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="eed7de89-f054-487c-bf59-36356758942b" name="Default Changelist" comment="">
-      <change afterPath="$PROJECT_DIR$/app/File.php" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/app/Folder.php" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/database/migrations/2020_02_07_094925_create_files_and_folders.php" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/public/upload/images/testFolder/rente.png" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/app/Http/Controllers/FileController.php" beforeDir="false" afterPath="$PROJECT_DIR$/app/Http/Controllers/FileController.php" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/public/js/Icon.js" beforeDir="false" afterPath="$PROJECT_DIR$/public/js/Icon.js" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/public/js/app.js" beforeDir="false" afterPath="$PROJECT_DIR$/public/js/app.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/resources/js/store.js" beforeDir="false" afterPath="$PROJECT_DIR$/resources/js/store.js" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/resources/js/views/Upload.vue" beforeDir="false" afterPath="$PROJECT_DIR$/resources/js/views/Upload.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/resources/js/views/UserList.vue" beforeDir="false" afterPath="$PROJECT_DIR$/resources/js/views/UserList.vue" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/routes/api.php" beforeDir="false" afterPath="$PROJECT_DIR$/routes/api.php" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
@@ -295,11 +293,11 @@
     </state>
     <state x="623" y="178" width="673" height="724" key="find.popup/0.0.1920.1080@0.0.1920.1080" timestamp="1580465329892" />
     <state x="1903" y="197" width="673" height="708" key="find.popup/0.23.1280.777/1280.23.1920.1057@1280.23.1920.1057" timestamp="1579597123793" />
-    <state x="625" y="240" width="672" height="691" key="search.everywhere.popup" timestamp="1581075314755">
+    <state x="417" y="196" width="670" height="498" key="search.everywhere.popup" timestamp="1581148318017">
-      <screen x="0" y="0" width="1920" height="1080" />
+      <screen x="0" y="23" width="1280" height="777" />
     </state>
     <state x="625" y="240" width="672" height="691" key="search.everywhere.popup/0.0.1920.1080@0.0.1920.1080" timestamp="1581075314755" />
     <state x="1905" y="258" width="670" height="676" key="search.everywhere.popup/0.23.1280.777/1280.23.1920.1057@1280.23.1920.1057" timestamp="1580196905378" />
-    <state x="417" y="196" width="670" height="498" key="search.everywhere.popup/0.23.1280.777@0.23.1280.777" timestamp="1580972791234" />
+    <state x="417" y="196" width="670" height="498" key="search.everywhere.popup/0.23.1280.777@0.23.1280.777" timestamp="1581148318017" />
   </component>
 </project>

motorradig/app/Http/Controllers/FileController.php

@@ -15,13 +15,22 @@ class FileController extends Controller
         Log::info("Incoming UploadRequest");
 
         $uploadedFile=$request->image;
-        $filename=$uploadedFile->storeAs('./testFolder',$uploadedFile->getClientOriginalName(),'images');
+        $folder=$request->folder;
+        $filename=$uploadedFile->storeAs('./'.$folder,$uploadedFile->getClientOriginalName(),'images');
 
         return response(['status'=>'success','storedName'=>$filename],200);
     }
 
     public function getFolders(Request $request) {
         Log::info("Incoming getFolders request");
+        $folders=Folder::all();
+        $folderNames=array();
+        foreach ($folders as $folder) {
+            array_push($folderNames, $folder->name);
+        }
+        Log::info("Foldernames:");
+        Log::info($folderNames);
+        return response(['status'=>'success','folders'=>$folderNames],200);
     }
 
     public function  createFolder(Request $request) {
@@ -37,7 +46,7 @@ class FileController extends Controller
     }
 
     public function deleteFile(Request $request) {
-        Log::info("Incoming deleteFilee request");
+        Log::info("Incoming deleteFile request");
     }
 
 }

motorradig/public/js/Icon.js

@@ -391,7 +391,7 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterat
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
-module.exports = __webpack_require__(/*! /mnt/d/repos/motorradig/motorradig/resources/js/Icon.js */"./resources/js/Icon.js");
+module.exports = __webpack_require__(/*! /Users/tschneider/dev/repo/motorradig/motorradig/resources/js/Icon.js */"./resources/js/Icon.js");
 
 
 /***/ })

motorradig/public/js/app.js

@@ -2142,6 +2142,11 @@ __webpack_require__.r(__webpack_exports__);
 //
 //
 //
+//
+//
+//
+//
+//
 
 
 /* harmony default export */ __webpack_exports__["default"] = ({
@@ -2154,14 +2159,18 @@ __webpack_require__.r(__webpack_exports__);
       editor: new tiptap__WEBPACK_IMPORTED_MODULE_0__["Editor"]({
         extensions: [new tiptap_extensions__WEBPACK_IMPORTED_MODULE_1__["Blockquote"](), new tiptap_extensions__WEBPACK_IMPORTED_MODULE_1__["BulletList"](), new tiptap_extensions__WEBPACK_IMPORTED_MODULE_1__["CodeBlock"](), new tiptap_extensions__WEBPACK_IMPORTED_MODULE_1__["HardBreak"](), new tiptap_extensions__WEBPACK_IMPORTED_MODULE_1__["Heading"]({
           levels: [1, 2, 3]
-        }), new tiptap_extensions__WEBPACK_IMPORTED_MODULE_1__["HorizontalRule"](), new tiptap_extensions__WEBPACK_IMPORTED_MODULE_1__["ListItem"](), new tiptap_extensions__WEBPACK_IMPORTED_MODULE_1__["OrderedList"](), new tiptap_extensions__WEBPACK_IMPORTED_MODULE_1__["TodoItem"](), new tiptap_extensions__WEBPACK_IMPORTED_MODULE_1__["TodoList"](), new tiptap_extensions__WEBPACK_IMPORTED_MODULE_1__["Link"](), new tiptap_extensions__WEBPACK_IMPORTED_MODULE_1__["Bold"](), new tiptap_extensions__WEBPACK_IMPORTED_MODULE_1__["Code"](), new tiptap_extensions__WEBPACK_IMPORTED_MODULE_1__["Italic"](), new tiptap_extensions__WEBPACK_IMPORTED_MODULE_1__["Strike"](), new tiptap_extensions__WEBPACK_IMPORTED_MODULE_1__["Underline"](), new tiptap_extensions__WEBPACK_IMPORTED_MODULE_1__["History"]()],
+        }), new tiptap_extensions__WEBPACK_IMPORTED_MODULE_1__["HorizontalRule"](), new tiptap_extensions__WEBPACK_IMPORTED_MODULE_1__["ListItem"](), new tiptap_extensions__WEBPACK_IMPORTED_MODULE_1__["OrderedList"](), new tiptap_extensions__WEBPACK_IMPORTED_MODULE_1__["TodoItem"](), new tiptap_extensions__WEBPACK_IMPORTED_MODULE_1__["TodoList"](), new tiptap_extensions__WEBPACK_IMPORTED_MODULE_1__["Link"](), new tiptap_extensions__WEBPACK_IMPORTED_MODULE_1__["Bold"](), new tiptap_extensions__WEBPACK_IMPORTED_MODULE_1__["Code"](), new tiptap_extensions__WEBPACK_IMPORTED_MODULE_1__["Italic"](), new tiptap_extensions__WEBPACK_IMPORTED_MODULE_1__["Strike"](), new tiptap_extensions__WEBPACK_IMPORTED_MODULE_1__["Underline"](), new tiptap_extensions__WEBPACK_IMPORTED_MODULE_1__["History"]()]
-        content: this.$store.state.page_content
+      }),
-      })
+      //folders: this.$store.state.folders
+      folders: ['Folder1', 'Folder2']
     };
   },
   beforeDestroy: function beforeDestroy() {
     this.editor.destroy();
   },
+  created: function created() {
+    this.loadFolders();
+  },
   methods: {
     showContent: function showContent() {
       console.log(">>"); //console.log(this.editor.view.dom.innerText);
@@ -2187,13 +2196,15 @@ __webpack_require__.r(__webpack_exports__);
         _this.$router.push("/");
       });
     },
-    onFileSelected: function onFileSelected(event) {
+    uploadFile: function uploadFile(event) {
       console.log("File changed:");
       console.log(event.target.files[0].name);
       var selectedFile = event.target.files[0];
+      var selectedFolder = this.$store.state.selectedFolder;
       var formData = new FormData(); //formData.append('image',selectedFile,selectedFile.name);
 
       formData.append('image', selectedFile);
+      formData.append('folder', selectedFolder);
       axios.post('http://localhost:8000/api/v1/auth/upload', formData, {
         headers: {
           'Authorization': 'Bearer ' + this.$store.state.user_token,
@@ -2214,8 +2225,28 @@ __webpack_require__.r(__webpack_exports__);
           'Content-Type': 'multipart/form-data'
         }
       }).then(function (res) {
-        console.log(res);
+        console.log(res.data);
+        loadFolders();
       });
+    },
+    loadFolders: function loadFolders() {
+      var _this2 = this;
+
+      console.log("Requesting folders");
+      axios.post('http://localhost:8000/api/v1/auth/get_folders', {}, {
+        headers: {
+          'Authorization': 'Bearer ' + this.$store.state.user_token
+        }
+      }).then(function (res) {
+        console.log("Receiving folders");
+        console.log(res.data.folders);
+        _this2.$store.state.folders = res.data.folders;
+      });
+    },
+    newFolderSelected: function newFolderSelected(event) {
+      console.log("New Folder selected:");
+      console.log(event.target.value);
+      this.$store.state.selectedFolder = event.target.value;
     }
   }
 });
@@ -31692,7 +31723,7 @@ var render = function() {
             _vm._v(" "),
             _c("input", {
               attrs: { name: "filename", type: "file" },
-              on: { change: _vm.onFileSelected }
+              on: { change: _vm.uploadFile }
             })
           ])
         ]),
@@ -31705,6 +31736,19 @@ var render = function() {
             on: { change: _vm.createFolderRequest }
           }),
           _c("button", [_vm._v("Neuen Ordner erzeugen")])
+        ]),
+        _vm._v(" "),
+        _c("form", [
+          _c("label", [_vm._v("Ordner wählen:")]),
+          _vm._v(" "),
+          _c(
+            "select",
+            { on: { change: _vm.newFolderSelected } },
+            _vm._l(this.$store.state.folders, function(folder) {
+              return _c("option", [_vm._v(_vm._s(folder))])
+            }),
+            0
+          )
         ])
       ],
       1
@@ -48722,7 +48766,9 @@ var store = new vuex__WEBPACK_IMPORTED_MODULE_1__["default"].Store({
     user_token: {},
     page_name: 'main',
     page_content: '<h1 style="font-align:center;">Placeholder</h1>',
-    userlist: {}
+    userlist: {},
+    folders: {},
+    selectedFolder: "default"
   }
 });
 
@@ -49160,8 +49206,8 @@ __webpack_require__.r(__webpack_exports__);
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
-__webpack_require__(/*! /mnt/d/repos/motorradig/motorradig/resources/js/app.js */"./resources/js/app.js");
+__webpack_require__(/*! /Users/tschneider/dev/repo/motorradig/motorradig/resources/js/app.js */"./resources/js/app.js");
-module.exports = __webpack_require__(/*! /mnt/d/repos/motorradig/motorradig/resources/sass/app.scss */"./resources/sass/app.scss");
+module.exports = __webpack_require__(/*! /Users/tschneider/dev/repo/motorradig/motorradig/resources/sass/app.scss */"./resources/sass/app.scss");
 
 
 /***/ })

motorradig/resources/js/store.js

@@ -8,6 +8,8 @@ export const store = new Vuex.Store({
         user_token:{},
         page_name: 'main',
         page_content:'<h1 style="font-align:center;">Placeholder</h1>',
-        userlist:{}
+        userlist:{},
+        folders:{},
+        selectedFolder:"default"
     }
 });

motorradig/resources/js/views/Upload.vue

@@ -30,7 +30,7 @@
             <div>
                 <form>
                     <span>UPLOAD:</span>
-                    <input name="filename" type="file" @change="onFileSelected"></input>
+                    <input name="filename" type="file" @change="uploadFile"></input>
                 </form>
             </div>
 
@@ -44,7 +44,12 @@
 
             </div>
 
-
+            <form>
+                <label>Ordner wählen:</label>
+                <select @change="newFolderSelected">
+                    <option v-for="folder in this.$store.state.folders">{{ folder }}</option>
+                </select>
+            </form>
         </div>
 
     </div>
@@ -98,14 +103,18 @@
                         new Strike(),
                         new Underline(),
                         new History(),
-                    ],
+                    ]
-                    content: this.$store.state.page_content,
                 }),
+                //folders: this.$store.state.folders
+                folders: ['Folder1','Folder2']
             }
         },
         beforeDestroy() {
             this.editor.destroy()
         },
+        created() {
+            this.loadFolders();
+        },
         methods: {
 
             showContent() {
@@ -131,13 +140,15 @@
                         }
                     )
             },
-            onFileSelected(event) {
+            uploadFile(event) {
                 console.log("File changed:");
                 console.log(event.target.files[0].name);
                 var selectedFile=event.target.files[0];
+                var selectedFolder = this.$store.state.selectedFolder;
                 const formData = new FormData();
                 //formData.append('image',selectedFile,selectedFile.name);
                 formData.append('image',selectedFile);
+                formData.append('folder',selectedFolder);
 
                 axios.post('http://localhost:8000/api/v1/auth/upload',formData,{
                     headers: {
@@ -163,8 +174,27 @@
                     }
                 })
                     .then(res=>{
-                        console.log(res);
+                        console.log(res.data);
+                        loadFolders();
                     })
+            },
+            loadFolders() {
+                console.log("Requesting folders");
+                axios.post('http://localhost:8000/api/v1/auth/get_folders',{},{
+                    headers: {
+                        'Authorization': 'Bearer ' + this.$store.state.user_token
+                    }
+                })
+                    .then(res=>{
+                        console.log("Receiving folders");
+                        console.log(res.data.folders);
+                        this.$store.state.folders=res.data.folders;
+                    })
+            },
+            newFolderSelected(event) {
+                console.log("New Folder selected:");
+                console.log(event.target.value);
+                this.$store.state.selectedFolder=event.target.value;
             }
         }
     }

motorradig/routes/api.php

@@ -53,6 +53,7 @@ Route::prefix('v1')->group(function () {
 
 
             Route::post('create_folder','FileController@createFolder');
+            Route::post('get_folders','FileController@getFolders');
         });
     });
 });