Translate or Change the Upload Field's Text

Wondering how you can translate or change your upload field's text, No file chosen or Choose File? 

Uploadery doesn't have an explicit way of directly adjusting the input text but you can follow the steps below to achieve this. 

1. Starting from your Shopify admin, click Online Store, then click Themes.

2. Find the theme you want to edit, click the Actions button, then click Edit code.

3. Navigate to the product.liquid file within the Templates folder. If your theme does not have a product.liquid file and if you see a product.json file, locate a file called main-product.liquid file in the Sections folder. 

4. Paste the following code snippet at the bottom of the file.

<script>
  Shoppad.$(function() {
    Shoppad.$(document).on('uploadSuccess', 'form[data-uploadery]', function(e) {
      $(e.target).addClass('upload-complete');
    });
  });
</script>

5. Locate your theme's Main CSS file by following the instructions in the this article.

6. Paste the following code snippet at the bottom of your CSS file.

#uploadery-container input[type=file] {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

#uploadery-container input[type=file]:active {
  outline: none;
}

#uploadery-container label > div {
  width: 100%;
  height: 40px;
  cursor: pointer;
  border: 1px solid #ececec;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNjQgNjQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDY0IDY0IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxnPg0KCQk8Zz4NCgkJCTxwb2x5Z29uIHBvaW50cz0iMzQsNTAgMzAsNTAgMzAsNy40IDE3LjcsMTguNSAxNSwxNS41IDMyLDAuMiA0OSwxNS41IDQ2LjMsMTguNSAzNCw3LjQgCQkJIi8+DQoJCTwvZz4NCgk8L2c+DQoJPGc+DQoJCTxnPg0KCQkJPHBvbHlnb24gcG9pbnRzPSI2MSw2NCAzLDY0IDMsMjQgMjIsMjQgMjIsMjggNywyOCA3LDYwIDU3LDYwIDU3LDI4IDQyLDI4IDQyLDI0IDYxLDI0IAkJCSIvPg0KCQk8L2c+DQoJPC9nPg0KPC9nPg0KPC9zdmc+DQoNCg==');
  background-size: 30px 30px;
  background-repeat: no-repeat;
  background-position: 2% center;
  text-align: center;
  line-height: 42px;
}

#uploadery-container .uploaderyProgressBar {
  display: block;
  float: none;
  width: 100% !important;
  height: 100%;
  max-width: none;
  clear: none;
}

#uploadery-container .uploadery-temporary {
  height: 100%;
}

#uploadery-container .uploaderyProgressBar span {
  border-radius: 0;
}

#uploadery-container .uploaderyIsUploading > div:after {
  content: '';
}

#uploadery-container label > div:after {
  content: "Upload File";
}

#uploadery-container .upload-complete label > div:after {
  content: "Upload Complete!";
}

7. From Step 6, locate the following section of code within the CSS that you just added to your theme (the last two blocks of code).  

#uploadery-container label > div:after {
  content: "Upload File";
}

#uploadery-container .upload-complete label > div:after {
  content: "Upload Complete!";
}

8. Replace the text within the quotes ("Upload File" and "Upload Complete!") with your desired messages. You will see "Upload File" when you initially view the input. You will see "Upload Complete!" when the file upload is complete. 

Important Note: Adding superscripts or accent marks directly to code will break your store. Adding superscripts or accent marks requires HTML knowledge. If you need help with adding superscripts or accent marks, please contact us and we'd be happy to help. 😊

9. Save your changes and view your product page! 🎉

Here are some of the most commonly used translations for Upload File:

French: Televerser un fichier 

German: Link zur Datei

Spanish: Subir archivo