1

This one part of the very long form, in which I can add/remove data field by clicking on plus/minus button.

on add new data field, I can select & upload only first input[file].if i tried to upload rest of files, on select file the file-name is not replaced with a label(upload button)

please can anyone help to solve this problem

// Dynamically add-on fields

$(function() {
    // Remove button click
    $(document).on(
        'click',
        '[data-role="dynamic-fields"] > .form-inline [data-role="remove"]',
        function(e) {
            e.preventDefault();
            $(this).closest('.form-inline').remove();
        }
    );
    // Add button click
    $(document).on(
        'click',
        '[data-role="dynamic-fields"] > .form-inline [data-role="add"]',
        function(e) {
            e.preventDefault();
            var container = $(this).closest('[data-role="dynamic-fields"]');
            new_field_group = container.children().filter('.form-inline:first-child').clone();
            new_field_group.find('input').each(function(){
                $(this).val('');
            });
            container.append(new_field_group);
        }
    );
});



// file upload

$('#file-upload').change(function() {
  var i = $(this).prev('label').clone();
  var file = $('#file-upload')[0].files[0].name;
  $(this).prev('label').text(file);
});
.custom-file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>



 <div class="form-group row custom-upload">

 	<div class="col-md-6">
 		 <label class="col-form-label" for="pancardupload">Lorem Ipsum is simply dummy text</label>
 	</div>
   
    <div class="col-md-6">
	    <div data-role="dynamic-fields">
            <div class="form-inline form-row">
			
				<input input type="text" class="form-control mb-2 mr-sm-2 col-sm-4" id="field-name" placeholder="Enter Amount">               
				                    
				<!-- file upload start-->
				<label for="file-upload" class="custom-file-upload form-control mb-2 mr-sm-2 col-sm-5">
				<i class="fa fa-cloud-upload"></i> Upload Document
				</label>
				<input id="file-upload" name="file_name" type="file" style="display:none;">
				 <!-- file upload ends-->                
				                    
				<button class="btn btn-sm btn-danger  mb-2" data-role="remove">
				 <i class="fa fa-minus"></i>
				</button>
				<button class="btn btn-sm btn-primary  mb-2" data-role="add">
				    <i class="fa fa-plus"></i>
				</button>
                
                
            </div>  <!-- /div.form-inline -->
        </div>  <!-- /div[data-role="dynamic-fields"] --> 	
    </div>
 </div>

Improve this question
0

4 Answers 4

Reset to default
1

You cannot have multiple elements with same id. Also yo need to use always this to reference the input element insede the change event handler function.

Edit: added support for dynamic inputs as requested in the question edition.

var uploads = $('.file-upload');
var currentUploadCount = uploads.length;
uploads.change(setLabel);

function setLabel() {
  var i = $(this).prev('label').clone();
  var file = this.files[0].name;
  $(this).prev('label').text(file);
}

$('#addUpload').click(function() {
  currentUploadCount++;
  $(document.body).append("<br/>");
  $(document.body).append("<br/>");
  var newId = 'file-upload-' + currentUploadCount;
  var newLabel = $('<label>Upload Document</label>')
    .attr('for', newId)
    .addClass('custom-file-upload form-control mb-2 mr-sm-2 col-sm-5');
  newLabel.append($('i').addClass('fa fa-cloud-upload'))
  $(document.body).append(newLabel);

  var newInput = $('<input>')
    .addClass('file-upload')
    .attr('id', newId)
    .attr('type', 'file')
    .change(setLabel)
    .hide();

  $(document.body).append(newInput);
})
.custom-file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<button id="addUpload">
Add new upload
</button>
<br/><br/>
<label for="file-upload-1" class="custom-file-upload form-control mb-2 mr-sm-2 col-sm-5">
    <i class="fa fa-cloud-upload"></i>
    Upload Document
</label>
<input id="file-upload-1" class="file-upload" name="file_name" type="file" style="display:none;">

<br><br>

<label for="file-upload-2" class="custom-file-upload form-control mb-2 mr-sm-2 col-sm-5">
    <i class="fa fa-cloud-upload"></i>
    Upload Document
</label>
<input id="file-upload-2" class="file-upload" name="file_name" type="file" style="display:none;">

<br><br>

<label for="file-upload-3" class="custom-file-upload form-control mb-2 mr-sm-2 col-sm-5">
    <i class="fa fa-cloud-upload"></i>
    Upload Document
</label>
<input id="file-upload-3" class="file-upload" name="file_name" type="file" style="display:none;">

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Thanks Coskun, I had a typo on the input id. Fixed!
yes appreciate your answer but here in my case ill Dynamically Add and Remove Form Fields, for example, the user wants more file to upload then he has to click on add button.
sorry rahul please can you help as i just edited above comment??
I edited the answer, but I think you changed the scope of the original question.
@Servo now you can add new upload buttons
0

I changed a bit your structure and change function on change '.file-input'

