@patternfly/patternfly

--- id: File upload section: components cssPrefix: pf-c-file-upload beta: true --- ## Examples ### Basic file upload ```html <div class="pf-c-file-upload"> <div class="pf-c-file-upload__file-select"> <div class="pf-c-input-group"> <input class="pf-c-form-control" id="basic-file-upload-text-input" name="basic-file-upload-text-input" aria-label="Drag a file here or browse to upload" readonly placeholder="Drag a file here or browse to upload" aria-describedby="basic-file-upload-browse" /> <button class="pf-c-button pf-m-control" type="button" id="basic-file-upload-browse">Browse...</button> <button class="pf-c-button pf-m-control" type="button" disabled>Clear</button> </div> </div> <div class="pf-c-file-upload__file-details"> <textarea class="pf-c-form-control pf-m-resize-vertical" id="basic-file-upload-file-details" name="basic-file-upload-file-details" aria-label="Empty text area"></textarea> </div> </div> ``` ### Upload complete non editable ```html <div class="pf-c-file-upload"> <div class="pf-c-file-upload__file-select"> <div class="pf-c-input-group"> <input class="pf-c-form-control" id="browsed-file-upload-complete-text-input" name="browsed-file-upload-complete-text-input" aria-label="Read only filename" readonly value="Read only filename" aria-describedby="browsed-file-upload-complete-browse" /> <button class="pf-c-button pf-m-control" type="button" id="browsed-file-upload-complete-browse">Browse...</button> <button class="pf-c-button pf-m-control" type="button">Clear</button> </div> </div> <div class="pf-c-file-upload__file-details" readonly> <textarea class="pf-c-form-control pf-m-resize-vertical" id="browsed-file-upload-complete-file-details" name="browsed-file-upload-complete-file-details" aria-label="Text area" readonly>Ssh-Rsa AAh3zJFkzjjakCJialksjfB3zJFkzzAAhhMskjjakCJialksjfB3z89z3zJFkz3 +kzMAjsauoox88aaZXphBx4fczJFkzMAjsauoox88aaZXphBx4fczJFkzMAjsauoox88aaZXphBx4fc</textarea> </div> </div> ``` ### Upload complete editable ```html <div class="pf-c-file-upload"> <div class="pf-c-file-upload__file-select"> <div class="pf-c-input-group"> <input class="pf-c-form-control" id="drop-file-text-input" name="drop-file-text-input" aria-label="Read only filename" readonly value="Sample.txt" aria-describedby="drop-file-browse" /> <button class="pf-c-button pf-m-control" type="button" id="drop-file-browse">Browse...</button> <button class="pf-c-button pf-m-control" type="button">Clear</button> </div> </div> <div class="pf-c-file-upload__file-details"> <textarea class="pf-c-form-control pf-m-resize-vertical" id="drop-file-file-details" name="drop-file-file-details" aria-label="Text area">Ssh-Rsa AAh3zJFkzjjakCJialksjfB3zJFkzzAAhhMskjjakCJialksjfB3z89z3zJFkz3 +kzMAjsauoox88aaZXphBx4fczJFkzMAjsauoox88aaZXphBx4fczJFkzMAjsauoox88aaZXphBx4fc</textarea> </div> </div> ``` ### Drag file hover component ```html <div class="pf-c-file-upload pf-m-drag-hover"> <div class="pf-c-file-upload__file-select"> <div class="pf-c-input-group"> <input class="pf-c-form-control" id="drag-file-hover-component-text-input" name="drag-file-hover-component-text-input" aria-label="Drag a file here or browse to upload" readonly placeholder="Drag a file here or browse to upload" aria-describedby="drag-file-hover-component-browse" /> <button class="pf-c-button pf-m-control" type="button" id="drag-file-hover-component-browse">Browse...</button> <button class="pf-c-button pf-m-control" type="button" disabled>Clear</button> </div> </div> <div class="pf-c-file-upload__file-details"> <textarea class="pf-c-form-control pf-m-resize-vertical" id="drag-file-hover-component-file-details" name="drag-file-hover-component-file-details" aria-label="Empty text area"></textarea> </div> </div> ``` ### File upload in form with error ```html <form novalidate class="pf-c-form"> <div class="pf-c-form__group"> <div class="pf-c-file-upload"> <div class="pf-c-file-upload__file-select"> <div class="pf-c-input-group"> <input class="pf-c-form-control" id="file-upload-error-text-input" name="file-upload-error-text-input" aria-label="File upload error" required value="Sample.png" aria-describedby="file-upload-error-browse" /> <button class="pf-c-button pf-m-control" type="button" id="file-upload-error-browse">Browse...</button> <button class="pf-c-button pf-m-control" type="button">Clear</button> </div> </div> <div class="pf-c-file-upload__file-details" aria-describedby="textAreaHelperText1" aria-invalid="true"> <textarea class="pf-c-form-control pf-m-resize-vertical" id="file-upload-error-file-details" name="file-upload-error-file-details" aria-label="Empty text area" aria-describedby="textAreaHelperText1" aria-invalid="true"></textarea> </div> </div> <p class="pf-c-form__helper-text pf-m-error" id="textAreaHelperText1" aria-live="polite">We don't support this file type. Try again with a different file type.</p> </div> </form> ``` ### File upload loading ```html <div class="pf-c-file-upload pf-m-loading"> <div class="pf-c-file-upload__file-select"> <div class="pf-c-input-group"> <input class="pf-c-form-control" id="file-upload-loading-text-input" name="file-upload-loading-text-input" aria-label="Read only filename" readonly name="file-upload-loading" value="Sample.png" aria-describedby="file-upload-loading-browse" /> <button class="pf-c-button pf-m-control" type="button" disabled id="file-upload-loading-browse">Browse...</button> <button class="pf-c-button pf-m-control" type="button">Clear</button> </div> </div> <div class="pf-c-file-upload__file-details"> <textarea class="pf-c-form-control pf-m-resize-vertical" id="file-upload-loading-file-details" name="file-upload-loading-file-details" aria-label="Text area">Ssh-Rsa AAh3zJFkzjjakCJialksjfB3zJFkzzAAhhMskjjakCJialksjfB3z89z3zJFkz3 +kzMAjsauoox88aaZXphBx4fczJFkzMAjsauoox88aaZXphBx4fczJFkzMAjsauoox88aaZXphBx4fc</textarea> <div class="pf-c-file-upload__file-details-spinner"> <span class="pf-c-spinner pf-m-lg" role="progressbar" aria-valuetext="Loading..."> <span class="pf-c-spinner__clipper"></span> <span class="pf-c-spinner__lead-ball"></span> <span class="pf-c-spinner__tail-ball"></span> </span> </div> </div> </div> ``` ## Documentation ### Overview ### Usage | Class | Applied to | Outcome | | ----------------------------------------- | ------------------- | --------------------------------------------------------------------------------------- | | `.pf-c-file-upload` | `<div>`, `<form>` | Initiates the file upload component. **Required**. | | `.pf-c-file-upload__file-select` | `<div>` | Initiates the file select element. **Required** | | `.pf-c-file-upload__file-details` | `<div>` | Initiates the file details element. **Required** | | `.pf-c-file-upload__file-details-spinner` | `<div>` | Initiates the file details element. **Required** | | `.pf-m-drag-hover` | `.pf-c-file-upload` | Modifies file upload for when an element is dragged or dropped inside of its container. | | `.pf-m-loading` | `.pf-c-file-upload` | Modifies file upload for the loading state. |