[lightMode]

File Upload

The <salla-file-upload> web component is used to allow the user to allow uploading a file or a number of files is supported by the File Upload web component, with the help of completed and supported parameters.

Example

File Upload

Usage

<!-- Basic File Upload component usage -->
<salla-file-upload 
  profile-image = false
  name = "First File"
  required = false">
</salla-file-upload>

Properties

Property	Attribute	Description	Type	Default
Accept	`accept`	Accepted file types.	`string`	`image/png, image/jpeg, image/jpg, image/gif, video/*`
Allow Browse	`allow-browse`	Enables or disables browser.	`boolean`	`true`
Allow Drop	`allow-drop`	Enables or disables drag and drop.	`boolean`	`true`
Allow Multiple	`allow-multiple`	Enables or disables adding multiple files.	`boolean`	`false`
Allow Paste	`allow-paste`	Enables or disables pasting of files. Pasting files is not supported on all browesrs.	`boolean`	`true`
Allow Process	`allow-process`	Enables or disables the process button.	`boolean`	`true`
Allow Remove	`allow-remove`	When set to false, the remove button is hidden and disabled.	`boolean`	`true`
Allow Reorder	`allow-reorder`	Allows users to reorder files with drag and drop interaction. Note that this only works in single column mode. It also only works on browsers that support pointer events.	`boolean`	`false`
Allow Replace	`allow-replace`	Allows drop to replace a file, only works when `allowMultiple` is `false`.	`boolean`	`true`
Allow Revert	`allow-revert`	Enables or disables the revert processing button.	`boolean`	`true`
Cart Item ID	`cartItemId`	Pass this property to prepare the upload URL automatically, such as uploading an attachement file in the cart item.	`string`	`undefined`
Check Validity	`check-validity`	Set to `true` to enable custom validity messages. `FilePond` will throw an error when a parent form is submitted and contains invalid files.	`boolean`	`false`
Chunk Force	`chunk-force`	Forces chunks, even for files smaller than the set `chunkSize`.	`boolean`	`false`
Chunk Retry Delays	--	Amount of times and delayes between re-tried uploading of a chunk.	`number[]`	`[500, 1000, 3000]`
Chunk Size	`chunk-size`	The size of a chunk in bytes.	`number`	`5000000`
Chunk Uploads	`chunk-uploads`	Enables chunked uploads. When enabled, it will automatically cut up files in `chunkSize` chunks before upload.	`boolean`	`false`
Credits	`credits`	Shows credits at the bottom of the upload element. Structure is like the following: [{label,url}].	`boolean`	`false`
Disabled	`disabled`	Sets the disabled attribute to the output field.	`boolean`	`false`
Drop On Element	`drop-on-element`	Requires drop on the element itself to catch the file.	`boolean`	`true`
Drop On Page	`drop-on-page`	This will catch all files dropped on the webpage.	`boolean`	`false`
Drop Validation	`drop-validation`	When enabled, files are validated before they are dropped. A file is not added when it is invalid.	`boolean`	`false`
File ID	`file-id`	If the current file has an ID, pass it here as a property, which is to be passed back in the `removed` event.	`number`	`undefined`
Files	`files`	The uploaded files as json `[{url:"...", id:123}]` for delete possibility.	`string`	`undefined`

