[Edit]

HTML - file input element with SVG image as button (file upload button)

830

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!doctype html>
<html>
<head>
  <style>

    label.upload-button {
        display: inline-flex;
    }

    input.upload-input {
        display: none;
    }
    
    svg.upload-image {
        width: 26px;
        height: 26px;
        cursor: pointer;
    }
    
    span.upload-path {
        margin: 0 0 0 10px;
        font: 13px / 26px Arial;
    }
    
  </style>
</head>
<body>
  <script>
    
    function handleFile(input) {
        var parent = input.parentNode;
        if (parent) {
            var path = parent.querySelector('.upload-path');
            if (path) {
                path.textContent = input.value;
            }
        }
    }
    
  </script>
  <label class="upload-button">
    <input class="upload-input" type="file" onchange="handleFile(this)" />
    <svg class="upload-image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 62 62">
      <path style="stroke: #ff8e2a; stroke-width: 0.5; fill: #ffb12a" d="M31.035.81A30.22 30.22 0 0 0 .815 31.03a30.22 30.22 0 0 0 30.22 30.22 30.22 30.22 0 0 0 30.22-30.22A30.22 30.22 0 0 0 31.036.81zm-.288 7.52h.578a3.607 3.607 0 0 1 3.615 3.615v15.182h15.182a3.607 3.607 0 0 1 3.615 3.615v.578a3.607 3.607 0 0 1-3.615 3.615H34.94v15.183a3.607 3.607 0 0 1-3.615 3.615h-.578a3.607 3.607 0 0 1-3.616-3.615V34.935H11.949a3.607 3.607 0 0 1-3.615-3.615v-.578a3.607 3.607 0 0 1 3.615-3.615H27.13V11.945a3.607 3.607 0 0 1 3.616-3.615z" />
    </svg>
    <span class="upload-path"></span>
  </label>
</body>
</html>

Auto running

Reset