Upload pattern.

November 2, 2023 ยท View on GitHub

Upload files to Plone.

Configuration

OptionTypeDefaultDescription
showTitlebooleantrueshow/hide the h1 title
urlstringnullIf not used with a form, this option must provide the URL to submit to or baseUrl with relativePath needs to be used
baseUrlstringnullto be used in conjunction with relativePath to generate submission urls based on related items
relativePathstringnullagain, to be used with baseUrl to create upload url
initialFolderstringnullUID of initial folder related items widget should have selected
currentPathstringnullCurrent path related items is starting with
classNamestring"upload"value for class attribute in the form element
paramNamestring"file"value for name attribute in the file input element
ajaxUploadbooleantruetrue or false for letting the widget upload the files via ajax. If false the form will act like a normal form.
wrapbooleanfalsetrue or false for wrapping this element using the value of wrapperTemplate.
wrapperTemplatestring'
'
HTML template for wrapping around with this element.
resultTemplatestring'

Drop files here...

'
HTML template for the element that will contain file information.
autoCleanResultsbooleantruecondition value for the file preview in div element to fadeout after file upload is completed.
previewsContainerselector".upload-previews"CSS selector for file preview in div element.
containerselector""CSS selector for where to put upload stuff into in case of form. If not provided it will be place before the first submit button.
allowPathSelectionbooleanUse relatedItems to set a different path from the current path. (true, if baseUrl and relativePath are set)
relatedItemsobject{ attributes: ["UID", "Title", "Description", "getURL", "portal_type", "path", "ModificationDate"], batchSize: 20, basePath: "/", vocabularyUrl: null, width: 500, maximumSelectionSize: 1, placeholder: "Search for item on site..." }Related items pattern options. Will only be used if allowPathSelection is true.

Example

Something here that is useful

Something else here that is useful

Another thing here that is useful

<div
    class="pat-upload"
    data-pat-upload='{"url": "/upload",
                                          "relatedItems": {
                                              "vocabularyUrl": "/relateditems-test.json"
                                          }}'
>
    <div>
        <p>Something here that is useful</p>
        <p>Something else here that is useful</p>
        <p>Another thing here that is useful</p>
    </div>
</div>