File list

Description

<jp-file-list> is a component with functionality of <input multiple type="file">, but also supports initial value in form of urls.

---

Attributes

Name	Required	Type	Description
value		string (list of urls separated by comma)	setter
label		string (HTML)	displayed above the field
id		string	unique identifier
name	✓	string	name of the form control
service	✓	FileService	file service
sortable		boolean	enables/disables drag and drop sort
maxfiles		number	maximum number of files allowed
maxfilesValidationMessage		string	validation message for when component does not satisfy maxfiles
minfiles		number	minimum number of files allowed
minfilesValidationMessage		string	validation message for when component does not satisfy minfiles
validationMessages		{[type]: string} where type is string	compact way of writing validation messages in a single attribute
itemWidth		string	Define the width of the item. You need to add the unit (i.e. "px")
itemHeight		string	Define the height of the item. You need to add the unit (i.e. "px")
assetHeight		string	Define the height of the image or video. You need to add the unit (i.e. "px")
assetWidth		string	Define the height of the image or video. You need to add the unit (i.e. "px")
assetObjectFit		string	Define the o of the item. You need to add the unit (i.e. "px")

---

Interfaces

FileService

Defines the accepted file types and provides a method to upload a file.

---

Properties

Name	Required	Type	Description
acceptedFiles	✓	string	defines acceptable file types
maxSize		number	max file size in bytes
uploadFile		(file: any, id?: string) => Promise<string>	uploads a file and returns a promise which is a string that represents a link to the file location

---

Slots

This component does not have any slots.

---

Methods

• getValue
  • returns form field value
• reportValidity
  • triggers reportValidity
• save
  • async function that saves files and adds urls to value

---

Events

• value
  • triggers when files change
• removed
  • triggers when saved file is removed and contains information about url
• change
  • triggers when new files are added and contains information about unsaved files
• rejected
  • triggers when added file is not accepted because it does not satisfy some service criteria

---

Demo

Live Editor

// import '@jaspero/web-components/file-list.wc.js';
// import '@jaspero/web-components/file-list.css';

<jp-file-list></jp-file-list>

Result

Loading...

---