新增API上傳驗證

api-upload.php

@@ -83,7 +83,7 @@ include($_SERVER['DOCUMENT_ROOT'] . "/Authorization/script/php/permission/check_
 									<form id="uploadForm">
 										<div class="row">
 											<div class="col-sm-6">
-												<div class="form-group">
+												<div class="form-group" id="APIName-Form">
 													<label class="control-label">API名稱</label>
 													<input required="required" type="text" id="APIName" name="APIName" class="form-control">
 												</div>
@@ -371,11 +371,14 @@ include($_SERVER['DOCUMENT_ROOT'] . "/Authorization/script/php/permission/check_
 	</section>
 	<script>
 		/*Vue */
+		var isDuplicate = false;
 		vm.mount('.body');
 		addUserImage(userName.charAt(0), role);
 		const revit = ['通用', '2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022', '2023'];
-		const dynamo = ['1.3','2.0', '2.1', '2.2', '2.3','2.13'];
+		const dynamo = ['1.3', '2.0', '2.1', '2.2', '2.3', '2.13'];
 		$(document).ready(function() {
+			$("#source").val(userName);
+
 			$("#software").on('change', function(event) {
 				$("#version").empty();
 				switch (event.currentTarget.value) {
@@ -402,21 +405,37 @@ include($_SERVER['DOCUMENT_ROOT'] . "/Authorization/script/php/permission/check_
 				}
 			});
 
+			$("#APIName").on('change', function() {
+				console.log($(this).val())
+				isDuplicate = checkDuplicate($(this).val())
+				if (isDuplicate) {
+					$("#APIName-Form").append(`<label id="APIName-label" class="error">此API已經匯入過</label>`);
+					$("#APIName-Form").addClass("has-error");
+				} else {
+					$("#APIName-label").remove();
+					$("#APIName-Form").attr("class","form-group");
+				}
+			})
+
 			$("#uploadForm").submit(function(e) {
 				e.preventDefault();
 
+				if (isDuplicate) {
+					alert('尚未提供上傳不同版本功能，請勿重複上傳!');
+					return;
+				}
 				if ($("#files").val() === "") {
-					alert('請選擇上傳檔案');
+					alert('請先選擇上傳檔案!');
 					return;
 				}
+				
 
 				var formData = new FormData();
 				$(".form-control").each(function(ele) {
-					formData.append($(this).attr('name'),$(this).val());
+					formData.append($(this).attr('name'), $(this).val());
 				})
 				for (i = 0; i < $("#files").prop('files').length; i++) {
 					formData.append("files[]", $("#files").prop('files')[i]);
-					//image_number++;
 				}
 				$.ajax({
 					type: "POST",
@@ -448,6 +467,28 @@ include($_SERVER['DOCUMENT_ROOT'] . "/Authorization/script/php/permission/check_
 
 			});
 		});
+
+		function checkDuplicate(APIName) {
+			var isDuplicate = false;
+			$.ajax({
+				url: "./script/php/get_api_duplicate.php",
+				type: "POST",
+				data: {
+					APIName: APIName,
+				},
+				async: false,
+				dataType: "json"
+			}).done(function(result) {
+				
+				if (result != "") {
+					isDuplicate = true;
+				}
+
+			}).error(function(error) {
+				console.log(error);
+			});
+			return isDuplicate;
+		}
 	</script>
 	<?php include("bim-support-body.html"); ?>
 

script/js/global.js

@@ -94,7 +94,7 @@ vm.component('header-menu', {
             </div>
         </li>
         <li>
-            <a id="upload-btn" href="./api-Upload.php" class="notification-icon" data-toggle="tooltip" title="匯入工具" data-placement="bottom">
+            <a id="upload-btn" :href="GetLocation" class="notification-icon" data-toggle="tooltip" title="匯入工具" data-placement="bottom">
 				<i class="fa fa-upload"></i>
 			</a>
         </li>
@@ -118,7 +118,20 @@ vm.component('header-menu', {
         </div>
     </div>
     <!-- end: search & user box -->
-</header>`
+</header>`,
+    computed: {
+        GetLocation() {
+            var url_href = window.location.href;
+            var url = new URL(url_href);
+            
+            if (url.pathname.includes("api")) {
+                return "api-upload.php";
+            }
+            return "";
+
+
+        }
+    },
 });
 
 vm.component('inner-menu', {

script/php/api_upload.php

@@ -8,7 +8,6 @@ if (isset($_FILES['files'])) {
 		$foldername = '../../上傳測試/' . $_POST['software'] . '/' . $_POST['APIName'];
 		if (!is_dir($foldername)) mkdir($foldername);
 		for ($count = 0; $count < count($_FILES['files']['name']); $count++) {
-			$extension = pathinfo($_FILES['files']['name'][$count], PATHINFO_EXTENSION);
 			move_uploaded_file($_FILES['files']['tmp_name'][$count], $foldername . '/' . $_FILES['files']['name'][$count]);
 		}
 		$placeholder = "?";

script/php/get_api_duplicate.php

@@ -0,0 +1,14 @@
+<?php
+include("connectSQL_Component.php");
+
+$result = "";
+if (isset($_POST['APIName'])) {
+    $sql = "SELECT [APIName] FROM [API_Table] WHERE [APIName] = ?";
+    $fetchResult = sqlsrv_query($conn, $sql, array($_POST['APIName']));
+    while ($row = sqlsrv_fetch_array($fetchResult)) {
+        $result = $row['APIName'];
+    }
+}
+
+
+echo json_encode($result);

test-upload.html

@@ -1,112 +0,0 @@
-<!doctype html>
-<html lang="en">
-
-<head>
-    <!-- Required meta tags -->
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    <!-- Bootstrap CSS -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
-        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
-
-    <title>Multiple File Upload with Progress Bar using JavaScript & PHP</title>
-</head>
-
-<body>
-
-    <div class="container">
-        <h1 class="mt-3 mb-3 text-center">Multiple File Upload with Progress Bar using JavaScript & PHP</h1>
-
-        <div class="card">
-            <div class="card-header">Select File</div>
-            <div class="card-body">
-                <table class="table">
-                    <tr>
-                        <td width="50%" align="right"><b>API名稱</b></td>
-                        <td width="50%">
-                            <input type="text" id="foldername" name="foldername" />
-                        </td>
-                    </tr>
-
-                    <tr>
-                        <td width="50%" align="right"><b>Select File</b></td>
-                        <td width="50%">
-                            <input type="file" id="file" multiple webkitdirectory mozdirectory />
-                        </td>
-                    </tr>
-                </table>
-            </div>
-        </div>
-        <br />
-        <div class="progress" id="progress_bar" style="display:none; ">
-
-            <div class="progress-bar" id="progress_bar_process" role="progressbar" style="width:0%">0%</div>
-
-        </div>
-
-        <div id="uploaded_image" class="row mt-5"></div>
-    </div>
-</body>
-
-</html>
-
-<script>
-    function _(element) {
-        return document.getElementById(element);
-    }
-
-    _('select_file').onchange = function (event) {
-
-        var form_data = new FormData();
-
-        var image_number = 1;
-
-        var error = '';
-        form_data.append("foldername", _('foldername').value);
-        for (var count = 0; count < _('select_file').files.length; count++) {
-            form_data.append("files[]", _('select_file').files[count]);
-            image_number++;
-        }
-
-        if (error != '') {
-            _('uploaded_image').innerHTML = error;
-
-            _('select_file').value = '';
-        } else {
-            _('progress_bar').style.display = 'block';
-
-            var ajax_request = new XMLHttpRequest();
-
-            ajax_request.open("POST", "upload.php");
-
-            ajax_request.upload.addEventListener('progress', function (event) {
-
-                var percent_completed = Math.round((event.loaded / event.total) * 100);
-
-                _('progress_bar_process').style.width = percent_completed + '%';
-
-                _('progress_bar_process').innerHTML = percent_completed + '% completed';
-
-            });
-
-            ajax_request.addEventListener('load', function (event) {
-
-                _('uploaded_image').innerHTML =
-                    '<div class="alert alert-success">Files Uploaded Successfully</div>';
-
-                _('select_file').value = '';
-
-            });
-
-
-            ajax_request.onreadystatechange = () => {
-                if (ajax_request.readyState === 4) {
-                    console.log(ajax_request.response);
-                }
-            }
-            ajax_request.send(form_data);
-        }
-
-    };
-</script>

test.html

@@ -1,12 +0,0 @@
-<html>
-  <head>
-  <title>Upload Folder using PHP </title>
-  </head>
-  <body>
-  <form action="#" method="post" enctype="multipart/form-data"> 
-  Type Folder Name:<input type="text" name="foldername" /><br/><br/>
-  Select Folder to Upload: <input type="file" name="files[]" id="files" multiple directory webkitdirectory moxdirectory/><br/><br/> 
-  <input type="Submit" value="Upload" name="upload" />
-  </form>
-  </body>
-  </html>