JQuery Multiple File Upload and Remove

Suraj Vishwakarma
1y
5.4k
0
0

Article

jQuery

File Upload Event

$("#upload-vehicle-variant-image-modal").on('change', 'input[name="file"]', function(e) {
    // Event handler for file input change in the modal
    for (let i = 0; i < e.target.files.length; i++) {
        let myFile = e.target.files[i];
        let myFileID = "FID" + (1000 + Math.random() * 9000).toFixed(0);

        // Store file details in the filesToUpload array
        filesToUpload.push({
            file: myFile,
            size: myFile.size,
            FID: myFileID,
            name: myFile.name
        });
    }
    // Update the display after file upload
    display();
    // Reset the input to null - addressing a Chrome bug
    e.target.value = null;
});

This code uses jQuery to attach an event handler to the change event of the file input with the name “file” within the element with the ID “upload-vehicle-variant-image-modal.” When users select files using the file input, the event handler captures each file’s details (name, size, and a generated ID) and adds them to the filesToUpload array. After updating the array, the display function is called to update the UI.

File Removal Event

$(document).on('click', '.remove-button', function() {
    // Event handler for the removal of files
    var fidToRemove = $(this).data('fid');
    for (let i = 0; i < filesToUpload.length; i++) {
        // Remove the file with the specified FID from the filesToUpload array
        if (filesToUpload[i].FID === fidToRemove) {
            filesToUpload.splice(i, 1);
            break;
        }
    }
    // Update the display after file removal
    display();
});

This code uses event delegation to handle the click event for elements with the class “remove-button.” When a user clicks on the remove button associated with a file, it retrieves the file’s FID (File ID) from the button’s data attribute and removes the corresponding file from the filesToUpload array. After removal, the display function is called to update the UI.

Display Function

const display = () => {
    // Function to update the display of uploaded files
    $('#file-list').empty();
    for (let i = 0; i < filesToUpload.length; i++) {
        // Append each file's details to the file list
        $("#file-list").append(`<li class="list-group-item d-flex justify-content-between align-items-center my-2 border">
          <div>${filesToUpload[i].name} - ${bytesToMB(filesToUpload[i].size)} MB</div>
          <div><a class="remove-button" data-fid="${filesToUpload[i].FID}"><i class="fa fa-close"></i></a></div>
          <div class="image-parent">
              <img src="${URL.createObjectURL(filesToUpload[i].file)}" class="img-fluid" alt="quixote">
          </div>
        </li>`);
    }
    // Update the file upload count
    $("#upload-vehicle-variant-image-modal .fileuploadCount").val(`Total file upload: ` + filesToUpload.length);
};

This function updates the display of uploaded files. It empties the existing file list, iterates through the filesToUpload array, and appends each file's details to the file list. The details include the file name, size, a remove button, and a thumbnail preview. The file upload count is also updated. The bytesToMB function is assumed to be defined elsewhere and converts file sizes to megabytes.

Final Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  </head>
  <body>
  <input type="file" name="file" multiple>
<ul class="list-group rounded-0" id="file-list"></ul>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
 <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script>
   var filesToUpload = []; // Array to store files
    $('input[name="file"]').on('change', function(e) {
        for (let i = 0; i < e.target.files.length; i++) {
            let myFile = e.target.files[i];
            let myFileID = "FID" + (1000 + Math.random() * 9000).toFixed(0);

            filesToUpload.push({
                file: myFile,
                size: myFile.size,
                FID: myFileID,
                name: myFile.name
            });
        }
        display();
        // Reset the input to null - nice little Chrome bug!
         e.target.value = null;
    });

    $(document).on('click', '.remove-button', function() {
        var fidToRemove = $(this).data('fid');
        for (let i = 0; i < filesToUpload.length; i++) {
            if (filesToUpload[i].FID === fidToRemove) {
                filesToUpload.splice(i, 1);
                break;
            }
        }
        display();
    });
// HTML element to display the file list
    const display = () => {
        $('#file-list').empty();
        for (let i = 0; i < filesToUpload.length; i++) {
        $("#file-list").append(`<li class="list-group-item d-flex  justify-content-between align-items-center my-2 border">
          <div>${filesToUpload[i].name}- ${bytesToMB(filesToUpload[i].size)}-MB</div>
          <div><a class="remove-button" data-fid="${filesToUpload[i].FID}"><i class="fa fa-close"></i>Remove</a></div>
          <div class="image-parent">
              <img src="${URL.createObjectURL(filesToUpload[i].file)}" class="img-fluid" alt="quixote">
          </div>
        </li>`);
        }
        $("#upload-vehicle-variant-image-modal .fileuploadCount").val(`Total file upload: `+filesToUpload.length)
    };


    $("#upload-vehicle-variant-image-modal").on('click','.UploadImageBtn', function(){
        let formData = new FormData();

        for (let i = 0; i < filesToUpload.length; i++) {
        formData.append("files", filesToUpload[i].file);
        }

        console.log('formData:::::', formData)

        $.ajax({
                type: "POST",
                url: "/admin/fleet/vehicle-variant-upload-image",
                data: formData,
                processData: false,
                contentType: false,
                success: function(data){
                    console.log('RESPONSE', data)
                    if(data.statusCode == "200"){
                        createToast({
                    title: "ALERT",
                    msg: data.message,
                    type: "positive"
                    });
                   setTimeout(function(){
                    location.reload()
                   },500)
                    }else{
                        createToast({
                            title: "ALERT",
                            msg: data.message,
                            type: "negative"
                        });
                    }
                },
                error:function(error){
                    console.log('ERORR:::::::', error)
                },
                dataType: 'JSON'
            });

    })



function bytesToMB(bytes) {
    return (bytes / (1024 * 1024)).toFixed(2);
}
</script>
  </body>
</html>

(0) Comments