CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user7152572
user7152572

Reputation: 333

jQuery file upload preview/remove image not working for new inputs

You can find the code at jsfiddle

Image preview and remove function was working early (jsfiddle), now I used "+" button to add more inputs. But now image preview is not working also remove div is not working for new inputs. Please check the working code and help me to solve it.

html

<form>
  <div class="form-group portfolioimgdiv width100">
    <h5 class="control-label bold">Portfolio Images</h5>
    <div class="socialmediaside2">
      <input type="text" class="form-control" name="portfolioimgtitle[]" maxlength="10" placeholder="Image Title" />
      <div class="form-group hirehide is-empty is-fileinput width100 martop10">
        <input class="fileUpload" accept="image/jpeg, image/jpg" name="profilepic[]" type="file" value="Choose a file">
        <div class="input-group">
          <input class="form-control" required id="uploadre" placeholder="Portfolio Image" readonly><span class="input-group-btn input-group-sm"><button class="btn btn-fab btn-fab-mini"type="button"><i class="material-icons">attach_file</i></button></span>
        </div>
      </div>
    </div>
    <div class="removebtnimg">
      <button type="button" class="btn btn-default btn-sm bckbtn addmore_img">Add<span class="glyphicon glyphicon-plus"></span></button>
    </div>
    <div class="upload-demo col-lg-12">
      <img alt="your image" class="portimg" src="#">
    </div>
  </div>
</form>

Jquery

$('.portfolioimgdiv').on('click', '.remove_field', function() {
  $(this).parent().parent().remove();
});
$('.addmore_img').click(function() {
  $('.portfolioimgdiv:last').after('<div class="form-group portfolioimgdivnext width100"><div class="socialmediaside2"><input type="text" class="form-control" name="portfolioimgtitle[]" maxlength="10" placeholder="Image Title" /><div class="form-group hirehide is-empty is-fileinput width100 martop10"><input class="fileUpload" accept="image/jpeg, image/jpg" name="profilepic[]" type="file" value="Choose a file"><div class="input-group"><input class="form-control" required id="uploadre" placeholder="Portfolio Image" readonly><span class="input-group-btn input-group-sm"><button class="btn btn-fab btn-fab-mini"type="button"><i class="material-icons">attach_file</i></button></span></div></div></div><div class="removebtnimg"><button type="button" class="btn btn-warning btn-sm remove_field"><span class="glyphicon glyphicon-trash">Remove</span></button></div><div class="upload-demo col-lg-12"><img alt="your image" class="portimg" src="#"></div></div>');
});

function readURL() {
  var $input = $(this);
  var $newinput = $(this).parent().parent().parent().find('.portimg ');
  if (this.files && this.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {
      reset($newinput.next('.delbtnmrg26'), true);
      $newinput.attr('src', e.target.result).show();
      $newinput.after('<button type="button" class="delbtnmrg26 removebtn" value="remove"><i class="fa fa-times" aria-hidden="true">Remove</i></button>');
    }
    reader.readAsDataURL(this.files[0]);
  }
}
$(".fileUpload").change(readURL);
$("form").on('click', '.delbtnmrg26', function(e) {
  reset($(this));
});

function reset(elm, prserveFileName) {
  if (elm && elm.length > 0) {
    var $input = elm;
    $input.prev('.portimg').attr('src', '').hide();
    if (!prserveFileName) {
      $($input).parent().parent().find('input.fileUpload').val("");
      $($input).parent().parent().find('.input-group').find('input#uploadre').val("");
    }
    elm.remove();
  }
}

Upvotes: 0

Views: 1655

Answers (1)

Alex
Alex

Reputation: 2775

When you add a new element dynamically, you no longer can work with it using standard .change function, you must use .on function.

So instead of:

$(".fileUpload").change(readURL);

you must use:

$("form").on('change', '.fileUpload', readURL);

JSFiddle: https://jsfiddle.net/m8uda7vb/

Upvotes: 1

Related Questions