Eventival Styleguide / Components / File uploaders

File uploaders

The file upload function transfers client-side-generated data (files) to the WWW Server.

A user should know what action is needed to upload the file and for what purpose. For example, the action “Photo” paired with a “Upload file” button.

File upload stages

File upload and capture

Basic size

<div class="form-group">
  <label>Photo</label>
  <div class="file-upload">
    <div class="df">
      <button type="button" class="btn btn--action-outline"><i class="fas fa-cloud-upload-alt"></i> Upload</button>
      <button type="button" class="btn btn--action-outline"><i class="fa fa-camera"></i> Capture from camera</button>
    </div>
  </div>
</div>

Small size

Add `file-upload--small` class to get file uploader with smaller buttons. We used it in the form for adding a new profile.

<div class="form-group">
  <label>Photo</label>
  <div class="file-upload file-upload--small">
    <div class="df">
      <button type="button" class="btn btn--action-outline"><i class="fas fa-cloud-upload-alt"></i> Upload</button>
      <button type="button" class="btn btn--action-outline"><i class="fa fa-camera"></i> Capture from camera</button>
    </div>
  </div>
</div>

Additionally, if you want to align the buttons vertically use the `flex-gap--vertical` class instead of the `df` class above.


File upload progress

<div class="form-group">
    <label>Photo</label>
    <div class="file-upload">
      <div class="progress">
        <label>The file is now being uploaded</label>
        <div class="progress__bar">
          <div class="progress__bar__content"></div>
        </div>
      </div>
    </div>
  </div>

File upload crop and delete

KS
Crop Delete 
<div class="form-group">
  <label>Photo</label>
  <div class="file-upload">
    <div class="df items-center">
      <div class="photo">
        <div class="avatar avatar-placeholder avatar-placeholder--people avatar--circle">
          <div>KS</div>
        </div>
      </div>
      <span class="file-upload__action"><i class="fal fa-crop"></i>Crop</span>
      <span class="file-upload__action"><i class="fal fa-trash-alt"></i>Delete</span>
    </div>
  </div>
</div>

File upload file name and delete

File_name.txt Delete 
<div class="form-group">
  <label>Photo</label>
  <div class="file-upload">
    <div class="df items-center">
      <span class="file-upload__file-name">File_name.txt</span>
      <span class="file-upload__action"><i class="fal fa-trash-alt"></i>Delete</span>
    </div>
  </div>
</div>