Show uploading file name and size for every dynamically created input field. jQuery

April 24, 2021, at 11:40 PM

Uploading file inputs are created dynamically. When I upload a file, information about a file (file name and size ) show only for the first uploading input field. How can I show information for dynamically created uploading input fields?

I used loops for every uploading file but isn't helped. Please help me to solve this problem.

Thanks, Advance


<div class="wt-addprojectsholder wt-tabsinfo">
    <div class="wt-tabscontenttitle wt-addnew">
        <h2>Add Your Projects</h2>
        <a href="javascript:void(0);" id="add_project">Add New</a>
    <ul class="wt-experienceaccordion accordion" id="project_wrapper">
        <li id="project_list">
            <div class="wt-accordioninnertitle">
                <div class="wt-projecttitle collapsed" data-toggle="collapse" data-target="#proj_1"></div>
                <div class="wt-rightarea">
                    <a href="javascript:void(0);" class="wt-addinfo wt-skillsaddinfo" data-toggle="collapse" data-target="#proj_1">
                        <i class="lnr lnr-pencil"></i>
                    <a href="javascript:void(0);" id="remove_project" class="wt-deleteinfo">
                        <i class="lnr lnr-trash"></i>
            <div class="wt-collapseexp collapse" id="proj_1" aria-labelledby="accordioninnertitle" data-parent="#accordion">
                <div class="wt-formtheme wt-userform wt-formprojectinfo">
                        <div class="form-group form-group-label">
                            <div class="wt-labelgroup">
                                <label for="project_file" data-proj="1">
                                    <span class="wt-btn">Select Files</span>
                                    <input type="file" name="file" id="project_file" data-proj="1" />
                                <span>Drop files here to upload</span>
                                <em class="wt-fileuploading">
                                    <i class="fa fa-spinner fa-spin"></i>
                        <div class="form-group">
                            <ul class="wt-attachfile">
                                    <span data-target-project-file-name="1"></span>
                                    <em data-target-project-file-size="1">
                                        <a href="javascript:void(0);" class="lnr lnr-cross"></a>


jQuery(function () {
        var project_count = 1;
        var project_max_fileds = 5;
                   if (project_count < project_max_fileds) {
                                   '<li id="project_list">'+
                                       '<div class="wt-accordioninnertitle">'+
                                            '<div class="wt-projecttitle collapsed" data-toggle="collapse" data-target="#proj_'+project_count+'">'+ 
                                            '<div class="wt-rightarea">'+
                                                 '<a href="javascript:void(0);" class="wt-addinfo wt-skillsaddinfo" data-toggle="collapse" data-target="#proj_'+project_count+'">'+
                                                   ' <i class="lnr lnr-pencil"></i>'+
                                                 '<a href="javascript:void(0);" id="remove_project" class="wt-deleteinfo">'+
                                                    '<i class="lnr lnr-trash"></i>'+
                                       '<div class="wt-collapseexp collapse" id="proj_'+project_count+'" aria-labelledby="accordioninnertitle" data-parent="#accordion">'+
                                            '<div class="wt-formtheme wt-userform wt-formprojectinfo">'+
                                                          '<div class="form-group form-group-label">'+
                                                               '<div class="wt-labelgroup">'+
                                                                    '<label for="project_file" data-proj="'+project_count+'">'+
                                                                           '<span class="wt-btn">Select Files</span>'+
                                                                           '<input type="file" name="file" id="project_file" data-proj="'+project_count+'">'+
                                                                    '<span>Drop files here to upload</span>'+
                                                                    '<em class="wt-fileuploading">Uploading'+
                                                                       ' <i class="fa fa-spinner fa-spin"></i>'+
                                                          '<div class="form-group">'+
                                                               '<ul class="wt-attachfile">'+
                                                                      '<span data-target-project-file-name="'+project_count+'"></span>'+
                                                                      '<em data-target-project-file-size="'+project_count+'">'+
                                                                         '<a href="javascript:void(0);" class="lnr lnr-cross"></a>'+
          $("#project_wrapper").on("click", "#remove_project", function (event) {
               var value = $(this).attr("data-proj");
               var file = this.files[0];
               if (file) {
                    $("#project_wrapper").find("[data-target-project-file-name='"+value+"']").text('File name';
                    $("#project_wrapper").find("[data-target-project-file-size='"+value+"']").text('File size'+file.size);
Adjust space between chevron and slide using slickR

Adjust space between chevron and slide using slickR

I am using Rmarkdown and slickR to create a carousel of imagesHow do I adjust the space between the left chevron and the left edge of the slide?

App keep crashing when print the string that converted from byte array in Charsets UTF-8 [kotlin]

App keep crashing when print the string that converted from byte array in Charsets UTF-8 [kotlin]

I am not sure why the application keep crashing when want to print the string in Charsets UTF-8 that converted from BtyeArray

Use new fingerprint API from Android for multiple users

Use new fingerprint API from Android for multiple users

We are creating a timestamp application on Android and ideally this would use fingerprint to identify the user