Uploader
Integrated file uploader
Usage
Unless where specified otherwise, the components can be used outside of the Enso ecosystem.
Demo
For live examples and demos, you may visit laravel-enso.com
Installation
Install the package:
yarn add @enso-ui/uploader
(within Enso, remember to cd
into the client
folder before installing front-end assets)
Import the desired component(s):
import { Uploader, EnsoUploader } from '@enso-ui/uploader/bulma';
Note that this package has a couple of external dependencies. Read here for more info.
Exports
@enso-ui/typeahead/bulma
:
Uploader
,EnsoUploader
,
@enso-ui/typeahead/renderless
:
CoreUploader
,
bulma/Uploader.vue
A bulma styled typeahead component built on top of its renderless counterpart.
Example:
<uploader url="post/on/my/route">
</uploader>
Slots:
control
, slot for the upload button/controls
Properties:
isLarge
-boolean
, optional, defaultfalse
, if true, applies the 'is-small' classisSmall
-boolean
, optional, defaultfalse
, if true, applies the 'is-large' class
'Passed-through' properties:
fileKey
-string
, optional, defaultfile
, the key used for the uploaded file/filesfileSizeLimit
-number
, optional, default20000000
, an upper file size limiti18n
-string
, optional, defaultv => v
, the translation functionmultiple
-boolean
, optional, defaultfalse
, if true allows multi-uploadparams
-Object
, optional, defaultnull
, extra parameters that can be sent with the requesturl
-string
, required, the URL used for the query/search to the back end
bulma/EnsoUploader.vue
This bulma styled date filtering component, built on top of the generic version of the component is designed to be used within the Enso ecosystem, requiring less configuration from the dev.
Example:
<enso-uploader url="post/on/my/route">
</enso-uploader>
'Passed-through' properties:
isLarge
-boolean
, optional, defaultfalse
, if true, applies the 'is-small' classisSmall
-boolean
, optional, defaultfalse
, if true, applies the 'is-large' class
renderless/CoreUploader.vue
The renderless typeahead component that can be built upon to create custom components.
Properties:
fileKey
-string
, optional, defaultfile
, the key used for the uploaded file/filesfileSizeLimit
-number
, optional, default20000000
, an upper file size limiti18n
-string
, optional, defaultv => v
, the translation functionmultiple
-boolean
, optional, defaultfalse
, if true allows multi-uploadparams
-Object
, optional, defaultnull
, extra parameters that can be sent with the requesturl
-string
, required, the URL used for the query/search to the back endcompact
-boolean
, optional, defaultfalse
, flag to be used in the actual implementation to show a compact version of the uploader
Events:
open-file-browser
, when the file browser opensupload-start
, when the upload startsupload-successful
, when the upload completes successfullyupload-error
, when the upload fails with errors
Methods:
browseFiles()
, opens the file pickerreset()
, clears the selected files
Questions & Issues
For questions and support please use the issues functionality for this package's github repository.
Please make sure to search for existing issues before creating a new issue, and when opening a new issue, fill the required information in the issue template.
Issues not conforming to the guidelines may be closed immediately.
Depends on
@fortawesome/fontawesome-svg-core
@fortawesome/free-solid-svg-icons
@fortawesome/vue-fontawesome
bulma
vue
Contributions
are welcome. Pull requests are great, but issues are good too.
Thank you to all the people who already contributed to Enso!