Uploadcare with multiple previews and more than one instance

Question

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>

You don't have to load jQuery library, since you're already using jQuery bundled with Uploadcare. Also, it's a good idea not to use your project keys :) — Dmitry Mukhin, May 16 '18 at 10:46

score 2 · Answer 1 · answered Mar 07 '18 at 09:09

2

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
    });
  });
});

answered Mar 07 '18 at 09:09

Alex Chernenko

196
4

Not explained about the issue. – 151291 Mar 07 '18 at 09:20
@AlexChernenko, I updated the question with a new challenge. How do I get the `img src` of the uploaded image and apply it to an `img src` outside of the immediate `.group` class? – Kyle Underhill Mar 08 '18 at 04:36
@KyleUnderhill Alex's function just iterates over all widgets on the page. You can add some id's to your input elements and use those to distinguish widgets and update corresponding elements when something is uploaded. – Dmitry Mukhin May 16 '18 at 10:45
@KyleUnderhill I think it's better to add specific class names to the images so that you can select them in one turn and to add specific data attributes to widgets to be able to tell which group the widget is related to. Live demo: https://codepen.io/optlsnd/pen/OZBPdp?editors – Alex Chernenko May 16 '18 at 11:08

Uploadcare with multiple previews and more than one instance

1 Answers1