<input input type="text" class="form-control mb-2 mr-sm-2 col-sm-4" id="field-name" placeholder="Enter Amount">               
                <!-- file upload start-->
        <div class="mb-2 mr-sm-2 col-sm-5 wrap-input-container">
          <label class="custom-file-upload form-control">
          <i class="fa fa-cloud-upload"></i> Upload Document
          </label>
          <input class="file-upload" name="file_name" type="file">
       </div>

$(document).on('change', '.file-upload', function(){
  var i = $(this).prev('label').clone();
  var file = this.files[0].name;
  $(this).prev('label').text(file);
});

See the codepen: https://codepen.io/titan_dl_1904/pen/WzVdRN

Improve this answer

2 Comments

Thank for your helpful effort..but i am facing a problem that I have mentioned in below snippet...please can you help to resolve? – Servo just now edit
Nice to help you :)
0

In your case it can select & display first file only..

$('.file-upload').change(function() {
  var i = $(this).prev('label').clone();
  var file = this.files[0].name;
  console.log(this.files[0].name);
  $(this).prev('label').text(file);
});
.custom-file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wrap-input-container {
  position: relative;
  overflow: hidden;
  height: 32px;
}
.wrap-input-container input {
position: absolute;
font-size: 400px;
opacity: 0;
z-index: 1;
top: 0;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="wrap-input-container">
  <label class="custom-file-upload form-control mb-2 mr-sm-2 col-sm-5">
      <i class="fa fa-cloud-upload"></i>
      Upload Document
  </label>
  <input class="file-upload" name="file_name" type="file">
</div>
<br><br>
<div class="wrap-input-container">
  <label class="custom-file-upload form-control mb-2 mr-sm-2 col-sm-5">
      <i class="fa fa-cloud-upload"></i>
      Upload Document
  </label>
  <input class="file-upload" name="file_name" type="file">
</div>
<br><br>
<div class="wrap-input-container">
  <label class="custom-file-upload form-control mb-2 mr-sm-2 col-sm-5">
      <i class="fa fa-cloud-upload"></i>
      Upload Document
  </label>
  <input class="file-upload" name="file_name" type="file">
</div>

// Dynamically add on fields

$(function() {
    // Remove button click
    $(document).on(
        'click',
        '[data-role="dynamic-fields"] > .form-inline [data-role="remove"]',
        function(e) {
            e.preventDefault();
            $(this).closest('.form-inline').remove();
        }
    );
    // Add button click
    $(document).on(
        'click',
        '[data-role="dynamic-fields"] > .form-inline [data-role="add"]',
        function(e) {
            e.preventDefault();
            var container = $(this).closest('[data-role="dynamic-fields"]');
            new_field_group = container.children().filter('.form-inline:first-child').clone();
            new_field_group.find('input').each(function(){
                $(this).val('');
            });
            container.append(new_field_group);
        }
    );
});



// file upload



$('.file-upload').change(function() {
  var i = $(this).prev('label').clone();
  var file = this.files[0].name;
  //console.log(this.files[0].name);
  $(this).prev('label').text(file);
});
.custom-file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wrap-input-container {
  position: relative;
  overflow: hidden;
}
.wrap-input-container input {
position: absolute;
font-size: 400px;
opacity: 0;
z-index: 1;
top: 0;
left: 0;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>



    <div class="col-md-6">
	    <div data-role="dynamic-fields">
            <div class="form-inline form-row">
			
				<input input type="text" class="form-control mb-2 mr-sm-2 col-sm-4" id="field-name" placeholder="Enter Amount">               
				                    
				<!-- file upload start-->
				<div class="wrap-input-container col-sm-5">
				  <label class="custom-file-upload form-control mb-2 mr-sm-2 ">
				      <i class="fa fa-cloud-upload"></i>
				      Upload Document
				  </label>
				  <input class="file-upload" name="file_name[]" type="file">
				</div>
				 <!-- file upload ends-->               
				                    
				<button class="btn btn-sm btn-danger  mb-2" data-role="remove">
				 <i class="fa fa-minus"></i>
				</button>
				<button class="btn btn-sm btn-primary  mb-2" data-role="add">
				    <i class="fa fa-plus"></i>
				</button>
                
                
            </div>  <!-- /div.form-inline -->
        </div>  <!-- /div[data-role="dynamic-fields"] --> 	

    </div>

Improve this answer

2 Comments

@TanDuong here the specific problem is with "upload document" only..when i add on new field and after selecting a new file, its name is not displaying on upload button same as it displays like the first one.
I updated codepen new_field_group.find('label').html('Upload Document');
0

In your javascript, you should send the clicked label :

 var lastLabel ;
function onLabelClick(sender){
lastLabel = $(sender);
}
// file upload
$('#file-upload').change(function() {

  var file = $('#file-upload')[0].files[0].name;

  $(lastLabel).text(file);
});

And you should call the label click in your label element :

<label onclick="onLabelClick(this);" for="file-upload" class="custom-file-upload form-control mb-2 mr-sm-2 col-sm-5">
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.