Multi-image upload old tours: Front-End Part

motorradig/app/Http/Controllers/TourController.php

@@ -197,6 +197,12 @@ class TourController extends Controller
 
     }
 
+
+    public function upload_gallery(Request $request, Tour $tour){
+        dd($request);
+    }
+
+
     /**
      * Remove the specified resource from storage.
      *

motorradig/public/css/custom.css

@@ -25,5 +25,46 @@ body, html {
 
 
 /* a:visited { color:cyan !important; }
-
  */
+
+/* Drop File box styling, see also: https://www.smashingmagazine.com/2018/01/drag-drop-file-uploader-vanilla-js/ */
+#drop-area {
+    border: 2px dashed #ccc;
+    border-radius: 20px;
+    width: 480px;
+    font-family: sans-serif;
+    margin: 100px auto;
+    padding: 20px;
+}
+#drop-area.highlight {
+    border-color: purple;
+}
+p {
+    margin-top: 0;
+}
+.my-form {
+    margin-bottom: 10px;
+}
+#gallery {
+    margin-top: 10px;
+}
+#gallery img {
+    width: 150px;
+    margin-bottom: 10px;
+    margin-right: 10px;
+    vertical-align: middle;
+}
+.button {
+    display: inline-block;
+    padding: 10px;
+    background: #ccc;
+    cursor: pointer;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+}
+.button:hover {
+    background: #ddd;
+}
+#fileElem {
+    display: none;
+}

motorradig/resources/views/tour/edit_old.blade.php

@@ -59,4 +59,79 @@
             </div>
         </div>
     </div>
+
+
+    <div id="gallery"></div>
+    <div id="drop-area">
+        <form class="my-form">
+            <p>Upload multiple files with the file dialog or by dragging and dropping images onto the dashed region</p>
+            <input type="file" id="fileElem" multiple accept="image/*" onchange="handleFiles(this.files)">
+            <label class="button" for="fileElem">Select some files</label>
+        </form>
+    </div>
+    <script>
+        let dropArea = document.getElementById('drop-area');
+
+        function preventDefaults (e) {
+            e.preventDefault()
+            e.stopPropagation()
+        }
+
+        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+            dropArea.addEventListener(eventName, preventDefaults, false)
+        });
+
+        ['dragenter', 'dragover'].forEach(eventName => {
+            dropArea.addEventListener(eventName, highlight, false)
+        });
+        ['dragleave', 'drop'].forEach(eventName => {
+            dropArea.addEventListener(eventName, unhighlight, false)
+        });
+        function highlight(e) {
+            dropArea.classList.add('highlight')
+        }
+
+        function unhighlight(e) {
+            dropArea.classList.remove('highlight')
+        }
+
+        function handleDrop(e) {
+            let dt = e.dataTransfer
+            let files = dt.files
+
+            handleFiles(files)
+        }
+        dropArea.addEventListener('drop', handleDrop, false);
+
+        function handleFiles(files) {
+            files = [...files]
+            files.forEach(uploadFile)
+            files.forEach(previewFile)
+        }
+
+        function uploadFile(file) {
+            let url = 'YOUR URL HERE'
+            let formData = new FormData()
+
+            formData.append('file', file)
+
+            fetch(url, {
+                method: 'POST',
+                body: formData
+            })
+                .then(() => { /* Done. Inform the user */ })
+                .catch(() => { /* Error. Inform the user */ })
+        }
+
+
+        function previewFile(file) {
+            let reader = new FileReader()
+            reader.readAsDataURL(file)
+            reader.onloadend = function() {
+                let img = document.createElement('img')
+                img.src = reader.result
+                document.getElementById('gallery').appendChild(img)
+            }
+        }
+    </script>
 @endsection

motorradig/routes/web.php

@@ -44,6 +44,7 @@ Route::post('/admin/store_activities', 'AdminController@store_activities')->midd
 
 Route::get('/tour/index_old', 'TourController@index_old')->middleware('auth');
 Route::resource('/tour', TourController::class)->middleware('auth');
+Route::post('/tour/upload_gallery/{tour_id}', 'TourController@upload_gallery');
 
 Route::get('/tour/{tour_id}/join', 'TourController@join')->middleware('auth');
 Route::get('/tour/{tour_id}/cancelBooking', 'TourController@cancelBooking')->middleware('auth');