When the add button is clicked, the product type, name, and file are added to the table.
The variables are declared globally.
document.getElementById("addBtn").addEventListener("click", function () {
var entryExists = false;
var documentName = document.getElementById("chooseFileInput");
var productNameValue = productNameDropdown.value;
var file = documentName.files[0];
var entryforTable = {
product_Type: productTypeValue,
product_Name: productNameValue,
document_Name: file
};
var dataTable = document.getElementById("dataTable").getElementsByTagName('tbody')[0];
var row = dataTable.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var deleteCell = row.insertCell(3);
var deleteButton = document.createElement("button");
deleteButton.textContent = "Clear";
deleteButton.className = "btn btn-danger";
deleteButton.addEventListener("click", function () {
dataTable.removeChild(row);
var index = tableData.indexOf(entryforTable);
if (index > -1) {
tableData.splice(index, 1);
}
});
deleteCell.appendChild(deleteButton);
cell1.innerHTML = entryforTable.product_Type;
cell2.innerHTML = entryforTable.product_Name;
cell3.innerHTML = file.name;
tableData.push(entryforTable);
productType.value = "";
productNameDropdown.value = "";
documentName.value = "";
});
When the submit button is clicked, the data is sent to the server.
document.getElementById("submitBtn").addEventListener("click", function () {
var formData = new FormData();
console.log(tableData);
tableData.forEach(function (entry) {
formData.append('productTypes[]', entry.product_Type);
formData.append('productNames[]', entry.product_Name);
formData.append('files[]', entry.document_Name);
});
console.log(formData);
fetch("ThirdPartyProductDocsUpload.aspx/SaveFiles", {
method: "POST",
body: formData
})
.then(response => {
console.log(response);
if (response.ok) {
return response.json();
}
throw new Error('Network response was not ok.');
})
.then(data => {
console.log("Response from server: " + data);
})
.catch(error => {
console.log("Error: " + error);
});
});
The debugger set on this function does not get hit, but the response from JavaScript is incorrect.
[WebMethod]
public static string SaveFiles(string jsonData)
{
try
{
// Deserialize the JSON data into an array of objects
JavaScriptSerializer serializer = new JavaScriptSerializer();
Entry[] entries = serializer.Deserialize<Entry[]>(jsonData);
// Validate input
foreach (Entry entry in entries)
{
if (string.IsNullOrEmpty(entry.Product_Type) || string.IsNullOrEmpty(entry.Product_Name) || entry.Document_Name == null)
{
throw new ArgumentException("Invalid input parameters.");
}
// Save the file
string fileName = Path.GetFileName(entry.Document_Name.FileName);
string uploadPath = HttpContext.Current.Server.MapPath("~/TPPUploadFiles/");
string filePath = Path.Combine(uploadPath, fileName);
entry.Document_Name.SaveAs(filePath);
// Additional processing if needed
}
return "Files uploaded successfully.";
}
catch (Exception ex)
{
return "Error: " + ex.Message;
}
}
The goal is to send the table data to the backend to save the files and product names.