Salla Docs
Merchant API
  • Merchant API
  • Salla OAuth 2.0
Partner APIs
  • App API
  • Shipment API
Storefront
  • Twilight Engine
  • Twilight SDK
  • Web Components
  • Change Log
Salla CLI
Merchant API
  • Merchant API
  • Salla OAuth 2.0
Partner APIs
  • App API
  • Shipment API
Storefront
  • Twilight Engine
  • Twilight SDK
  • Web Components
  • Change Log
Salla CLI
Salla - Opensource
Salla - Developers Community
  1. Form
  • Overview
  • Usage
  • Components Customization
  • Elements
    • Apps Icons
    • Breadcrumb
    • Color Picker
    • Conditional Fields
    • Count Down
    • Filters
    • Infinite Scroll
    • List Tile
    • Loading
    • Map
    • Modal
    • Placeholder
    • Progress Bar
    • Rating Stars
    • Reviews
    • Reviews Summary
    • Sheet
    • Skeleton
    • Slider
    • Social
    • Social Share
    • Tabs
  • Form
    • Button
    • Bottom Alert
    • Contacts
    • Date Time Picker
    • File Upload
    • Menu
    • Quantity Input
    • Select
    • Tel Input
  • Product
    • Add Product
    • Advertisement
    • Comments
    • Conditional Offer
    • Gifting
    • Installment
    • Meta Data
    • Offer
    • Offer Modal
    • Orders
    • Payments
    • Product Availability
    • Product Card
    • Products List
    • Product Options
    • Product Size Guide
    • Products Slider
    • Quick Buy
    • Quick Order
    • Scopes
    • Search
  • User
    • Cart Summary
    • Localization
    • Login
    • Loyalty
    • Rating
    • User Menu
    • User Profile
    • User Settings
    • Verify
  1. Form

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#

HTML

Properties#

PropertyAttributeDescriptionTypeDefault
AcceptacceptAccepted file types.stringimage/png, image/jpeg, image/jpg, image/gif, video/*
Allow Browseallow-browseEnables or disables browser.booleantrue
Allow Dropallow-dropEnables or disables drag and drop.booleantrue
Allow Image Previewallow-image-previewEnable or disable preview mode when uploading an imagebooleantrue
Allow Multipleallow-multipleEnables or disables adding multiple files.booleanfalse
Allow Pasteallow-pasteEnables or disables pasting of files. Pasting files is not supported on all browesrs.booleantrue
Allow Processallow-processEnables or disables the process button.booleantrue
Allow Removeallow-removeWhen set to false, the remove button is hidden and disabled.booleantrue
Allow Reorderallow-reorderAllows 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.booleanfalse
Allow Replaceallow-replaceAllows drop to replace a file, only works when allowMultiple is false.booleantrue
Allow Revertallow-revertEnables or disables the revert processing button.booleantrue
Cart Item IDcartItemIdPass this property to prepare the upload URL automatically, such as uploading an attachement file in the cart item.stringundefined
Check Validitycheck-validitySet to true to enable custom validity messages. FilePond will throw an error when a parent form is submitted and contains invalid files.booleanfalse
Chunk Forcechunk-forceForces chunks, even for files smaller than the set chunkSize.booleanfalse
Chunk Retry Delays--Amount of times and delayes between re-tried uploading of a chunk.number[][500, 1000, 3000]
Chunk Sizechunk-sizeThe size of a chunk in bytes.number5000000
Chunk Uploadschunk-uploadsEnables chunked uploads. When enabled, it will automatically cut up files in chunkSize chunks before upload.booleanfalse
CreditscreditsShows credits at the bottom of the upload element. Structure is like the following: [{label,url}].booleanfalse
DisableddisabledSets the disabled attribute to the output field.booleanfalse
Drop On Elementdrop-on-elementRequires drop on the element itself to catch the file.booleantrue
Drop On Pagedrop-on-pageThis will catch all files dropped on the webpage.booleanfalse
Drop Validationdrop-validationWhen enabled, files are validated before they are dropped. A file is not added when it is invalid.booleanfalse
File IDfile-idIf the current file has an ID, pass it here as a property, which is to be passed back in the removed event.numberundefined
FilesfilesThe uploaded files as json [{url:"...", id:123}] for delete possibility.stringundefined
Force Revertforce-revertSet to true to require the file to be successfully reverted before continuing.booleanfalse
Form DataformDataA JSON form data that is to be injected in the submit request.string"{}"
HeightheightThe original height of the uploader, will be used to reset the height after the image is removed.stringundefined
Icon Processicon-processThe icon used for processing actions.string I'<svg>...</svg>'
Icon Removeicon-removeThe icon used for removing actions.string'<svg>...</svg>'
Icon Retryicon-retryThe icon used for retrying actions.string'<svg>...</svg>'
Icon Undoicon-undoThe 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 Uploadinstant-uploadImmediately upload new files to the server.booleanfalse
Item Insert Intervalitem-insert-intervalThe interval to use before showing each item being added to the list.number75
Item Insert Locationitem-insert-locationYou 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 Separatorlabel-decimal-separatorThe decimal separator used to render numbers.stringundefined
Label Idlelabel-idleDefault 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 Separatorlabel-thousands-separatorThe thousdands number separator used to render numbers.stringundefined
Max Files Sizemax-files-sizeThe maximum size of a file, for instance 3MB or 750KB${number}KB} | ${number}MB2MB
Max Files Countmax-files-countThe maximum number of files that can be handled.numbernull
Max Parallel Uploadsmax-parallel-uploadsThe maxmimum number of files that can be uploaded in parallel.number2
MethodmethodThe submit request method.string'POST'
NamenameFile input name for the native formDatastringundefined
Payload Namepayload-nameFile input name in the request payloadstringundefined
Profile Imageprofile-imageSet the component to be profile image uploader with a preview and a circular shapebooleanfalse
RequiredrequiredSets the required attribute to the output field.booleanfalse
Server Configserver-configA 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 Filestore-as-fileTells 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.booleanfalse
Uploaded ImageuploadedImageThe uploaded image link or URL.stringundefined
URLurlThe url to submit the image into.stringundefined
ValuevalueThe uploaded image link or URLstringundefined

Events#

EventDescriptionType
addedEvent emitted when the file has been addedCustomEvent<{ error: FilePondErrorDescription; file: FilePondFile; }>
invalidInputThis event will be fired when the input is invalid.CustomEvent<any>
removeThis event will be fired when the file is about to be removed. Returns a boolean value.CustomEvent<any>
uploadedThis 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.
MethodDescriptionReturn Type
appendFile(file: FilePondInitialFile)Appends an intial filePromise<FilePondInitialFile[]
Previous
Date Time Picker
Next
Menu