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; }
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article