Changing live_file_input button layout

I’m currently trying to change this name “Choose File” and “No file chosen” to another custom name.

I’m wanting to change the css of this “Choose File” button too.

How do I do ?

My code

            <form id="upload-form" phx-submit="save" phx-change="validate">
              <div class="input-group">
                <div class="custom-file">
                  <%= live_file_input @uploads.import, class: "form-control" %>
                </div>
                <div class="input-group-append">
                  <button type="submit" class="input-group-text">Upload</button>
                </div>
              </div>
            </form>

image

You might find some examples here…

But I think it’s some kind of hack :slight_smile:

1 Like

There is the pseudo-element ::file-selector-button, which is available in newer browsers:

1 Like

Thanks for the direction.
I ended up finding a way.

I’ll leave the code here, in case anyone needs it.

<form id="upload-form" phx-submit="save" phx-change="validate">
  <div class="input-group">
    <div class="custom-file">
    <span>
      <%= name_file(@uploads.import.entries) %>
    </span>
    <span class="btn btn-primary btn-file">
        Arquivo...<%= live_file_input @uploads.import %>
    </span>
    <div class="input-group-append">
      <button type="submit" class="input-group-text">Upload</button>
    </div>
    </div>
  </div>
</form>
  defp name_file(params) do
    params
      |> Enum.map(& &1.client_name)
  end