function MultiSelectImageUploader({ name, onChange }) { return /*#__PURE__*/ React.createElement("input", { type: "file", name: name, multiple: true, className: "font-roboto", onChange: onChange, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function MultiSelectImageUploaderStory() { function handleFileChange(event) { console.log(event.target.files); } return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MultiSelectImageUploader, { name: "referenceImages", onChange: handleFileChange, __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MultiSelectImageUploader, { name: "additionalImages", onChange: handleFileChange, __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this })); } function MainComponent() { const handleUpload = (event)=>{ event.preventDefault(); const referenceFiles = event.target.elements.referenceImages.files; const additionalFiles = event.target.elements.additionalImages.files; const formData = new FormData(); for(let i = 0; i < referenceFiles.length; i++){ formData.append("referenceImages", referenceFiles[i]); } for(let i = 0; i < additionalFiles.length; i++){ formData.append("additionalImages", additionalFiles[i]); } fetch("/upload_references", { method: "POST", body: formData }); }; const handleFaceRecognition = ()=>{ fetch("/start_recognition", { method: "POST" }); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-4xl my-6", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, "Attendance System"), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 shadow-lg rounded-lg w-[400px]", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-2xl mb-4", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, "Upload Reference and Additional Images"), /*#__PURE__*/ React.createElement("form", { className: "flex flex-col gap-4", onSubmit: handleUpload, __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(MultiSelectImageUploader, { name: "referenceImages", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement(MultiSelectImageUploader, { name: "additionalImages", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "font-roboto bg-blue-500 text-white py-2 rounded", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "Upload"))), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 shadow-lg rounded-lg w-[400px] mt-6", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-2xl mb-4", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, "Take Attendance"), /*#__PURE__*/ React.createElement("button", { className: "font-roboto bg-green-500 text-white py-2 rounded", onClick: handleFaceRecognition, __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, "Start Face Recognition"))); }