Force Revert	`force-revert`	Set to `true` to require the file to be successfully reverted before continuing.	`boolean`	`false`
Form Data	`formData`	A JSON form data that is to be injected in the submit request.	`string`	`"{}"`
Height	`height`	The original height of the uploader, will be used to reset the height after the image is removed.	`string`	`undefined`
Icon Process	`icon-process`	The icon used for processing actions.	`string` I	`'<svg>...</svg>'`
Icon Remove	`icon-remove`	The icon used for removing actions.	`string`	`'<svg>...</svg>'`
Icon Retry	`icon-retry`	The icon used for retrying actions.	`string`	`'<svg>...</svg>'`
Icon Undo	`icon-undo`	The icon used for undoing actions.	`string`	`'<svg>...</svg>'`
Ignored Files	--	Ignored file names when handling dropped directories. Note that it is not supported on all browsers.	`any[]`	`['.ds_store', 'thumbs.db', 'desktop.ini']`
Instant Upload	`instant-upload`	Immediately upload new files to the server.	`boolean`	`false`
Item Insert Interval	`item-insert-interval`	The interval to use before showing each item being added to the list.	`number`	`75`
Item Insert Location	`item-insert-location`	You can either set the value to `'after'` to add files to end of list, when dropped at the top of the list or added using browse or paste, or set the value to `'before'` to add files at start of list, or set the value to a compare function to automatically sort items when added.	`"after" \| "before" \| ((a: FilePondFile, b: FilePondFile) => number)`	`'after'`
Label Decimal Separator	`label-decimal-separator`	The decimal separator used to render numbers.	`string`	`undefined`
Label Idle	`label-idle`	Default label shown to indicate this is a drop area. It will automatically bind browse file events to the element with CSS class `.filepond--label-action`.	`string`	`${salla.lang.get('common.uploader.drag_and_drop')}<span class="filepond--label-action"> ${salla.lang.get('common.uploader.browse')} </span>`
Label Thousands Separator	`label-thousands-separator`	The thousdands number separator used to render numbers.	`string`	`undefined`
Max Files Size	`max-files-size`	The maximum size of a file, for instance 3MB or 750KB	`${number}KB}` \| `${number}MB`	`2MB`
Max Files Count	`max-files-count`	The maximum number of files that can be handled.	`number`	`null`
Max Parallel Uploads	`max-parallel-uploads`	The maxmimum number of files that can be uploaded in parallel.	`number`	`2`
Method	`method`	The submit request method.	`string`	`'POST'`
Name	`name`	File input name for the native formData	`string`	`undefined`
Payload Name	`payload-name`	File input name in the request payload	`string`	`undefined`
Profile Image	`profile-image`	Set the component to be profile image uploader with a preview and a circular shape	`boolean`	`false`
Required	`required`	Sets the required attribute to the output field.	`boolean`	`false`
Server Config	`server-config`	A server configuration object describing how the feature should interact with the server.	`string \| { url?: string; timeout?: number; headers?: { [key: string]: string \| number \| boolean; }; process?: string \| ServerUrl \| ProcessServerConfigFunction; revert?: string \| ServerUrl \| RevertServerConfigFunction; restore?: string \| ServerUrl \| RestoreServerConfigFunction; load?: string \| ServerUrl \| LoadServerConfigFunction; fetch?: string \| ServerUrl \| FetchServerConfigFunction; remove?: RemoveServerConfigFunction; }`	`null`
Store As File	`store-as-file`	Tells the feature to store files in hidden file input elements, so they can be posted along with normal form post. It only works if the browser supports the DataTransfer constructor, which is the case on browsers such as Firefox, Chrome, Chromium powered browsers and Safari version 14.1 and higher.	`boolean`	`false`
Uploaded Image	`uploadedImage`	The uploaded image link or URL.	`string`	`undefined`
URL	`url`	The url to submit the image into.	`string`	`undefined`
Value	`value`	The uploaded image link or URL	`string`	`undefined`

Events

Event	Description	Type
`added`	Event emitted when the file has been added	`CustomEvent<{ error: FilePondErrorDescription; file: FilePondFile; }>`
`invalidInput`	This event will be fired when the input is invalid.	`CustomEvent<any>`
`remove`	This event will be fired when the file is about to be removed. Returns a `boolean` value.	`CustomEvent<any>`
`uploaded`	This event will be fired when the file has been uploaded, and a link to the file has been received from the server.	`CustomEvent<string>`

Methods

The pre-defined methods allow for calling functions built by Salla to carry out certain actvities, such as oppendFile which appends an initial file.

Method	Description	Return Type
`appendFile(file: FilePondInitialFile)`	Appends an intial file	`Promise<FilePondInitialFile[]`

[updatedIn] 4 months ago