jQuery - добавить имя файла в FormData и получить его в сценарии PHP

Question

У меня есть следующий JS код, который я использую для загрузки изображения на основе его пути:

var data = new FormData();
data.append('fileName', fileName);
data.append('file', file);
$.ajax({
    url : dbPath + "upload-file.php",
    type: 'POST',
    data: data,
    contentType: false,
    processData: false,
    mimeType: "multipart/form-data",
    success: function(data) {
       Swal.close();

       var fileURL = dbPath + data;
       console.log('FILE UPLOADED TO: ' + fileURL);

Это мой upload-image.php скрипт:

<?php

$fileName = $_POST['fileName'];

if ($_FILES["file"]["error"] > 0) {
    echo "Error: " .$_FILES["file"]["error"]. "<br>";

} else {
    // Check file size
    if ($_FILES["file"]["size"] > 20485760) { // 20 MB
        echo "Sorry, your file is larger than 20 MB. Upload a smaller one.";    
    } else { uploadImage(); }

}// ./ If


// UPLOAD IMAGE ------------------------------------------
function uploadImage() {
    // generate a unique random string
    $randomStr = generateRandomString();
    $filePath = "uploads/".$randomStr."".$fileName;

    // upload image into the 'uploads' folder
    move_uploaded_file($_FILES['file']['tmp_name'], $filePath);

    // echo the link of the uploaded image
    echo $filePath;
}

// GENERATE A RANDOM STRING ---------------------------------------
function generateRandomString() {
    $characters = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
    $charactersLength = strlen($characters);
    $randomString = '';
    for ($i = 0; $i<20; $i++) {
        $randomString .= $characters[rand(0, $charactersLength - 1)];
    }
    return $randomString;
}
?>

Все отлично работает при загрузке файла, например, JPG-изображения, но моя цель - использовать:

data.append('fileName', fileName);

, чтобы просто добавить имя и расширение файла к моему FormData и получить URL-адрес файла например:

https://example.com/_json/uploads/03aC8qsIk4hanngqO3G4_fileName.jpg

Но переменная $ fileName в моем скрипте PHP запускает строку error_log как Undefined index fileName in line xx, поэтому есть способ загрузить файл, получить его имя и расширение и добавить его к URL-адресу файла, который генерирует мой PHP скрипт?

Надеюсь, мой вопрос ясен, я просто пытаюсь загрузить обычную Ajax automati c для любого файла, не просто изображения, а получить их URL на основе случайной строки + ее имя и расширение (например, .png, .mp4, .pdf и др. c.).

Answer 1

Я понял это, благодаря всем комментариям, мне пришлось добавить fileName к моему FormData() и отредактировать мой PHP скрипт следующим образом:

JS:

function uploadFile() {
var dbPath = '<?php echo $DATABASE_PATH ?>';
    var file = $("#file")[0].files[0];
    var fileName = file.name;
    console.log('FILE NAME: ' + fileName);

    Swal.fire({icon: 'success', title: 'Loading...', showConfirmButton: false })

    var data = new FormData();
    data.append('file', file);
    data.append('fileName', fileName); <!-- ADDED THIS LINE

    $.ajax({
        url : dbPath + "upload-file.php?fileName=" + fileName, <!-- ADDED THIS LINE
        type: 'POST',
        data: data,
        contentType: false,
        processData: false,
        mimeType: "multipart/form-data", <!-- ADDED THIS LINE
        success: function(data) {
            Swal.close();

            var fileURL = dbPath + data;
            console.log('FILE UPLOADED TO: ' + fileURL);
            // error
            if (data.includes("ERROR:")) {
                Swal.fire({ icon: 'error', title: 'Oops...', text: data, });
            // show file data
            } else {
                $("#fileURL").val(fileURL);
                $("#viewButton").attr("href", fileURL);
                $("#viewButton").css("display", "block");
            }
        // error
        }, error: function(e) {  
            Swal.fire({ icon: 'error', title: 'Oops...', text: 'Something went wrong: ' + e.message, });
    }});
}

Мой upload-file.php скрипт:

<?php include 'config.php';

if ($_FILES["file"]["error"] > 0) {
    echo "Error: " .$_FILES["file"]["error"]. "<br>";

} else {
    // Check file size
    if ($_FILES["file"]["size"] > 20485760) { // 20 MB
        echo "ERROR: Your file is larger than 20 MB. Please upload a smaller one.";    
    } else { uploadImage(); }

}// ./ If


// UPLOAD IMAGE ------------------------------------------
function uploadImage() {
    // generate a unique random string
    $randomStr = generateRandomString();
    $filePath = "uploads/".$randomStr;

    // upload image into the 'uploads' folder
    move_uploaded_file($_FILES['file']['tmp_name'], $filePath);

    // echo the link of the uploaded image
    echo $filePath;
}

// GENERATE A RANDOM STRING ---------------------------------------
function generateRandomString() {
    $characters = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
    $charactersLength = strlen($characters);
    $randomString = '';
    for ($i = 0; $i<20; $i++) {
        $randomString .= $characters[rand(0, $charactersLength - 1)];
    }
    return $randomString."_".$_POST['fileName']; <!-- ADDED THIS LINE
}
?>

Теперь я наконец-то могу загрузить любой тип файла и получить его имя + расширение в конце URL-адреса, он отлично работает.