What's Up :)

I styled custom upload file button, it looks like i want, but i don't know how to make it in .js that - each file name will be shown in new line not like right now after "," - i saw in .js code - line: .join(", ") but i don't know how to replace it with code which will make those files names into new lines :(

Here's my code:

HTML:

  <div>
  <input  type="file" name="myFile[]" id="myFile" multiple>
  <button  type="button">Choose File(s)</button>


  <span ></span>
  </div>
</div>

CSS:

  display: inline-flex;
  align-items: center;
  font-size: 15px;
}

.file-upload__input {
  display: none;
}

.file-upload__button {
  -webkit-appearance: none;
  background: #009879;
  border: 2px solid #00745d;
  border-radius: 4px;
  outline: none;
  padding: 0.5em 0.8em;
  margin-right: 15px;
  color: #ffffff;
  font-size: 1em;
  font-family: "Quicksand", sans-serif;
  font-weight: bold;
  cursor: pointer;
}

.file-upload__button:active {
  background: #00745d;
}

.file-upload__label {
  max-width: 250px;
  font-size: 0.95em;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-family: "Quicksand", sans-serif;
  display: block;
  margin-top: 15px;
}

.JS

  document.querySelectorAll(".file-upload__button"),
  function(button) {
    const hiddenInput = button.parentElement.querySelector(
      ".file-upload__input"
    );
    const label = button.parentElement.querySelector(".file-upload__label");
    const defaultLabelText = "No file(s) selected";

    // Set default text for label
    label.textContent = defaultLabelText;
    label.title = defaultLabelText;

    button.addEventListener("click", function() {
      hiddenInput.click();
    });

    hiddenInput.addEventListener("change", function() {
      const filenameList = Array.prototype.map.call(hiddenInput.files, function(
        file
      ) {
        return file.name;
      });

      label.textContent = filenameList.join(", ") || defaultLabelText;
      label.title = label.textContent;
    });
  }
); 

Thanks everyone who will help <3

CodePudding user response：

I'm adding this as an answer instead of a comment so there is an official answer to this question.

Simply swap this

label.textContent = filenameList.join(", ") || defaultLabelText;

with this instead

label.innerHTML = filenameList.join("<br>") || defaultLabelText;