Updating Multiple Field Input With Laravel File Manager fmSetLink function

Out of the box, the Laravel file manager by alexusmai gives you the fmSetLinkto get a link path, which you can then use to update a field or input field value. This is a hard-coded function and you must use it if you want to get a link path of an uploaded file in the file manager.

I'll show you how you can use the function to set multiple input field, first, I'll assume we have the following inputs:

<div class="input-group">
    <input type="text" id="audio_label" class="form-control" name="audio-alt">
    <div class="input-group-button">
        <button class="btn btn-outline-secondary" type="button" id="button-one">Select</button>
    </div>
</div>

<div class="input-group">
    <input type="text" id="image_label" class="form-control" name="image">
    <div class="input-group-button">
        <button class="btn btn-outline-secondary" type="button" id="button-two">Select</button>
    </div>
</div>

Then you can use it with the inputs fields like so:

<!-- JS -->
<script>
  document.addEventListener("DOMContentLoaded", function() {

    document.getElementById('button-one').addEventListener('click', (e) => {
      e.preventDefault();
      inputId = 'image_label';
      window.open('/file-manager/fm-button', 'fm', 'width=1400,height=800');
    });

    // second button
    document.getElementById('button-two').addEventListener('click', (e) => {
      e.preventDefault();
      inputId = 'audio_label';
      window.open('/file-manager/fm-button', 'fm', 'width=1400,height=800');
    });
  });

  // input
  let inputId = '';

  // set file link
  function fmSetLink($url) {
    document.getElementById(inputId).value = $url;
  }
</script

How this works is that, immediately either of the elementID is cliked, the inputID variable of either of them would be set.

For example, we added eventlistener of type click to both "button-one" and "button-two", so, if a user clicks the "button-one", the inputID variable would be set to 'image_label', and that would also be captured in the fmSetLink function, here:

  function fmSetLink($url){ // ⬇️ 
    document.getElementById(inputId).value = $url; 
  }

The inputID variable in the "button-two" won't be set because, no clicked event occurred. This is also true if you clicked button-two".

You can also add other functionality like so:

// set file link
function fmSetLink($url) {
    let audioURL = document.getElementById(inputId).value = $url;
     if(inputId === 'audio_label'){
      // if inputID is currently set to 'audio_label, do something
    } else if(inputId === 'image_label') {
     // if inputID is currently set to 'image_label, do something 
    }

Enjoy ;)