File(image) upload and storage

motorradig/.idea/workspace.xml

@@ -2,11 +2,12 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="eed7de89-f054-487c-bf59-36356758942b" name="Default Changelist" comment="">
-      <change afterPath="$PROJECT_DIR$/app/Http/Controllers/FileController.php" 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$/config/filesystems.php" beforeDir="false" afterPath="$PROJECT_DIR$/config/filesystems.php" 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/views/Upload.vue" beforeDir="false" afterPath="$PROJECT_DIR$/resources/js/views/Upload.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/routes/api.php" beforeDir="false" afterPath="$PROJECT_DIR$/routes/api.php" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/storage/app/public/.gitignore" beforeDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -234,7 +235,8 @@
       <workItem from="1580726763967" duration="4887000" />
       <workItem from="1580891513768" duration="68000" />
       <workItem from="1580891625747" duration="1061000" />
-      <workItem from="1580916835678" duration="1719000" />
+      <workItem from="1580916835678" duration="1903000" />
+      <workItem from="1580969444691" duration="3286000" />
     </task>
     <servers />
   </component>
@@ -285,10 +287,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="1580465130135">
+    <state x="417" y="196" width="670" height="498" key="search.everywhere.popup" timestamp="1580972791234">
-      <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="1580465130135" />
     <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" />
   </component>
 </project>

motorradig/app/Http/Controllers/FileController.php

@@ -10,8 +10,15 @@ class FileController extends Controller
 {
     public function upload(Request $request) {
 
-        Log::info("Request:");
+        Log::info("Incoming UploadRequest");
-        Log::info($request);
+
+        $uploadedFile=$request->image;
+        $filename=$uploadedFile->storeAs('.',$uploadedFile->getClientOriginalName(),'images');
+
+        //Storage::disk('image_uploads')->put('filename', $file_content);
+
+
+/*        Log::info($request);
         $exploded = explode(',', $request->image);
 
         Log::info("exploded:");
@@ -31,7 +38,9 @@ class FileController extends Controller
 
         Log::info("Upload endpoint reached.");
         Log::info("Filename:".$fileName);
+*/
 
-        return response()->json([], 200);
+        //return response()->json([], 200);
+        return response(['status'=>'success','storedName'=>$filename],200);
     }
 }

motorradig/config/filesystems.php

@@ -54,7 +54,12 @@ return [
             'url' => env('APP_URL').'/storage',
             'visibility' => 'public',
         ],
-
+        'images' => [
+            'driver' => 'local',
+            'root' => public_path().'/upload/images',
+            'url' => env('APP_URL').'/public',
+            'visibility' => 'public',
+        ],
         's3' => [
             'driver' => 's3',
             'key' => env('AWS_ACCESS_KEY_ID'),

motorradig/public/js/app.js

@@ -2181,11 +2181,14 @@ __webpack_require__.r(__webpack_exports__);
     onFileSelected: function onFileSelected(event) {
       console.log("File changed:");
       console.log(event.target.files[0].name);
-      var fd = new FormData();
+      var selectedFile = event.target.files[0];
-      fd.append('image', event.target.files[0], event.target.files[0].name);
+      var formData = new FormData(); //formData.append('image',selectedFile,selectedFile.name);
-      axios.post('http://localhost:8000/api/v1/auth/upload', fd, {
+
+      formData.append('image', selectedFile);
+      var config = axios.post('http://localhost:8000/api/v1/auth/upload', formData, {
         headers: {
-          'Authorization': 'Bearer ' + this.$store.state.user_token
+          'Authorization': 'Bearer ' + this.$store.state.user_token,
+          'Content-Type': 'multipart/form-data'
         }
       }).then(function (res) {
         console.log(res);

motorradig/resources/js/views/Upload.vue

@@ -125,11 +125,17 @@
             onFileSelected(event) {
                 console.log("File changed:");
                 console.log(event.target.files[0].name);
-                const fd = new FormData();
+                var selectedFile=event.target.files[0];
-                fd.append('image',event.target.files[0],event.target.files[0].name);
+                const formData = new FormData();
-                axios.post('http://localhost:8000/api/v1/auth/upload',fd,{
+                //formData.append('image',selectedFile,selectedFile.name);
+                formData.append('image',selectedFile);
+
+                const config=
+
+                axios.post('http://localhost:8000/api/v1/auth/upload',formData,{
                     headers: {
-                        'Authorization': 'Bearer ' + this.$store.state.user_token
+                        'Authorization': 'Bearer ' + this.$store.state.user_token,
+                        'Content-Type':  'multipart/form-data'
                     }
                 })
                 .then(res=>{

motorradig/storage/app/public/.gitignore

@@ -1,2 +0,0 @@
-*
-!.gitignore