Module upload_files

If you have a storage account in Azure with an associated SAS URL, you can use this helper to create an interface for interacting with files within that storage account within surveyxact. For further information see https://learn.microsoft.com/en-us/azure/storage/blobs/quickstart-blobs-javascript-browser.

To create an upload button within SX define a element on your page. The following attributes are available:

• fileName: The name of the file to be uploaded. If not set, the name of the file will be used.
• fileType: The type of the file to be uploaded. This will predefine your browsers file picker filter. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#attr-accept for more information.
• multiple: If set, the file picker will allow multiple files to be selected. If not set, only one file can be selected. The text defined within the element will be used as the button text. If no text is defined, a default text will be used. This can be used to add multi language buttons. An example of a button would look like this:

<upload-button fileName="cv" fileType=".pdf">Upload CV</upload-button>
Copy

This will save a file called cv.pdf in the Azure storage account. The file type will be set to application/pdf and the file picker will only show PDF files.

If you want to show the uploaded files in a list, you can use the element. This will create a list of all files in the Azure storage account, with which you can interact. This will look like this:

<file-list/>
Copy

To initialize the upload files function, you need to call the init function. This will create the upload buttons and the file list.

To style the upload buttons and the file list, you can use the following CSS classes:

.upload-button {
  background-color: #70919e;
  color: white;
  text-transform: uppercase;
  svg {
    fill: white;
  }
}
.item-list {
}

.list-item {
}
Copy

Can be used calling ssxlib.upload_files