Scribd
Upload
5 views

File.html

Uploaded by

revanthgowdarevanth
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
5 views

File.html

Uploaded by

revanthgowdarevanth
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Organic Food Traceability</title>
<style>
body {
font-family: sans-serif;
margin: 20px;
}
.container {
width: 80%;
margin: auto;
}
form {
border: 1px solid #ccc;
padding: 20px;
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"], input[type="file"], textarea {
width: calc(100% - 12px);
padding: 6px;
margin-bottom: 10px;
border: 1px solid #ddd;
}
button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
#traceabilityData {
border: 1px solid #ccc;
padding: 20px;
}
#traceabilityData ul {
list-style-type: none;
padding: 0;
}
#traceabilityData li {
margin-bottom: 10px;
}

</style>
</head>
<body>
<div class="container">
<h1>Organic Food Traceability</h1>

<form id="traceabilityForm">
<h2>Add Traceability Data</h2>
<label for="batchId">Batch ID:</label>
<input type="text" id="batchId" required>
<label for="farmLocation">Farm Location:</label>
<input type="text" id="farmLocation" required>

<label for="harvestDate">Harvest Date:</label>


<input type="text" id="harvestDate" placeholder="YYYY-MM-DD" required>

<label for="processDetails">Processing Details:</label>


<textarea id="processDetails" rows="4" required></textarea>

<label for="certificationFile">Certification Document (PDF, Image):</label>


<input type="file" id="certificationFile" accept=".pdf, .jpg, .jpeg, .png"
required>

<button type="button" onclick="uploadTraceability()">Upload Data</button>

</form>

<div id="traceabilityData">
<h2>Traceability Information</h2>
<ul id="traceabilityList">
</ul>
</div>
</div>

<script>
// Placeholder for AWS S3 interaction (replace with actual AWS SDK calls)

async function uploadToS3(file, batchId) {


// Simulated S3 upload (replace with actual AWS SDK for JavaScript)
// Example:
// const s3 = new AWS.S3({ ... });
// const params = {
// Bucket: 'your-s3-bucket-name',
// Key: `${batchId}/${file.name}`,
// Body: file
// };
// await s3.upload(params).promise();
return `s3://your-s3-bucket-name/${batchId}/${file.name}`; //Simulated S3 URL
}

async function uploadTraceability() {


const batchId = document.getElementById("batchId").value;
const farmLocation = document.getElementById("farmLocation").value;
const harvestDate = document.getElementById("harvestDate").value;
const processDetails = document.getElementById("processDetails").value;
const certificationFile = document.getElementById("certificationFile").files[0];

if (batchId && farmLocation && harvestDate && processDetails && certificationFile)


{
try {
const s3Url = await uploadToS3(certificationFile, batchId);

// Store data (replace with database or another persistent storage)


const traceabilityItem = {
batchId: batchId,
farmLocation: farmLocation,
harvestDate: harvestDate,
processDetails: processDetails,
certificationUrl: s3Url
};

// Display data (replace with actual data retrieval from storage)


displayTraceability(traceabilityItem);

document.getElementById("traceabilityForm").reset();

} catch (error) {
console.error("Error uploading data:", error);
alert("Error uploading data. Please try again.");
}
} else {
alert("Please fill in all fields.");
}
}

function displayTraceability(data) {
const list = document.getElementById("traceabilityList");
const listItem = document.createElement("li");
listItem.innerHTML = `
<strong>Batch ID:</strong> ${data.batchId}<br>
<strong>Farm Location:</strong> ${data.farmLocation}<br>
<strong>Harvest Date:</strong> ${data.harvestDate}<br>
<strong>Processing Details:</strong> ${data.processDetails}<br>
<strong>Certification Document:</strong> <a href="${data.certificationUrl}"
target="_blank">View Document</a>
`;
list.appendChild(listItem);
}

</script>
</body>
</html>

You might also like