### Select Language

### Activity

- Team
- Projects
- Schedule

Joshua S. Las Vegas, NV
Melany W. San Jose, CA
Esteban C. Miami, FL
Tara S. New York, NY
The slicer project getslicer.io
31%
5 / 24
Metamovies reworked metamovies.co
84%
28 / 31
Fast Pizza redesign fastpizza.com
60%
25 / 39

Call Danny at Colby's

Today - 11:30am

Meeting with Alice

Today - 01:00pm

Answer Annie's message

Today - 01:45pm

Send new campaign

Today - 02:30pm

Project review

Today - 03:30pm

Call Trisha Jackson

Today - 05:00pm

Write proposal for Don

Today - 06:00pm

#### Recently viewed

Browser Support Blog post
Twitch API Blog post
Twitter Auth Blog post

#### Recent Members

Alice C. Software Engineer
Tara S. UI/UX Designer
Jimmy H. Project Manager

- Components Hub
- Avatars
- Accordions
  - Accordion
  - Collapse
  - Image Accordion
- Breadcrumb
- Calendar
- Dropdown
- Icon Box
- Loader
- Message
- Modal
- Progress
- Tabs
  - Regular Tabs
  - Slider Tabs
- Flex Table
  - Base Table
  - Compact Table
  - Media Table
  - Advanced Table
- Snacks
- Plugins
  - Alertify
  - Autocomplete
  - Datepicker
  - ChoicesJs
  - NoUI Slider
  - Filepond
  - Light Gallery
  - Video Gallery
  - Video Player
  - Toasts
  - WebUI Popover
- Rich Text
  - Summernote
  - Sun Editor

# Filepond

Huro is integrated with Filepond, a performant vanilla javascript uploader library. You can check the plugin documentation on Github. You can also access the javascript code by visiting the `assets/js/components.js` file. The following example accepts a maximum of 3 files shown in a single item row.

          <div class="filepond-uploader">
              <div class="control">
                  <input type="file" class="filepond" name="filepond" multiple
                      data-allow-reorder="true" data-max-file-size="3MB" data-max-files="3">
              </div>
          </div>

          //Register Filepond plugin (once)
          FilePond.registerPlugin(
              FilePondPluginImagePreview,
              FilePondPluginImageExifOrientation,
              FilePondPluginFileValidateSize,
              FilePondPluginImageEdit
          );

          //Instanciate element
          FilePond.create(
              document.querySelector('.filepond'),
          );

### Filepond Two Grid

Huro is integrated with Filepond, a performant vanilla javascript uploader library. You can check the plugin documentation on Github. You can also access the javascript code by visiting the `assets/js/components.js` file. The following example accepts a maximum of 3 files shown in a 2 items row.

          <div class="filepond-uploader is-two-grid">
              <div class="control">
                  <input type="file" class="filepond" name="filepond" multiple
                      data-allow-reorder="true" data-max-file-size="3MB" data-max-files="8">
              </div>
          </div>

          //Instanciate element
          FilePond.create(
              document.querySelector('.filepond-2-grid'),
          );

### Filepond Three Grid

Huro is integrated with Filepond, a performant vanilla javascript uploader library. You can check the plugin documentation on Github. You can also access the javascript code by visiting the `assets/js/components.js` file. The following example accepts a maximum of 3 files shown in a 3 items row.

          <div class="filepond-uploader is-three-grid">
              <div class="control">
                  <input type="file" class="filepond" name="filepond" multiple
                      data-allow-reorder="true" data-max-file-size="3MB" data-max-files="8">
              </div>
          </div>

          //Instanciate element
          FilePond.create(
              document.querySelector('.filepond-3-grid'),
          );

### Profile Filepond

Huro is integrated with Filepond, a performant vanilla javascript uploader library. You can check the plugin documentation on Github. You can also access the javascript code by visiting the `assets/js/components.js` file. The following example is fit for profile image upload (1:1 ratio).

          <div class="filepond-profile-wrap is-tiny">
              <input type="file" class="profile-filepond-tiny" name="profile_filepond_tiny"
              accept="image/png, image/jpeg, image/gif">
          </div>

          <div class="filepond-profile-wrap is-small">
              <input type="file" class="profile-filepond-small" name="profile_filepond_small"
              accept="image/png, image/jpeg, image/gif">
          </div>

          <div class="filepond-profile-wrap">
              <input type="file" class="profile-filepond" name="profile_filepond"
              accept="image/png, image/jpeg, image/gif">
          </div>

          //Example for the bigger one (Refer to assets/js/components.js for the others)
          FilePond.create(
              document.querySelector('.profile-filepond'),
              {
                  labelIdle: `<i class="lnil lnil-cloud-upload"></>`,
                  imagePreviewHeight: 140,
                  imageCropAspectRatio: '1:1',
                  imageResizeTargetWidth: 140,
                  imageResizeTargetHeight: 140,
                  stylePanelLayout: 'compact circle',
                  styleLoadIndicatorPosition: 'center bottom',
                  styleProgressIndicatorPosition: 'right bottom',
                  styleButtonRemoveItemPosition: 'left bottom',
                  styleButtonProcessItemPosition: 'right bottom',
              }
          );

### Square Filepond

Huro is integrated with Notyf, a dead simple vanilla javascript toasting library. You can check the plugin documentation on Github. You can also access the javascript code by visiting the `assets/js/components.js` file. The success toast is one the 2 notyf default toasts.

          <div class="filepond-square-wrap is-tiny">
              <input type="file" class="square-filepond-tiny" name="square_filepond_tiny"
              accept="image/png, image/jpeg, image/gif">
          </div>

          <div class="filepond-square-wrap is-small">
              <input type="file" class="square-filepond-small" name="square_filepond_small"
              accept="image/png, image/jpeg, image/gif">
          </div>

          <div class="filepond-square-wrap">
              <input type="file" class="square-filepond" name="square_filepond"
              accept="image/png, image/jpeg, image/gif">
          </div>

          //Example for the bigger one (Refer to assets/js/components.js for the others)
          FilePond.create(
              document.querySelector('.square-filepond'),
              {
                  labelIdle: `<i class="lnil lnil-plus"></>`,
                  imagePreviewHeight: 140,
                  imageCropAspectRatio: '1:1',
                  imageResizeTargetWidth: 140,
                  imageResizeTargetHeight: 140,
                  stylePanelLayout: 'compact circle',
                  styleLoadIndicatorPosition: 'center bottom',
                  styleProgressIndicatorPosition: 'right bottom',
                  styleButtonRemoveItemPosition: 'left bottom',
                  styleButtonProcessItemPosition: 'right bottom',
              }
          );