now upload file gpx

aloxe · Jul 23, 2024 · 008a6a0 · 008a6a0
1 parent 20c97d1
commit 008a6a0
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 53 deletions.
diff --git a/public/datavelo/api/upload.php b/public/datavelo/api/upload.php
diff --git a/public/datavelo/api/uploadfile.php b/public/datavelo/api/uploadfile.php
@@ -0,0 +1,18 @@
+<?php
+$name = $_FILES['file']['name'];
+
+if (substr($name, -4, 4) == ".gpx") {
+   $newname = '../gpx/'.$name;
+
+   if (move_uploaded_file( $_FILES['file']['tmp_name'], $newname)) {
+//   send_OK();
+     $data = array('status' => 201, 'message' => '🐝 File written \o/ ('.$name.')', 'name' => $name);
+   } else {
+     $data = array("status"=> '0', "message"=> '☹ File NOT saved :o( ');
+   }
+} else {
+     $data = array("status"=> '0', "message"=> '☹ File NOT saved (not a gpx)');
+}
+
+echo json_encode($data);
+?>
diff --git a/public/datavelo/api/uploadjson.php b/public/datavelo/api/uploadjson.php
@@ -0,0 +1,30 @@
+<?php
+$json = json_decode(file_get_contents("php://input"));
+
+if (isset($json->slug))
+    $slug = $json->slug;
+if (isset($json->title))
+    $title = $json->title;
+if (isset($json->type))
+    $type = $json->type;
+
+if (isset($type) && isset($slug)) {
+    if ($type == "FeatureCollection") {
+        $filename = "../json/".$slug.".json";
+        $encodedJSON = json_encode($json, JSON_PRETTY_PRINT);
+        $fp = fopen($filename, "w") or die("Données non écrites");
+        $write = fwrite($fp, $encodedJSON);
+
+        $data = array('status' => 201, 'message' => '🐝 File written \o/ ('.$filename.')', 'title' => $title);
+
+        fclose($fp);
+        chmod($filename, 0777);
+    } else {
+        $data = array("status"=> '0', "message"=> '☹ File NOT written (wrong type) '.$slug);
+    }
+} else {
+    $data = array("status"=> '0', "message"=> '☹ File NOT written :o( '.$slug);
+}
+
+echo json_encode($data);
+?>
diff --git a/src/components/FileUpload.css b/src/components/FileUpload.css
@@ -4,4 +4,31 @@
     margin: 10px auto;
     background-color: azure;
     border: 2px dotted skyblue;
-}
+}
+
+.progress {
+    width: 80%;
+    margin: 2px auto;
+    background: aliceblue;
+    justify-content: flex-start;
+    align-items: center;
+    position: relative;
+    padding: 0;
+    display: flex;
+    height: 12px;
+  }
+
+  .progress-value {
+    animation: load 3s normal forwards;
+    background: teal;
+    height: 10px;
+    /* width: 0; */
+    font-size: smaller;
+    color: white;
+  }
+
+  /* @keyframes load {
+    0% { width: 0; }
+    100% { width: 100%; }
+  } */
+
diff --git a/src/components/FileUpload.jsx b/src/components/FileUpload.jsx
@@ -1,23 +1,15 @@
 import { useState } from "react";
 import Dropzone from "react-dropzone";
 import { uploadFile } from "../helpers/gpxUtil";
-// import { getFiles, uploadFile } from "../services/FileUploadService";
 import './FileUpload.css'
 
 const FileUpload = () => {
     const [selectedFiles, setSelectedFiles] = useState(undefined);
     const [currentFile, setCurrentFile] = useState(undefined);
     const [progress, setProgress] = useState(0);
     const [message, setMessage] = useState("");
-
     const [fileInfos, setFileInfos] = useState([]);
 
-    // useEffect(() => {
-    //     getFiles().then((response) => {
-    //       setFileInfos(response.data);
-    //     });
-    // }, []);
-
     const onDrop = (files) => {
         if (files.length > 0) {
             setSelectedFiles(files);
@@ -29,7 +21,7 @@ const FileUpload = () => {
 
         setProgress(0);
         setCurrentFile(currentFile);
-    
+
         uploadFile(currentFile, (event) => {
           setProgress(Math.round((100 * event.loaded) / event.total));
         })
@@ -49,28 +41,34 @@ const FileUpload = () => {
         setSelectedFiles(undefined);
       };
 
+      const mystyle = {
+        width: {progress}+'%'
+      };
+
   return (
-    <div>
+  <div>
+      <div className="progress">
+        <div className="progress-value" style={mystyle} >{progress}%</div>
+      </div>
+
+
+
     {currentFile && (
       <div className="progress mb-3">
-        <div
-          className="progress-bar progress-bar-info progress-bar-striped"
-          role="progressbar"
-          aria-valuenow={progress}
-          aria-valuemin="0"
-          aria-valuemax="100"
-          style={{ width: progress + "%" }}
-        >
-          {progress}%
-        </div>
+        <ol style="--length: 5" role="list">
+          <li style="--i: 1">{progress}%</li>
+        </ol>
       </div>
     )}
 
+
     <Dropzone onDrop={onDrop} multiple={false}>
       {({ getRootProps, getInputProps }) => (
         <section>
           <div {...getRootProps({ className: "dropzone" })}>
+          {/* <form id="uploadForm" > */}
             <input {...getInputProps()} />
+          {/* </form> */}
             {selectedFiles && selectedFiles[0].name ? (
               <div className="selected-file">
                 {selectedFiles && selectedFiles[0].name}

diff --git a/src/helpers/gpxUtil.js b/src/helpers/gpxUtil.js
@@ -46,7 +46,7 @@ export const loadGeoJson = async (url) => {
     geojson.distance = getDistance(geojson)
     geojson.slug = geojson.date + toSlug(geojson.title)
     // save geojson so we don't need gpx after that
-    // uploadJson(geojson) // already done
+    uploadJson(geojson) // already done
     return geojson;
   } catch (error) {
     console.error('Error fetching gpx data:', error.message);
@@ -56,6 +56,7 @@ export const loadGeoJson = async (url) => {
 
 export const uploadJson = async (geodata) => {
   const body = JSON.stringify(geodata)
+  console.log("uploadJson", body);
   const response = await axios.post('https://alix.guillard.fr/data/velo/api/upload.php', body, {
     headers: { 'Content-Type': 'application/json' }
 });
@@ -68,11 +69,11 @@ export const uploadJson = async (geodata) => {
 }
 
 export const uploadFile = (file, onUploadProgress) => {
+  // const uploadForm = document.getElementById('uploadForm');
   let formData = new FormData();
 
   formData.append("file", file);
-
-  return axios.post('https://alix.guillard.fr/data/velo/api/upload.php', formData, {
+  return axios.post('https://alix.guillard.fr/data/velo/api/uploadfile.php', formData, {
     headers: {
       "Content-Type": "multipart/form-data",
     },