Please label the attached file

Question

Please label the attached file

Looking for assistance with adding a label next to the "Attachment" button that displays the file name selected by the user in a contact form. The code provided utilizes CSS, HTML, and JavaScript to achieve this functionality. Any input or suggestions would be greatly appreciated. Thanks!

 // JavaScript function to handle opening the navigation menu
      function openNav() {
          document.getElementById("myNav").classList.remove("collapsed");
          var input = document.getElementById("txtDetail");
          var value = input.value;
          var label = document.getElementById("labelDetail");
          label.innerHTML = value;

          // Additional functions to update labels based on user input

          document.getElementById("myNav").style.width = "100%";
      }

      // Function to close the navigation menu
      function closeNav() {
          document.getElementById("myNav").style.width = "0%";
          document.getElementById("myNav").classList.add("collapsed");
      }

 /* CSS Styles for the contact form */
      ...

 /* HTML Structure of the Contact Form */
      ...

javascript html css

Answer 1

Answer №1

Create an element, such as a <span>, to come after the <label> that references the <input type="file"> element with the use of the for attribute. Upon the change event of the <input type="file">, extract the name from .files[0] and set this value to the .innerHTML property of the span.

Note that the styling for the span has been left out of this answer.

function openNav() {
        document.getElementById("myNav").classList.remove("collapsed");
        var input = document.getElementById("txtDetail");
        var value = input.value;
        var label = document.getElementById("labelDetail");
        label.innerHTML = value;

        var input = document.getElementById("txtName");
        var value = input.value;
        var label = document.getElementById("labelName");
        label.innerHTML = value;

        var input = document.getElementById("txtNumber");
        var value = input.value;
        var label = document.getElementById("labelNumber");
        label.innerHTML = value;

        var input = document.getElementById("txtEmail");
        var value = input.value;
        var label = document.getElementById("labelEmail");
        label.innerHTML = value;

        document.getElementById("myNav").style.width = "100%";
    }

    function closeNav() {
        document.getElementById("myNav").style.width = "0%";
        document.getElementById("myNav").classList.add("collapsed");
    }
    
    document.getElementById("file-upload")
    .addEventListener("change", function() {
      this.labels[0].nextElementSibling.innerHTML = this.files[0].name;
    })

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-font-smoothing: antialiased;
      -moz-font-smoothing: antialiased;
      -o-font-smoothing: antialiased;
      font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    ... (CSS Styles omitted for brevity)
   
</fieldset>
              <fieldset class="fieldset">
                <label id="labelAttach">Attachment:</label>
                <label id="labelFile">File</label>
                <button name="submit" id="contact-submit" data-submit="...Sending">Submit</button>
              </fieldset>
            </div>
          </div>  
        </div>  
        <span id="button" onclick="openNav()">Preview</span>
      </fieldset>
    </form>
  </div>

Answer 2

Create an element, such as a <span>, to come after the <label> that references the <input type="file"> element with the use of the for attribute. Upon the change event of the <input type="file">, extract the name from .files[0] and set this value to the .innerHTML property of the span.

Note that the styling for the span has been left out of this answer.

function openNav() {
        document.getElementById("myNav").classList.remove("collapsed");
        var input = document.getElementById("txtDetail");
        var value = input.value;
        var label = document.getElementById("labelDetail");
        label.innerHTML = value;

        var input = document.getElementById("txtName");
        var value = input.value;
        var label = document.getElementById("labelName");
        label.innerHTML = value;

        var input = document.getElementById("txtNumber");
        var value = input.value;
        var label = document.getElementById("labelNumber");
        label.innerHTML = value;

        var input = document.getElementById("txtEmail");
        var value = input.value;
        var label = document.getElementById("labelEmail");
        label.innerHTML = value;

        document.getElementById("myNav").style.width = "100%";
    }

    function closeNav() {
        document.getElementById("myNav").style.width = "0%";
        document.getElementById("myNav").classList.add("collapsed");
    }
    
    document.getElementById("file-upload")
    .addEventListener("change", function() {
      this.labels[0].nextElementSibling.innerHTML = this.files[0].name;
    })

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-font-smoothing: antialiased;
      -moz-font-smoothing: antialiased;
      -o-font-smoothing: antialiased;
      font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    ... (CSS Styles omitted for brevity)
   
