JQuery/Javascript获取多输入值及Filestack按钮上传问题求助

Hey there! As someone who’s wrestled with dynamic UI elements and Filestack before, I totally get where you’re stuck. Let’s break down exactly how to get those new upload buttons working and ensure each input pair acts independently.

Why Your New Buttons Aren’t Working #

The core issue here is that Filestack initializes buttons when you first call its setup code—any elements you add later (like via your "Add" button) don’t get that initialization hook. So those new buttons look right, but they’re not actually connected to Filestack’s upload logic.

Step-by-Step Solution #

1. Refactor Your HTML Structure #

First, create a reusable template for your input pair (select + upload button) so you can clone it easily. We’ll use a hidden template div to avoid repeating code:

<!-- Modal -->
<div class="modal" id="myModal">
  <div class="modal-content">
    <h3>Add File & Selection</h3>
    <!-- Reusable Template (Hidden) -->
    <div class="input-group-template" style="display:none;">
      <div class="input-group">
        <select class="selection-dropdown">
          <option value="option1">Option 1</option>
          <option value="option2">Option 2</option>
          <option value="option3">Option 3</option>
        </select>
        <button class="filestack-upload-btn" data-input-id="">Upload File</button>
      </div>
    </div>
    <!-- Initial Input Group -->
    <div class="input-groups-container">
      <div class="input-group">
        <select class="selection-dropdown">
          <option value="option1">Option 1</option>
          <option value="option2">Option 2</option>
          <option value="option3">Option 3</option>
        </select>
        <button class="filestack-upload-btn" data-input-id="1">Upload File</button>
      </div>
    </div>
    <button id="add-more-btn">Add More</button>
  </div>
</div>

2. Wrap Filestack Initialization in a Reusable Function #

Instead of initializing all buttons once, make a function that initializes a single button (or a set of new buttons). This way, you can call it every time you add a new input group:

// Initialize Filestack with your API key
const client = filestack.init('YOUR_FILESTACK_API_KEY');

// Reusable function to initialize a Filestack button
function initFilestackButton(buttonElement, inputGroupId) {
  client.picker({
    // Customize your picker options here
    accept: 'image/*,application/pdf',
    onUploadDone: function(res) {
      // Get the selected option from the corresponding dropdown
      const selectedOption = $(buttonElement).closest('.input-group').find('.selection-dropdown').val();
      
      // Handle the upload result + selected option (save to DB, display, etc.)
      console.log(`Uploaded file for ${selectedOption}:`, res.filesUploaded[0].url);
      
      // You can store the file URL and option in a hidden input if needed
      $(buttonElement).closest('.input-group').append(`<input type="hidden" name="file-${inputGroupId}" value="${res.filesUploaded[0].url}">`);
      $(buttonElement).closest('.input-group').append(`<input type="hidden" name="option-${inputGroupId}" value="${selectedOption}">`);
    }
  }).mount(buttonElement);
}

3. Handle the "Add More" Button #

When the user clicks "Add More", clone the template, assign a unique ID to the input group, and initialize the new Filestack button:

$(document).ready(function() {
  // Initialize the first button on page load
  initFilestackButton($('.filestack-upload-btn')[0], 1);
  
  let inputGroupCounter = 2; // Start at 2 since we have one initial group
  
  $('#add-more-btn').click(function() {
    // Clone the template and remove the hidden style
    const newInputGroup = $('.input-group-template').clone().removeClass('input-group-template').show();
    
    // Update the button's data-input-id for tracking
    newInputGroup.find('.filestack-upload-btn').attr('data-input-id', inputGroupCounter);
    
    // Add the new group to the container
    $('.input-groups-container').append(newInputGroup);
    
    // Initialize the new Filestack button
    initFilestackButton(newInputGroup.find('.filestack-upload-btn')[0], inputGroupCounter);
    
    inputGroupCounter++;
  });
});

Key Notes for Independent Uploads #

• Use closest('.input-group'): This ensures that when an upload completes, we only grab the dropdown value from the same input pair as the button. No cross-contamination between groups!
• Unique IDs: The inputGroupCounter ensures each group has a unique identifier, which helps if you need to submit all data later (via hidden inputs or form data).
• Picker Options: Customize the accept parameter, file size limits, or other picker settings inside the initFilestackButton function to match your needs.

Give this a try—this setup should make every new upload button work properly, and each input pair will handle its own upload independently.

内容的提问来源于stack exchange，提问作者NekoLopez