Back to Snippets List

file - File Uploads

Browse and upload a file

Thank you, your file has been uploaded

File name: example_1.jpg
Delete file

Upload another file
  1. File name: example_2.jpg
    Delete file
  2. File name: who_onearthwoulduypload_such a huge--file.jpg
    Delete file

Thank you, your file has been uploaded

File name: who_onearthwoulduypload_such a huge--file.jpg
Delete file

Upload another file

Sorry something went wrong, please try again.

Upload another file

Image is too large

Images must be 10mb or less
Upload another file
<div class="file-upload">
    <div class="form-group" data-file-upload="button">
        <div class="form-upload-button">
            <span class="button">Browse and upload a file</span>
            <input type="file">
            <span class="file-name"></span>
        </div>
    </div>
</div>


<div class="file-upload">
    <div class="panel-indent-success">
        <p class="strong">Thank you, your file has been uploaded</p>
        <p>
            File name: <span class="file-name">example_1.jpg</span><br>
            <a href="#">Delete file</a>
        </p>
    </div>

    <div class="form-group" data-file-upload="button">
        <div class="form-upload-button">
            <span class="button">Upload another file</span>
            <input type="file">
            <span class="file-name"></span>
        </div>
    </div>
</div>


<div class="file-upload">
    <div class="form-group">
        <ol class="file-upload-list">
            <li>
                File name: <span class="file-name">example_2.jpg</span><br>
                <a href="#">Delete file</a>
            </li>
            <li>
                File name: <span class="file-name">who_onearthwoulduypload_such a huge--file.jpg</span><br>
                <a href="#">Delete file</a>
            </li>
        </ol>
    </div>

    <div class="panel-indent-success">
        <p class="strong">Thank you, your file has been uploaded</p>
        <p>
            File name: <span class="file-name">who_onearthwoulduypload_such a huge--file.jpg</span><br>
            <a href="#">Delete file</a>
        </p>
    </div>

    <div class="form-group" data-file-upload="button">
        <div class="form-upload-button">
            <span class="button">Upload another file</span>
            <input type="file">
            <span class="file-name"></span>
        </div>
    </div>
</div>


<div class="file-upload">
    <div class="panel-indent-error">
        <p class="strong">Sorry something went wrong, please try again.</p>
    </div>

    <div class="form-group" data-file-upload="button">
        <div class="form-upload-button">
            <span class="button">Upload another file</span>
            <input type="file">
            <span class="file-name"></span>
        </div>
    </div>
</div>


<div class="file-upload">
    <div class="panel-indent-error">
        <p class="strong">Image is too large</p>
        <span class="form-hint">Images must be 10mb or less</span>
    </div>

    <div class="form-group" data-file-upload="button">
        <div class="form-upload-button">
            <span class="button">Upload another file</span>
            <input type="file">
            <span class="file-name"></span>
        </div>
    </div>
</div>

State

  1. Only show the 'Browse and upload a file'
  2. Show the success panel, containing the file name and 'Delete file' button
  3. (If the user uploads another file, so there are 2 or more) show the file list
  4. If something went wrong, show that in the error message
    • File too large
    • Wrong file-type
    • Some sort of server-error ("Sorry something went wrong, please try again.")