</fieldset>
              <fieldset class="fieldset">
                <label id="labelAttach">Attachment:</label>
                <label id="labelFile">File</label>
                <button name="submit" id="contact-submit" data-submit="...Sending">Submit</button>
              </fieldset>
            </div>
          </div>  
        </div>  
        <span id="button" onclick="openNav()">Preview</span>
      </fieldset>
    </form>
  </div>

Answer 3

Answer №2

Hey there! This code snippet is set up to work just the way you need it to. Take a look:

I've included some JS that you can easily copy and paste into your project, allowing it to handle the task at hand!

Within this piece of code, I'm extracting the value from the input element, which represents a path. By utilizing the substring method, we're able to isolate and retrieve the desired content - in this case, the file name.

document.getElementById('file-upload').onchange = showText;
function showText() {
  var fileVal = this.value;
  var last = fileVal.lastIndexOf("\\");
  if (last >= 0) {
    fileVal = fileVal.substring(last + 1);
  }
  document.getElementById('fileValue').innerText = fileVal;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

input[type="file"] {
  display: none;
}

.custom-file-upload {
  cursor: pointer;
  padding: 13px 16px;
  width: 125px;
  height: 45px;
  border: none;
  font-family: Verdana;
  background: #4CAF50;
  color: #FFF;
  margin: 0 0 5px;
  font-size: 15px;
  display: inline-block;
  vertical-align: top;
  text-align: center;
}

.custom-file-upload:hover {
  background: #43A047;
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
}

.custom-file-upload:active {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

<label for="file-upload" class="custom-file-upload">
<i class="fa fa-cloud-upload"></i> Attachment
</label>
<input id="file-upload" type="file" />
<p id="fileValue" style="display: inline-block"></p>

Answer 4

Hey there! This code snippet is set up to work just the way you need it to. Take a look:

I've included some JS that you can easily copy and paste into your project, allowing it to handle the task at hand!

Within this piece of code, I'm extracting the value from the input element, which represents a path. By utilizing the substring method, we're able to isolate and retrieve the desired content - in this case, the file name.

document.getElementById('file-upload').onchange = showText;
function showText() {
  var fileVal = this.value;
  var last = fileVal.lastIndexOf("\\");
  if (last >= 0) {
    fileVal = fileVal.substring(last + 1);
  }
  document.getElementById('fileValue').innerText = fileVal;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

input[type="file"] {
  display: none;
}

.custom-file-upload {
  cursor: pointer;
  padding: 13px 16px;
  width: 125px;
  height: 45px;
  border: none;
  font-family: Verdana;
  background: #4CAF50;
  color: #FFF;
  margin: 0 0 5px;
  font-size: 15px;
  display: inline-block;
  vertical-align: top;
  text-align: center;
}

.custom-file-upload:hover {
  background: #43A047;
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
}

.custom-file-upload:active {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

<label for="file-upload" class="custom-file-upload">
<i class="fa fa-cloud-upload"></i> Attachment
</label>
<input id="file-upload" type="file" />
<p id="fileValue" style="display: inline-block"></p>

Please label the attached file

Answer №1

Answer №2

Similar questions

Tips for repairing buttons in the CSS container

Generate a fresh object with distinct identifiers

Can we disable hydration warnings for all nested children within a component in NextJS?

Is it possible to remotely adjust JavaScript configurations on the client's side using JSON?

Converting JavaScript to JSON and saving dynamic properties

Utilizing NodeSize to Optimize the Spacing Among Nodes in the D3 Tree Arr

Incorporating the Acts_as_votable gem alongside Angularjs for interactive voting functionality

The 404 error message was encountered when attempting to fetch the Ajax

Embed full content in iframe using bootstrap 4

Utilize Angular to initiate the transmission of attribute values upon a click event

Challenging design with CSS shapes

Unable to retrieve angular HTML content from my standard HTML website

What's the best way to update the value of a TextInput field?

What is the best way to receive a user's input date in Dynamics 365 using HTML/JavaScript?

Incorporate a fontawesome icon into a dynamically created button using ajax

Managing JavaScript promise rejections

Retrieving selected values from a dynamic Primeng checkbox component

Only display the child component once the asynchronous function in the parent's mounted hook has finished executing

Constantly positioning the text cursor over the Textbox

The ES6 reduce method is not giving the expected result