Polymer Element with file drop panel
Install the component using Bower:
$ bower install juicy-filedrop --saveOr download as ZIP.
-
Import Web Components' polyfill (if needed):
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
-
Import Custom Element:
<link rel="import" href="bower_components/juicy-filedrop/juicy-filedrop.html">
-
Start using it!
<juicy-filedrop url="/storage/server/path"></juicy-filedrop>
| Attribute | Options | Default | Description |
|---|---|---|---|
url |
string | `` | URL to files storage server. |
customheader |
string | x-file |
Name for custom header that contains JSON with file meta data. |
maxfilesize |
int | 524288 |
Maximum file size in bytes, 512 KiB by default. |
allowedmimetypes |
string | image/gif,image/jpeg,image/png,image/svg+xml |
Allowed mime types. |
| Event | event.detail |
Description |
|---|---|---|
fileUploading |
{ type: "mime/type", name: "file_name.ext" } |
Triggers when uploading starts. |
fileUploaded |
{ type: "mime/type", name: "file_name.ext", status: 200, statusText: "OK", url: "location" } |
Triggers when files was successfully uploaded. |
fileUploadError |
{ type: "mime/type", name: "file_name.ext", status: 500, statusText: "Internal Error", url: "" } |
Triggers when upload fails. |
fileSelectError |
{ file: { type: "mime/type", name: "file_name.ext" }, message: "file_name.ext has invalid mime type." } |
Triggers when selected file is too big or has not allowed mime type. |
| Event | Description |
|---|---|
openFile |
Opens file prompt |
For detailed changelog, check Releases.
MIT