Warning: session_start(): open(/var/lib/php/fpm/session/sess_kr7abfvjgje10b6rp4mkvivfvk, O_RDWR) failed: No such file or directory (2) in /var/www/tst02/wp-content/plugins/wordpress-social-login/wp-social-login.php on line 64

Warning: session_start(): Failed to read session data: files (path: /var/lib/php/fpm/session) in /var/www/tst02/wp-content/plugins/wordpress-social-login/wp-social-login.php on line 64
File - Bootstrap 5 & Material Design 2.0 forms

File

File - Bootstrap 5 & Material Design 2.0 forms

File Input is a field which the user can use to upload one or more files (photos, documents or any other file type) from local storage.


Basic example

The file input is the most gnarly of the bunch and requires additional JavaScript if you’d like to hook them up with functional Choose file… and selected file name text.


          <div class="form-file">
            <input type="file" class="form-file-input" id="customFile" />
            <label class="form-file-label" for="customFile">
              <span class="form-file-text">Choose file...</span>
              <span class="form-file-button">Browse</span>
            </label>
          </div>
        

Add the disabled attribute to the <input> and the custom markup will be updated to appear disabled.


          <div class="form-file">
            <input type="file" class="form-file-input" id="customFileDisabled" disabled />
            <label class="form-file-label" for="customFileDisabled">
              <span class="form-file-text">Choose file...</span>
              <span class="form-file-button">Browse</span>
            </label>
          </div>
        

Longer placeholder text is truncated and an ellipsis is added when there’s not enough space.


          <div class="form-file">
            <input type="file" class="form-file-input" id="customFileLong" />
            <label class="form-file-label" for="customFileLong">
              <span class="form-file-text"
                >Lorem ipsum posuere consectetur est at lobortis nulla vitae elit libero a pharetra
                augue fusce dapibus tellus ac cursus commodo tortor mauris condimentum nibh ut
                fermentum massa justo sit amet risus cras mattis consectetur purus sit amet
                fermentum</span
              >
              <span class="form-file-button">Browse</span>
            </label>
          </div>
        

We hide the default file <input> via opacity and instead style the <label>, and declare a width and height on the <input> for proper spacing for surrounding content.


Sizing

You may also choose from small and large file inputs to match our similarly sized text inputs.


          <div class="form-file form-file-lg mb-3">
            <input type="file" class="form-file-input" id="customFileLg" />
            <label class="form-file-label" for="customFileLg">
              <span class="form-file-text">Choose file...</span>
              <span class="form-file-button">Browse</span>
            </label>
          </div>

          <div class="form-file form-file-sm">
            <input type="file" class="form-file-input" id="customFileSm" />
            <label class="form-file-label" for="customFileSm">
              <span class="form-file-text">Choose file...</span>
              <span class="form-file-button">Browse</span>
            </label>
          </div>