Multiple File Upload to Google Drive<\/title>\n <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"><\/script>\n <style>\n body {\n font-family: Arial, sans-serif;\n background-color: #f4f4f4;\n margin: 0;\n padding: 20px;\n }\n\n form {\n background: #fff;\n padding: 20px;\n border-radius: 5px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n max-width: 400px;\n margin: auto;\n }\n\n input[type=\"text\"],\n input[type=\"file\"],\n input[type=\"submit\"] {\n width: 100%;\n padding: 10px;\n margin: 10px 0;\n border: 1px solid #ddd;\n border-radius: 5px;\n }\n\n input[type=\"submit\"] {\n background: #5cb85c;\n color: white;\n border: none;\n cursor: pointer;\n }\n\n input[type=\"submit\"]:hover {\n background: #4cae4c;\n }\n\n #progress {\n width: 100%;\n height: 20px;\n background: #e0e0e0;\n border-radius: 5px;\n margin-top: 10px;\n display: none;\n }\n\n #progress-bar {\n height: 100%;\n background: #b85cb8;\n width: 0;\n border-radius: 5px;\n }\n\n #message {\n text-align: center;\n margin-top: 20px;\n padding: 10px;\n border-radius: 4px;\n display: none;\n }\n\n .error-message {\n background-color: #ffd2d2;\n border: 1px solid #ff9999;\n color: #d8000c;\n }\n\n .success-message {\n background-color: #dff2d8;\n border: 1px solid #4cae4c;\n color: #4cae4c;\n }\n\n #file-list {\n margin-top: 10px;\n }\n\n #file-list .file-item {\n background: #f0f0f0;\n padding: 5px;\n margin-bottom: 5px;\n border-radius: 3px;\n }\n <\/style>\n<\/head>\n\n<body>\n <form id=\"form\" method=\"post\">\n <h4>\u0e2a\u0e48\u0e07\u0e07\u0e32\u0e19 Upload File to Google Drive<\/h4>\n <label for=\"customFileName\">\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48-\u0e0a\u0e37\u0e48\u0e2d \u0e19\u0e32\u0e21\u0e2a\u0e01\u0e38\u0e25<\/label>\n <input type=\"text\" id=\"customFileName\" name=\"customFileName\" placeholder=\"01-\u0e40\u0e21\u0e18\u0e32\u0e27\u0e14\u0e35 \u0e01\u0e30\u0e01\u0e32\u0e23\u0e14\u0e35\"><br>\n <label for=\"uploadfile\">Select Files: \u0e40\u0e25\u0e37\u0e2d\u0e01\u0e44\u0e1f\u0e25\u0e4c\u0e07\u0e32\u0e19\u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e2a\u0e48\u0e07<\/label>\n <input name=\"file\" id=\"uploadfile\" type=\"file\" accept=\"image\/*,video\/mp4,.zip,.rar,.doc,.docx,.xls,.xlsx,.pdf\" multiple>\n <div id=\"file-list\"><\/div>\n <div id=\"data\"><\/div>\n <input id=\"submit\" type=\"submit\" value=\"Upload\">\n <div id=\"progress\">\n <div id=\"progress-bar\"><\/div>\n <\/div>\n <div id=\"message\"><\/div>\n <\/form>\n\n <script>\n\t\tfunction resizeImage(file, maxWidth) {\n\t\t\treturn new Promise((resolve) => {\n\t\t\t\tconst reader = new FileReader();\n\t\t\t\t\n\t\t\t\treader.onload = function(e) {\n\t\t\t\t\tconst img = new Image();\n\t\t\t\t\t\n\t\t\t\t\timg.onload = function() {\n\t\t\t\t\t\tlet width = img.width;\n\t\t\t\t\t\tlet height = img.height;\n\n\t\t\t\t\t\tif (width > maxWidth) {\n\t\t\t\t\t\t\theight *= maxWidth \/ width;\n\t\t\t\t\t\t\twidth = maxWidth;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tconst canvas = document.createElement('canvas');\n\t\t\t\t\t\tcanvas.width = width;\n\t\t\t\t\t\tcanvas.height = height;\n\t\t\t\t\t\t\n\t\t\t\t\t\tconst ctx = canvas.getContext('2d');\n\t\t\t\t\t\tctx.drawImage(img, 0, 0, width, height);\n\n\t\t\t\t\t\tcanvas.toBlob(function(blob) {\n\t\t\t\t\t\t\tresolve(new File([blob], file.name, {\n\t\t\t\t\t\t\t\ttype: 'image\/jpeg',\n\t\t\t\t\t\t\t\tlastModified: Date.now()\n\t\t\t\t\t\t\t}));\n\t\t\t\t\t\t}, 'image\/jpeg', 0.8);\n\t\t\t\t\t};\n\t\t\t\t\t\n\t\t\t\t\timg.src = e.target.result;\n\t\t\t\t};\n\t\t\t\t\n\t\t\t\treader.readAsDataURL(file);\n\t\t\t});\n\t\t}\n\n function showMessage(message, isError = false) {\n $(\"#message\")\n .removeClass(\"error-message success-message\")\n .addClass(isError ? \"error-message\" : \"success-message\")\n .html(message)\n .fadeIn();\n\n if (!isError) {\n setTimeout(() => {\n $(\"#message\").fadeOut();\n }, 3000);\n }\n }\n\n function validateForm() {\n const customFileName = $(\"#customFileName\").val().trim();\n const fileCount = $(\"#data input[name^='data']\").length;\n\n if (!customFileName) {\n showMessage(\"\u0e01\u0e23\u0e38\u0e13\u0e32\u0e01\u0e23\u0e2d\u0e01\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 \u0e0a\u0e37\u0e48\u0e2d \u0e19\u0e32\u0e21\u0e2a\u0e01\u0e38\u0e25\", true);\n $(\"#customFileName\").focus();\n return false;\n }\n\n if (fileCount === 0) {\n showMessage(\"\u0e01\u0e23\u0e38\u0e13\u0e32\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e44\u0e1f\u0e25\u0e4c\u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e2d\u0e31\u0e1e\u0e42\u0e2b\u0e25\u0e14\", true);\n return false;\n }\n\n return true;\n }\n\n $('#uploadfile').on(\"change\", function() {\n var files = Array.from(this.files);\n var customFileName = $(\"#customFileName\").val().trim();\n customFileName = customFileName.replace(\/\\s+\/g, \"_\");\n\n $(\"#file-list\").empty();\n $(\"#data\").empty();\n $(\"#message\").hide();\n\n Promise.all(files.map(file => {\n if (file.type.startsWith('image\/')) {\n return resizeImage(file, 1280);\n }\n return file;\n })).then(processedFiles => {\n processedFiles.forEach((file, index) => {\n processFile(file, customFileName, index);\n $(\"#file-list\").append(`<div class=\"file-item\">${file.name}<\/div>`);\n });\n });\n });\n\n function processFile(file, customFileName, index) {\n var fr = new FileReader();\n fr.fileName = file.name;\n\n fr.onload = function(e) {\n var originalFileName = e.target.fileName;\n var newFileName = customFileName ? `${customFileName}_${index + 1}_${originalFileName}` : originalFileName;\n\n var html = `<input type=\"hidden\" name=\"data${index}\" value=\"${e.target.result.replace(\/^.*,\/, '')}\" >`;\n html += `<input type=\"hidden\" name=\"mimetype${index}\" value=\"${e.target.result.match(\/^.*(?=;)\/)[0]}\" >`;\n html += `<input type=\"hidden\" name=\"filename${index}\" value=\"${newFileName}\" >`;\n $(\"#data\").append(html);\n }\n fr.readAsDataURL(file);\n }\n\n $('#form').on('submit', function(event) {\n event.preventDefault();\n\n if (!validateForm()) {\n return false;\n }\n\n var formData = $(\"#form\").serialize();\n formData += `&fileCount=${$(\"#data input[name^='data']\").length}`;\n\n $(\"#progress\").show();\n $(\"#progress-bar\").css(\"width\", \"0%\");\n $(\"#message\").hide();\n\n $.ajax({\n url: \"https:\/\/script.google.com\/macros\/s\/AKfycby5cHKISFeUweVmlopWWIHu9PFccwrqz8Wq3niiwOeiQfqPZG29TamtIghxQHffywX3-A\/exec\",\n method: \"POST\",\n data: formData,\n success: function(response) {\n showMessage(\"\u0e2d\u0e31\u0e1e\u0e42\u0e2b\u0e25\u0e14\u0e44\u0e1f\u0e25\u0e4c\u0e40\u0e2a\u0e23\u0e47\u0e08\u0e2a\u0e21\u0e1a\u0e39\u0e23\u0e13\u0e4c\");\n $(\"#progress-bar\").css(\"width\", \"100%\");\n\n $(\"#customFileName\").val('');\n $(\"#uploadfile\").val('');\n $(\"#data\").empty();\n $(\"#file-list\").empty();\n\n\t\t\t\t\t\/\/ \u0e23\u0e35\u0e40\u0e1f\u0e23\u0e0a \u0e2b\u0e19\u0e49\u0e32\u0e41\u0e2a\u0e14\u0e07\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e44\u0e1f\u0e25\u0e4c\u0e43\u0e2b\u0e21\u0e48 \n\t\t\t\t\tlistFiles();\n\t\t\t\t\t\n setTimeout(function() {\n $(\"#progress\").fadeOut();\n $(\"#progress-bar\").css(\"width\", \"0%\");\n }, 3000);\n },\n error: function(xhr, status, error) {\n showMessage(\"\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14\u0e43\u0e19\u0e01\u0e32\u0e23\u0e2d\u0e31\u0e1e\u0e42\u0e2b\u0e25\u0e14\", true);\n }\n });\n\n var interval = setInterval(function() {\n var currentWidth = $(\"#progress-bar\").width() \/ $(\"#progress\").width() * 100;\n if (currentWidth < 100) {\n var randomIncrement = Math.floor(Math.random() * 5) + 1;\n $(\"#progress-bar\").css(\"width\", (currentWidth + randomIncrement) + \"%\");\n } else {\n clearInterval(interval);\n }\n }, 300);\n });\n <\/script>\n<\/body>\n\n<\/html>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<!DOCTYPE html>\n<html lang=\"th\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e44\u0e1f\u0e25\u0e4c\u0e08\u0e32\u0e01 Google Drive<\/title>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/axios\/1.6.7\/axios.min.js\"><\/script>\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/open-sans\/1.1.0\/sans\/400.min.css\" rel=\"stylesheet\">\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/open-sans\/1.1.0\/sans\/700.min.css\" rel=\"stylesheet\">\n <style>\n body {\n font-family: 'Open Sans', sans-serif;\n line-height: 1.6;\n color: #333;\n margin: 1 auto;\n padding: 2px;\n }\n h1 {\n color: #2c3e50;\n text-align: center;\n font-weight: 700;\n }\n .table-container-gd {\n height: 500px;\n overflow-y: auto;\n border: 1px solid #f0f0f0;\n border-radius: 3px;\n margin-bottom: 5px;\n box-shadow: 0 2px 5px rgba(0,0,0,0.05);\n }\n table {\n border-collapse: separate;\n border-spacing: 0;\n width: 100%;\n }\n th, td {\n padding: 12px 15px;\n text-align: left;\n border-bottom: 1px solid #f0f0f0;\n }\n th {\n position: sticky;\n top: 0;\n background-color: #f8f9fa;\n color: #2c3e50;\n font-weight: 700;\n text-transform: uppercase;\n font-size: 0.9em;\n letter-spacing: 0.5px;\n }\n\tth:nth-child(2), td:nth-child(2) {\n \t width: 100px; \n text-align: center;\n\t}\n\tth:nth-child(3), td:nth-child(3) {\n \t width: 80px;\n text-align: center; \n\t}\n tbody tr:hover {\n background-color: #f8f8f8;\n }\n .reload-link {\n display: inline-block;\n padding: 10px 20px;\n background-color: #3498db;\n color: white;\n text-decoration: none;\n border-radius: 5px;\n transition: background-color 0.3s;\n font-weight: 700;\n }\n .reload-link:hover {\n background-color: #2980b9;\n }\n .file-link {\n color: #3498db;\n text-decoration: none;\n transition: color 0.3s;\n }\n .file-link:hover {\n color: #2980b9;\n }\n <\/style>\n<\/head>\n<body> \n <div class=\"table-container-gd\">\n <table id=\"fileTable\">\n <thead>\n <tr>\n <th><a href=\"#\" class=\"reload-link\" onclick=\"listFiles(); return false;\">\u0e42\u0e2b\u0e25\u0e14\u0e43\u0e2b\u0e21\u0e48<\/a> \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e0a\u0e37\u0e48\u0e2d\u0e44\u0e1f\u0e25\u0e4c <\/th>\n <th>\u0e27\u0e31\u0e19\u0e40\u0e27\u0e25\u0e32<\/th>\n <th>\u0e02\u0e19\u0e32\u0e14<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"fileList\"><\/tbody>\n <\/table>\n <\/div>\n \n\n <script>\n const API_KEY = 'AIzaSyDESM8XwBxuDqRj-yW-2cHHBEyf8NJ5CUo';\n const FOLDER_ID = '1UJqes_dVe1z8669Wyhw1g7PwoujaoqYg';\n\n function formatFileSize(bytes) {\n if (bytes === 0 || bytes === undefined) return 'N\/A';\n const mb = bytes \/ (1024 * 1024);\n return mb.toFixed(2) + '';\n }\n\n async function listFiles() {\n try {\n const fileList = document.getElementById('fileList');\n fileList.innerHTML = '<tr><td colspan=\"3\" style=\"text-align: center;\">\u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25...<\/td><\/tr>';\n\n const response = await axios.get(`https:\/\/www.googleapis.com\/drive\/v3\/files`, {\n params: {\n q: `'${FOLDER_ID}' in parents`,\n fields: 'files(id, name, modifiedTime, size, webViewLink)',\n key: API_KEY\n }\n });\n\n const files = response.data.files;\n fileList.innerHTML = '';\n\n files.forEach(file => {\n const row = fileList.insertRow();\n const nameCell = row.insertCell(0);\n const linkElement = document.createElement('a');\n linkElement.href = file.webViewLink;\n linkElement.textContent = file.name;\n linkElement.className = 'file-link';\n linkElement.target = '_blank';\n nameCell.appendChild(linkElement);\n\t\t\t\t\t\n \n \/\/row.insertCell(1).textContent = new Date(file.modifiedTime).toLocaleString('th-TH');\n row.insertCell(1).textContent = new Date(file.modifiedTime).toLocaleTimeString('th-TH');\n\n row.insertCell(2).textContent = formatFileSize(parseInt(file.size));\n });\n } catch (error) {\n console.error('\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14\u0e43\u0e19\u0e01\u0e32\u0e23\u0e14\u0e36\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25:', error);\n const fileList = document.getElementById('fileList');\n fileList.innerHTML = '<tr><td colspan=\"3\" style=\"text-align: center; color: red;\">\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14\u0e43\u0e19\u0e01\u0e32\u0e23\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 \u0e01\u0e23\u0e38\u0e13\u0e32\u0e25\u0e2d\u0e07\u0e43\u0e2b\u0e21\u0e48\u0e2d\u0e35\u0e01\u0e04\u0e23\u0e31\u0e49\u0e07<\/td><\/tr>';\n }\n }\n\n listFiles();\n <\/script>\n<\/body>\n<\/html>\n<\/div>\n<\/div>\n\n\n\n<div style=\"text-align: right;\">\n <a href=\"https:\/\/tubtimsiam04.ac.th\/?page_id=1017\" class=\"reload-link\">\u0e01\u0e25\u0e31\u0e1a\u0e44\u0e1b\u0e17\u0e35\u0e48\u0e2b\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e2d\u0e2d\u0e19\u0e44\u0e25\u0e19\u0e4c\u0e04\u0e23\u0e39\u0e21\u0e19\u0e15\u0e23\u0e35<\/a>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0e0a\u0e48\u0e2d\u0e07\u0e17\u0e32\u0e07\u0e2a\u0e48\u0e07\u0e07\u0e32\u0e19\u0e01\u0e32\u0e23\u0e1a\u0e49\u0e32\u0e19<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"colormag_page_container_layout":"no_sidebar_full_width","colormag_page_sidebar_layout":"no_sidebar","footnotes":""},"class_list":["post-2054","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/2054","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2054"}],"version-history":[{"count":55,"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/2054\/revisions"}],"predecessor-version":[{"id":4373,"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/2054\/revisions\/4373"}],"wp:attachment":[{"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2054"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\n\n\n\n \n \n Multiple File Upload to Google Drive<\/title>\n <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"><\/script>\n <style>\n body {\n font-family: Arial, sans-serif;\n background-color: #f4f4f4;\n margin: 0;\n padding: 20px;\n }\n\n form {\n background: #fff;\n padding: 20px;\n border-radius: 5px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n max-width: 400px;\n margin: auto;\n }\n\n input[type=\"text\"],\n input[type=\"file\"],\n input[type=\"submit\"] {\n width: 100%;\n padding: 10px;\n margin: 10px 0;\n border: 1px solid #ddd;\n border-radius: 5px;\n }\n\n input[type=\"submit\"] {\n background: #5cb85c;\n color: white;\n border: none;\n cursor: pointer;\n }\n\n input[type=\"submit\"]:hover {\n background: #4cae4c;\n }\n\n #progress {\n width: 100%;\n height: 20px;\n background: #e0e0e0;\n border-radius: 5px;\n margin-top: 10px;\n display: none;\n }\n\n #progress-bar {\n height: 100%;\n background: #b85cb8;\n width: 0;\n border-radius: 5px;\n }\n\n #message {\n text-align: center;\n margin-top: 20px;\n padding: 10px;\n border-radius: 4px;\n display: none;\n }\n\n .error-message {\n background-color: #ffd2d2;\n border: 1px solid #ff9999;\n color: #d8000c;\n }\n\n .success-message {\n background-color: #dff2d8;\n border: 1px solid #4cae4c;\n color: #4cae4c;\n }\n\n #file-list {\n margin-top: 10px;\n }\n\n #file-list .file-item {\n background: #f0f0f0;\n padding: 5px;\n margin-bottom: 5px;\n border-radius: 3px;\n }\n <\/style>\n<\/head>\n\n<body>\n <form id=\"form\" method=\"post\">\n <h4>\u0e2a\u0e48\u0e07\u0e07\u0e32\u0e19 Upload File to Google Drive<\/h4>\n <label for=\"customFileName\">\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48-\u0e0a\u0e37\u0e48\u0e2d \u0e19\u0e32\u0e21\u0e2a\u0e01\u0e38\u0e25<\/label>\n <input type=\"text\" id=\"customFileName\" name=\"customFileName\" placeholder=\"01-\u0e40\u0e21\u0e18\u0e32\u0e27\u0e14\u0e35 \u0e01\u0e30\u0e01\u0e32\u0e23\u0e14\u0e35\"><br>\n <label for=\"uploadfile\">Select Files: \u0e40\u0e25\u0e37\u0e2d\u0e01\u0e44\u0e1f\u0e25\u0e4c\u0e07\u0e32\u0e19\u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e2a\u0e48\u0e07<\/label>\n <input name=\"file\" id=\"uploadfile\" type=\"file\" accept=\"image\/*,video\/mp4,.zip,.rar,.doc,.docx,.xls,.xlsx,.pdf\" multiple>\n <div id=\"file-list\"><\/div>\n <div id=\"data\"><\/div>\n <input id=\"submit\" type=\"submit\" value=\"Upload\">\n <div id=\"progress\">\n <div id=\"progress-bar\"><\/div>\n <\/div>\n <div id=\"message\"><\/div>\n <\/form>\n\n <script>\n\t\tfunction resizeImage(file, maxWidth) {\n\t\t\treturn new Promise((resolve) => {\n\t\t\t\tconst reader = new FileReader();\n\t\t\t\t\n\t\t\t\treader.onload = function(e) {\n\t\t\t\t\tconst img = new Image();\n\t\t\t\t\t\n\t\t\t\t\timg.onload = function() {\n\t\t\t\t\t\tlet width = img.width;\n\t\t\t\t\t\tlet height = img.height;\n\n\t\t\t\t\t\tif (width > maxWidth) {\n\t\t\t\t\t\t\theight *= maxWidth \/ width;\n\t\t\t\t\t\t\twidth = maxWidth;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tconst canvas = document.createElement('canvas');\n\t\t\t\t\t\tcanvas.width = width;\n\t\t\t\t\t\tcanvas.height = height;\n\t\t\t\t\t\t\n\t\t\t\t\t\tconst ctx = canvas.getContext('2d');\n\t\t\t\t\t\tctx.drawImage(img, 0, 0, width, height);\n\n\t\t\t\t\t\tcanvas.toBlob(function(blob) {\n\t\t\t\t\t\t\tresolve(new File([blob], file.name, {\n\t\t\t\t\t\t\t\ttype: 'image\/jpeg',\n\t\t\t\t\t\t\t\tlastModified: Date.now()\n\t\t\t\t\t\t\t}));\n\t\t\t\t\t\t}, 'image\/jpeg', 0.8);\n\t\t\t\t\t};\n\t\t\t\t\t\n\t\t\t\t\timg.src = e.target.result;\n\t\t\t\t};\n\t\t\t\t\n\t\t\t\treader.readAsDataURL(file);\n\t\t\t});\n\t\t}\n\n function showMessage(message, isError = false) {\n $(\"#message\")\n .removeClass(\"error-message success-message\")\n .addClass(isError ? \"error-message\" : \"success-message\")\n .html(message)\n .fadeIn();\n\n if (!isError) {\n setTimeout(() => {\n $(\"#message\").fadeOut();\n }, 3000);\n }\n }\n\n function validateForm() {\n const customFileName = $(\"#customFileName\").val().trim();\n const fileCount = $(\"#data input[name^='data']\").length;\n\n if (!customFileName) {\n showMessage(\"\u0e01\u0e23\u0e38\u0e13\u0e32\u0e01\u0e23\u0e2d\u0e01\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 \u0e0a\u0e37\u0e48\u0e2d \u0e19\u0e32\u0e21\u0e2a\u0e01\u0e38\u0e25\", true);\n $(\"#customFileName\").focus();\n return false;\n }\n\n if (fileCount === 0) {\n showMessage(\"\u0e01\u0e23\u0e38\u0e13\u0e32\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e44\u0e1f\u0e25\u0e4c\u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e2d\u0e31\u0e1e\u0e42\u0e2b\u0e25\u0e14\", true);\n return false;\n }\n\n return true;\n }\n\n $('#uploadfile').on(\"change\", function() {\n var files = Array.from(this.files);\n var customFileName = $(\"#customFileName\").val().trim();\n customFileName = customFileName.replace(\/\\s+\/g, \"_\");\n\n $(\"#file-list\").empty();\n $(\"#data\").empty();\n $(\"#message\").hide();\n\n Promise.all(files.map(file => {\n if (file.type.startsWith('image\/')) {\n return resizeImage(file, 1280);\n }\n return file;\n })).then(processedFiles => {\n processedFiles.forEach((file, index) => {\n processFile(file, customFileName, index);\n $(\"#file-list\").append(`<div class=\"file-item\">${file.name}<\/div>`);\n });\n });\n });\n\n function processFile(file, customFileName, index) {\n var fr = new FileReader();\n fr.fileName = file.name;\n\n fr.onload = function(e) {\n var originalFileName = e.target.fileName;\n var newFileName = customFileName ? `${customFileName}_${index + 1}_${originalFileName}` : originalFileName;\n\n var html = `<input type=\"hidden\" name=\"data${index}\" value=\"${e.target.result.replace(\/^.*,\/, '')}\" >`;\n html += `<input type=\"hidden\" name=\"mimetype${index}\" value=\"${e.target.result.match(\/^.*(?=;)\/)[0]}\" >`;\n html += `<input type=\"hidden\" name=\"filename${index}\" value=\"${newFileName}\" >`;\n $(\"#data\").append(html);\n }\n fr.readAsDataURL(file);\n }\n\n $('#form').on('submit', function(event) {\n event.preventDefault();\n\n if (!validateForm()) {\n return false;\n }\n\n var formData = $(\"#form\").serialize();\n formData += `&fileCount=${$(\"#data input[name^='data']\").length}`;\n\n $(\"#progress\").show();\n $(\"#progress-bar\").css(\"width\", \"0%\");\n $(\"#message\").hide();\n\n $.ajax({\n url: \"https:\/\/script.google.com\/macros\/s\/AKfycby5cHKISFeUweVmlopWWIHu9PFccwrqz8Wq3niiwOeiQfqPZG29TamtIghxQHffywX3-A\/exec\",\n method: \"POST\",\n data: formData,\n success: function(response) {\n showMessage(\"\u0e2d\u0e31\u0e1e\u0e42\u0e2b\u0e25\u0e14\u0e44\u0e1f\u0e25\u0e4c\u0e40\u0e2a\u0e23\u0e47\u0e08\u0e2a\u0e21\u0e1a\u0e39\u0e23\u0e13\u0e4c\");\n $(\"#progress-bar\").css(\"width\", \"100%\");\n\n $(\"#customFileName\").val('');\n $(\"#uploadfile\").val('');\n $(\"#data\").empty();\n $(\"#file-list\").empty();\n\n\t\t\t\t\t\/\/ \u0e23\u0e35\u0e40\u0e1f\u0e23\u0e0a \u0e2b\u0e19\u0e49\u0e32\u0e41\u0e2a\u0e14\u0e07\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e44\u0e1f\u0e25\u0e4c\u0e43\u0e2b\u0e21\u0e48 \n\t\t\t\t\tlistFiles();\n\t\t\t\t\t\n setTimeout(function() {\n $(\"#progress\").fadeOut();\n $(\"#progress-bar\").css(\"width\", \"0%\");\n }, 3000);\n },\n error: function(xhr, status, error) {\n showMessage(\"\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14\u0e43\u0e19\u0e01\u0e32\u0e23\u0e2d\u0e31\u0e1e\u0e42\u0e2b\u0e25\u0e14\", true);\n }\n });\n\n var interval = setInterval(function() {\n var currentWidth = $(\"#progress-bar\").width() \/ $(\"#progress\").width() * 100;\n if (currentWidth < 100) {\n var randomIncrement = Math.floor(Math.random() * 5) + 1;\n $(\"#progress-bar\").css(\"width\", (currentWidth + randomIncrement) + \"%\");\n } else {\n clearInterval(interval);\n }\n }, 300);\n });\n <\/script>\n<\/body>\n\n<\/html>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<!DOCTYPE html>\n<html lang=\"th\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e44\u0e1f\u0e25\u0e4c\u0e08\u0e32\u0e01 Google Drive<\/title>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/axios\/1.6.7\/axios.min.js\"><\/script>\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/open-sans\/1.1.0\/sans\/400.min.css\" rel=\"stylesheet\">\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/open-sans\/1.1.0\/sans\/700.min.css\" rel=\"stylesheet\">\n <style>\n body {\n font-family: 'Open Sans', sans-serif;\n line-height: 1.6;\n color: #333;\n margin: 1 auto;\n padding: 2px;\n }\n h1 {\n color: #2c3e50;\n text-align: center;\n font-weight: 700;\n }\n .table-container-gd {\n height: 500px;\n overflow-y: auto;\n border: 1px solid #f0f0f0;\n border-radius: 3px;\n margin-bottom: 5px;\n box-shadow: 0 2px 5px rgba(0,0,0,0.05);\n }\n table {\n border-collapse: separate;\n border-spacing: 0;\n width: 100%;\n }\n th, td {\n padding: 12px 15px;\n text-align: left;\n border-bottom: 1px solid #f0f0f0;\n }\n th {\n position: sticky;\n top: 0;\n background-color: #f8f9fa;\n color: #2c3e50;\n font-weight: 700;\n text-transform: uppercase;\n font-size: 0.9em;\n letter-spacing: 0.5px;\n }\n\tth:nth-child(2), td:nth-child(2) {\n \t width: 100px; \n text-align: center;\n\t}\n\tth:nth-child(3), td:nth-child(3) {\n \t width: 80px;\n text-align: center; \n\t}\n tbody tr:hover {\n background-color: #f8f8f8;\n }\n .reload-link {\n display: inline-block;\n padding: 10px 20px;\n background-color: #3498db;\n color: white;\n text-decoration: none;\n border-radius: 5px;\n transition: background-color 0.3s;\n font-weight: 700;\n }\n .reload-link:hover {\n background-color: #2980b9;\n }\n .file-link {\n color: #3498db;\n text-decoration: none;\n transition: color 0.3s;\n }\n .file-link:hover {\n color: #2980b9;\n }\n <\/style>\n<\/head>\n<body> \n <div class=\"table-container-gd\">\n <table id=\"fileTable\">\n <thead>\n <tr>\n <th><a href=\"#\" class=\"reload-link\" onclick=\"listFiles(); return false;\">\u0e42\u0e2b\u0e25\u0e14\u0e43\u0e2b\u0e21\u0e48<\/a> \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e0a\u0e37\u0e48\u0e2d\u0e44\u0e1f\u0e25\u0e4c <\/th>\n <th>\u0e27\u0e31\u0e19\u0e40\u0e27\u0e25\u0e32<\/th>\n <th>\u0e02\u0e19\u0e32\u0e14<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"fileList\"><\/tbody>\n <\/table>\n <\/div>\n \n\n <script>\n const API_KEY = 'AIzaSyDESM8XwBxuDqRj-yW-2cHHBEyf8NJ5CUo';\n const FOLDER_ID = '1UJqes_dVe1z8669Wyhw1g7PwoujaoqYg';\n\n function formatFileSize(bytes) {\n if (bytes === 0 || bytes === undefined) return 'N\/A';\n const mb = bytes \/ (1024 * 1024);\n return mb.toFixed(2) + '';\n }\n\n async function listFiles() {\n try {\n const fileList = document.getElementById('fileList');\n fileList.innerHTML = '<tr><td colspan=\"3\" style=\"text-align: center;\">\u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25...<\/td><\/tr>';\n\n const response = await axios.get(`https:\/\/www.googleapis.com\/drive\/v3\/files`, {\n params: {\n q: `'${FOLDER_ID}' in parents`,\n fields: 'files(id, name, modifiedTime, size, webViewLink)',\n key: API_KEY\n }\n });\n\n const files = response.data.files;\n fileList.innerHTML = '';\n\n files.forEach(file => {\n const row = fileList.insertRow();\n const nameCell = row.insertCell(0);\n const linkElement = document.createElement('a');\n linkElement.href = file.webViewLink;\n linkElement.textContent = file.name;\n linkElement.className = 'file-link';\n linkElement.target = '_blank';\n nameCell.appendChild(linkElement);\n\t\t\t\t\t\n \n \/\/row.insertCell(1).textContent = new Date(file.modifiedTime).toLocaleString('th-TH');\n row.insertCell(1).textContent = new Date(file.modifiedTime).toLocaleTimeString('th-TH');\n\n row.insertCell(2).textContent = formatFileSize(parseInt(file.size));\n });\n } catch (error) {\n console.error('\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14\u0e43\u0e19\u0e01\u0e32\u0e23\u0e14\u0e36\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25:', error);\n const fileList = document.getElementById('fileList');\n fileList.innerHTML = '<tr><td colspan=\"3\" style=\"text-align: center; color: red;\">\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14\u0e43\u0e19\u0e01\u0e32\u0e23\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 \u0e01\u0e23\u0e38\u0e13\u0e32\u0e25\u0e2d\u0e07\u0e43\u0e2b\u0e21\u0e48\u0e2d\u0e35\u0e01\u0e04\u0e23\u0e31\u0e49\u0e07<\/td><\/tr>';\n }\n }\n\n listFiles();\n <\/script>\n<\/body>\n<\/html>\n<\/div>\n<\/div>\n\n\n\n<div style=\"text-align: right;\">\n <a href=\"https:\/\/tubtimsiam04.ac.th\/?page_id=1017\" class=\"reload-link\">\u0e01\u0e25\u0e31\u0e1a\u0e44\u0e1b\u0e17\u0e35\u0e48\u0e2b\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e2d\u0e2d\u0e19\u0e44\u0e25\u0e19\u0e4c\u0e04\u0e23\u0e39\u0e21\u0e19\u0e15\u0e23\u0e35<\/a>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0e0a\u0e48\u0e2d\u0e07\u0e17\u0e32\u0e07\u0e2a\u0e48\u0e07\u0e07\u0e32\u0e19\u0e01\u0e32\u0e23\u0e1a\u0e49\u0e32\u0e19<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"colormag_page_container_layout":"no_sidebar_full_width","colormag_page_sidebar_layout":"no_sidebar","footnotes":""},"class_list":["post-2054","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/2054","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2054"}],"version-history":[{"count":55,"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/2054\/revisions"}],"predecessor-version":[{"id":4373,"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/2054\/revisions\/4373"}],"wp:attachment":[{"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2054"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}