It's a bit tricky to pinpoint the issue, especially without knowing the exact implementation.
I asked ChatGPT and got the following response (though I haven't verified its accuracy).
Your current issue seems to stem from how you handle file inputs. When you upload a second file, the browser might still be holding onto the first file in the `<input type="file">` field. Some common problems and their solutions:
Possible Issues & Fixes:
1. Reset File Input After Upload:
- You need to clear the file input after every successful upload. Right now, your reset line:
is inside `success`, but sometimes file inputs don't clear as expected. Try explicitly clearing it:
Add this right after `$("#upload-form")[0].reset();`.
2. Ensure `FormData` Contains All Files When Uploading Multiple Files
- Your current approach only supports one file at a time since you're appending just `files[0]`:
If you're trying to upload multiple files, modify it:
Code: Select all
var files = $(this)[0].files;
var formdata = new FormData();
for (var i = 0; i < files.length; i++) {
formdata.append('files[]', files[i]); // Use an array
}
Then, adjust your PHP backend (`upload.php`) to handle multiple files.
3. Avoid Overwriting Variables (`idRowFileName`, `idRowFileId`)
- If multiple files are being processed simultaneously, they could override each other.
- Instead of using global variables:
Code: Select all
var idRowFileName;
var idRowFileId;
Store values locally:
Code: Select all
function uploadFile(event) {
let td = $(event.target);
let t = td.attr('data-nu-prefix');
let idRowFileName = t + idFileName;
let idRowFileId = t + idFileId;
$("#fileToUpload").data('fileNameField', idRowFileName);
$("#fileToUpload").data('fileIdField', idRowFileId);
$("#fileToUpload").click();
}
Then retrieve them before setting values:
Code: Select all
let idRowFileName = $('#fileToUpload').data('fileNameField');
let idRowFileId = $('#fileToUpload').data('fileIdField');
### Updated Code (Fixing Multi-File Upload)
Code: Select all
$(document).ready(function(e) {
$('#fileToUpload').on('change', function(event) {
var files = $(this)[0].files;
var formdata = new FormData();
var recordId = nuCurrentProperties().record_id;
for (var i = 0; i < files.length; i++) {
formdata.append('files[]', files[i]); // Store as array
}
formdata.append('record_id', recordId);
setUploadStatus('sample_msg', 'alert alert-info', 'fa fa-spin fa-spinner', nuTranslate('Uploading...'));
$.ajax({
type: "POST",
url: "libs/upload.php",
data: formdata,
contentType: false,
cache: false,
processData: false,
success: function(data) {
var result = JSON.parse(data);
if (result.error !== '') {
var errMsg = {
"INVALID_FILE_TYPE": "The file type is not allowed.",
"ERROR_MOVING_FILE": "The file cannot be moved to the destination directory.",
"FILE_TOO_LARGE": "Error: File size is larger than the allowed limit."
};
setUploadStatus('sample_msg', 'alert alert-info', 'fa fa-exclamation-triangle', nuTranslate("Upload Failed:") + ' ' + nuTranslate(errMsg[result.error] || result.error));
} else {
// Handle multiple files properly
result.files.forEach(function(file) {
let idRowFileName = $('#fileToUpload').data('fileNameField');
let idRowFileId = $('#fileToUpload').data('fileIdField');
setSubGridFileInfo(file.file_name, file.file_id);
createDownloadLink(idRowFileName, uploadFolder, file.file_id, file.file_name);
});
setUploadStatus('sample_msg', 'alert alert-success', 'fa fa-thumbs-up', nuTranslate('Files uploaded successfully.'));
}
// Clear file input
$("#upload-form")[0].reset();
$('#fileToUpload').val('');
},
error: function() {
setUploadStatus('sample_msg', 'alert alert-info', 'fa fa-exclamation-triangle', nuTranslate('Upload failed.'));
}
});
});
});
### Backend (upload.php) Update
Ensure your PHP backend can handle multiple files:
Code: Select all
php
<?php
if (!empty($_FILES['files']['name'][0])) {
$uploadDir = "uploads/";
$uploadedFiles = [];
foreach ($_FILES['files']['name'] as $key => $name) {
$tmpName = $_FILES['files']['tmp_name'][$key];
$newFileName = uniqid() . "_" . basename($name);
$filePath = $uploadDir . $newFileName;
if (move_uploaded_file($tmpName, $filePath)) {
$uploadedFiles[] = ["file_name" => $newFileName, "file_id" => $key];
}
}
echo json_encode(["error" => "", "files" => $uploadedFiles]);
} else {
echo json_encode(["error" => "NO_FILES"]);
}
?>
Final Fix Summary
- Reset the file input after each upload (`$('#fileToUpload').val('')`)
- Modify JS to support multiple file uploads
- Store dynamic field IDs per upload to avoid overwriting
- Update `upload.php` to handle multiple files at once