Translate & design file input - "Choose File or No file chosen" in bold options

Modified on Mon, 29 Apr, 2024 at 3:24 AM

The following solution addresses the translation of multiple file upload buttons and text, specifically "Choose File" and "No file chosen." However, for more customization, you can achieve your desired design by making adjustments to the CSS provided below.

1. Please create the following JavaScript file named "bold-custom.js" and include it in the "sc-include.liquid" file. You can refer to the screenshot below for guidance. bold-custom.js SCREENSHOT

function applyScript() {
// Create a new label element template
const labelTemplate = document.createElement('label');
labelTemplate.textContent = 'Kies bestand';

const labelTextTemplate = document.createElement('label');

labelTextTemplate.textContent = 'Geen bestand gekozen';

// Get all input elements with type="file"
const inputFileElements = document.querySelectorAll('input[type="file"]');

// Loop through each input element and apply the label
inputFileElements.forEach((inputFile, index) => {
  // Create a unique ID for each input element
  const uniqueId = `file-upload-${index}`;

  // Clone the label elements and set their "for" attributes to the unique ID
  const labelElement = labelTemplate.cloneNode(true);
  labelElement.setAttribute('for', uniqueId);
   labelElement.setAttribute('class', `firstButton-${index}`);

  const labelTextElement = labelTextTemplate.cloneNode(true);
  labelTextElement.setAttribute('for', uniqueId);
  labelTextElement.setAttribute('id', `file-input-label-${index}`);
  labelTextTemplate.setAttribute('class', `custom-file-upload-text-${index}`);

  // Add the unique ID to the input element
  inputFile.setAttribute('id', uniqueId);

  // Prepend the label element before the input element
  inputFile.parentNode.insertBefore(labelElement, inputFile);

  // Append the label element text to the parent
  inputFile.parentNode.appendChild(labelTextElement);
});


}

function fileClick(){
// Function to handle the file input change event
function handleFileInputChange(event) {
  const fileInput = event.target;
  const fileInputLabel = fileInput.nextElementSibling; // Get the next sibling element (the label)

  if (fileInput.value === '') {
    fileInputLabel.innerHTML = 'Geen bestand gekozen';
  } else {
    const realPathArray = fileInput.value.split('\\');
    fileInputLabel.innerHTML = realPathArray[realPathArray.length - 1];
  }
}

// Get all input elements with type="file"
const fileInputs = document.querySelectorAll('input[type="file"]');

// Add event listener to each file input
fileInputs.forEach((fileInput) => {
  fileInput.addEventListener('change', handleFileInputChange);
});

}
function observeDOM() {
  var observer = new MutationObserver(function(mutationsList) {
    for (var mutation of mutationsList) {
      if (mutation.type === 'childList' && mutation.target.classList.contains('bold_options_loaded')) {
        console.log("script loads only when bold_options_loaded class loaded or in DOM")
        applyScript();
        fileClick()
        observer.disconnect();
        break;
      }
    }
  });
  observer.observe(document.body, {
    childList: true,
    subtree: true
  });
}

document.addEventListener('DOMContentLoaded', function() {
  observeDOM();
});

sc-includes.liquid SCREENSHOT

{{ 'bold-custom.js' | asset_url | script_tag }}

2. Please create the following CSS file named "bold-custom.css" and include it in the "sc-include.liquid" file. Alternatively, you can choose to add the CSS to your theme's main CSS file or the custom CSS section in the SC app. You can refer to the screenshot below for guidance. bold-custom.css SCREENSHOT

.bold_option.bold_option_uploadfile span.bold_option_element {
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    white-space: nowrap;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}

.bold_option.bold_option_uploadfile input[id^="file-upload"]::file-selector-button {
display: none
}

.bold_option.bold_option_uploadfile input[id^="file-upload"]{
    border: none;
  color: transparent;
  width: 0;
}
.bold_option.bold_option_uploadfile label[id^="file-input-label"] {
  margin-bottom: 0;
}
.bold_option.bold_option_uploadfile span.bold_option_element label[class^="firstButton"] {
  margin: 0;
  background: #efefef;
  padding: 10px;
  border: 1px solid;
  border-radius: 5px;
  text-transform: capitalize;
  font-family: 'Montserrat';
  font-weight: bold;
  letter-spacing: 1.8px;
}