package.docs.components.MultipleFileUpload.examples.MultipleFileUpload.md Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of patternfly Show documentation
Assets, source, tooling, and content for PatternFly 4
The newest version!
---
id: 'Multiple file upload'
section: components
subsection: file-upload
cssPrefix: pf-v6-c-multiple-file-upload
---## Examples

### Basic

```html

  
    
      
        
      
      
        Drag and drop files here
        or
      
    
    
      
    
    Accepted file types: JPEG, Doc, PDF, PNG
  


```

### Drag over

```html

  
    
      
        
      
      
        Drag and drop files here
        or
      
    
    
      
    
    Accepted file types: JPEG, Doc, PDF, PNG
  


```

### Horizontal

```html

  
    
      
        
      
      
        Drag and drop files here
        or
      
    
    
      
    
    Accepted file types: JPEG, Doc, PDF, PNG
  


```

### Horizontal drag over

```html

  
    
      
        
      
      
        Drag and drop files here
        or
      
    
    
      
    
    Accepted file types: JPEG, Doc, PDF, PNG
  


```

### File upload status

```html

  
    
      
        
      
      
        Drag and drop files here
        or
      
    
    
      
    
    Accepted file types: JPEG, Doc, PDF, PNG
  
  
    
      
        
      
      
        
          
            
              
            
            
              
                
                  
                    filename.png
                    40 mb
                  
                
                
                  35%
                
                
                  
                
              
            
            
              
            
          
          
            
              
            
            
              
                
                  
                    filename.doc
                    30 mb
                  
                
                
                  70%
                
                
                  
                
              
            
            
              
            
          
          
            
              
            
            
              
                
                  
                    filename.pdf
                    25 mb
                  
                
                
                  50%
                
                
                  
                
              
            
            
              
            
          
        
      
    
  


```

### File upload status expanded

```html

  
    
      
        
      
      
        Drag and drop files here
        or
      
    
    
      
    
    Accepted file types: JPEG, Doc, PDF, PNG
  
  
    
      
        
      
      
        
          
            
              
            
            
              
                
                  
                    filename.png
                    40 mb
                  
                
                
                  35%
                
                
                  
                
              
            
            
              
            
          
          
            
              
            
            
              
                
                  
                    filename.doc
                    30 mb
                  
                
                
                  70%
                
                
                  
                
              
            
            
              
            
          
          
            
              
            
            
              
                
                  
                    filename.pdf
                    25 mb
                  
                
                
                  50%
                
                
                  
                
              
            
            
              
            
          
        
      
    
  


```

### Horizontal file upload status expanded

```html

  
    
      
        
      
      
        Drag and drop files here
        or
      
    
    
      
    
    Accepted file types: JPEG, Doc, PDF, PNG
  
  
    
      
        
      
      
        
          
            
              
            
            
              
                
                  
                    filename.png
                    40 mb
                  
                
                
                  35%
                
                
                  
                
              
            
            
              
            
          
          
            
              
            
            
              
                
                  
                    filename.doc
                    30 mb
                  
                
                
                  70%
                
                
                  
                
              
            
            
              
            
          
          
            
              
            
            
              
                
                  
                    filename.pdf
                    25 mb
                  
                
                
                  50%
                
                
                  
                
              
            
            
              
            
          
        
      
    
  


```

## Documentation

### Usage

| Class | Applied | Outcome |
| -- | -- | -- |
| `.pf-v6-c-multiple-file-upload` | `` | Initiates the multiple file upload component. **Required** |
| `.pf-v6-c-multiple-file-upload__main` | `` | Defines the main section. |
| `.pf-v6-c-multiple-file-upload__title` | `` | Defines the title. |
| `.pf-v6-c-multiple-file-upload__title-icon` | `` | Defines the title icon. |
| `.pf-v6-c-multiple-file-upload__title-text` | `` | Defines the title text. |
| `.pf-v6-c-multiple-file-upload__title-text-separator` | `` | Defines the title text separator. |
| `.pf-v6-c-multiple-file-upload__upload` | `` | Defines the upload button. |
| `.pf-v6-c-multiple-file-upload__info` | `` | Defines the info section. |
| `.pf-v6-c-multiple-file-upload__status` | `` | Defines the status section. |
| `.pf-v6-c-multiple-file-upload__status-progress` | `` | Defines the status toggle progress. |
| `.pf-v6-c-multiple-file-upload__status-progress-icon` | `` | Defines the status toggle progress icon. |
| `.pf-v6-c-multiple-file-upload__status-progress-text` | `` | Defines the status toggle progress text. |
| `.pf-v6-c-multiple-file-upload__status-list` | `` | Defines the status item list. |
| `.pf-v6-c-multiple-file-upload__status-item` | `` | Defines a status item. |
| `.pf-v6-c-multiple-file-upload__status-item-icon` | `` | Defines the status item icon. |
| `.pf-v6-c-multiple-file-upload__status-item-main` | `` | Defines the status item main progress section. |
| `.pf-v6-c-multiple-file-upload__status-item-close` | `` | Defines the status item close button. |
| `.pf-v6-c-multiple-file-upload__status-item-progress` | `` | Defines the status item progress description. |
| `.pf-v6-c-multiple-file-upload__status-item-progress-text` | `` | Defines the status item progress description text. |
| `.pf-v6-c-multiple-file-upload__status-item-progress-size` | `` | Defines the status item progress description size. |