CODEWITHSUNDEEP
javascriptuploadcare
Kyle Underhill
Kyle Underhill

Reputation: 109

Uploadcare with multiple previews and more than one instance

How do I change the script to also populate the src of the images contained in .seperate-group, matching the uploaded images in A with FOR A and B with FOR B?

var $ = uploadcare.jQuery;
var widgets = uploadcare.initialize(); // get all widget instances
widgets.forEach(function(widget) {
  widget.onUploadComplete(function(fileInfo) {
    var group = $(widget.inputElement).closest(".group"); // find a group the instance is related to
    $(group).find('.feature-img').each(function(i, img) { // find image tags in the group
      img.src = fileInfo.cdnUrl; // update previews
    });
  });
});
.image-input {
  display: block;
  position: relative;
  height: 100px;
  width: 200px;
}

.container {
  display: flex;
}

.image-preview-wrapper {
  height: 50px;
}

.feature-img {
  height: 100%;
}

.seperate-group img {
  height: 100px;
  width: 100px;
}
<div class="container">
  <div class="group">A
    <div class="image-input">
      <input type="hidden" role="uploadcare-uploader" data-clearable="" data-images-only="" data-public-key="1c86ca998ba22e75fbc6" value="">
    </div>
    <div class="image-preview-wrapper">
      <img class="feature-img" src="http://www.pixedelic.com/themes/geode/demo/wp-content/uploads/sites/4/2014/04/placeholder4.png"></img>
      <img class="feature-img" src="http://www.pixedelic.com/themes/geode/demo/wp-content/uploads/sites/4/2014/04/placeholder4.png"></img>
    </div>
  </div>
  <div class="group">B
    <div class="image-input">
      <input type="hidden" role="uploadcare-uploader" data-clearable="" data-images-only="" data-public-key="1c86ca998ba22e75fbc6" value="">
    </div>
    <div class="image-preview-wrapper">
      <img class="feature-img" src="http://www.pixedelic.com/themes/geode/demo/wp-content/uploads/sites/4/2014/04/placeholder4.png"></img>
      <img class="feature-img" src="http://www.pixedelic.com/themes/geode/demo/wp-content/uploads/sites/4/2014/04/placeholder4.png"></img>
    </div>
  </div>
  <div class="seperate-group">
    <img class="feature-img" src="http://www.pixedelic.com/themes/geode/demo/wp-content/uploads/sites/4/2014/04/placeholder4.png">FOR A</img>
    <img class="feature-img" src="http://www.pixedelic.com/themes/geode/demo/wp-content/uploads/sites/4/2014/04/placeholder4.png">FOR B</img>
  </div>
</div>
<script>
  UPLOADCARE_LOCALE = "en";
  UPLOADCARE_TABS = "file url facebook dropbox instagram";
  UPLOADCARE_PUBLIC_KEY = "7d504e167ecaef7b82d4";
</script>
<script charset="utf-8" src="//ucarecdn.com/libs/widget/3.2.2/uploadcare.full.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 2

Views: 368

Answers (1)

Alex Chernenko
Alex Chernenko

Reputation: 321

Kyle, try this code snippet

var $ = uploadcare.jQuery;
var widgets = uploadcare.initialize(); // get all widget instances
widgets.forEach(function (widget) {
  widget.onUploadComplete(function (fileInfo) {
    var group = $(widget.inputElement).parent().parent(); // find a group the instance is related to
    $(group).find('.feature-img').each(function (i, img) { // find image tags in the group
      img.src = fileInfo.cdnUrl; // update previews
    });
  });
});

Upvotes: 2

Related Questions