Upload File

This component is used to upload and store a file or download an uploaded file.

MAUI Variations

The Upload File component is enhanced to provide additional features if the user is using the MAUI application.

MAUI App Behavior

When using the MAUI app a upload button is displayed instead of a drop zone, when the button is selected it will display a popup window giving the user three options for uploading a file:

1. Take Photo
2. Take Video
3. Open File Picker

The Take Photo option will attempt to access the devices camera where the user can take a picture and have it immediately be uploaded.

The Take Video option will attempt to access the devices camera and microphone so the user can record a video and immediately upload it.

The Open File Picker option will open the devices file system and allow the user to select the file on their device they want to upload.

IMPORTANT NOTES:

• If files are being uploaded to private storage then the download button is not available on the MAUI application because MAUI requires files to be downloaded via public URL.
• If an uploaded file is compressed or encrypted file download is suppressed on the MAUI application because MAUI requires files to be downloaded via public URL and doesn’t support decrypting/unpacking of files on the device.

Website Behavior

On the website a drop zone will be displayed allowing a file to be dragged and dropped and automatically uploaded. Alternatively the drop zone can be selected and will open the devices file explorer where the user can select the file they want to upload.

Component Code

The first section of the code for the component contains the standard parameter set for field components along with the variables needed for the component to function. Following the variables are methods used be the component which are listed below.

OnAfterRenderAsync(bool firstRender)

This method is called each time the component is rendered on the screen. Its purpose is to register drag/drop events using JavaScript for the drop-zone functionality.

OnParametersSetAsync()

This is the first method called when the component is being initialized and when there are updates to the parent component. This method is used to give variables a value for the component to correctly display.

LoadFile(InputFileChangeEventArgs = null)

This method is called when the upload button on the website is selected and by the UploadOptionButtonSelected method and when the Open File Picker button is selected from the popup window when using the MAUI application.

This method’s purpose is to take the file being uploaded and break it apart to update component variables. If the file being uploaded is not empty and the file size is less than the specified maximum, then it is uploaded to the selected storage specified in the components field definition.

Once the file is uploaded the following XML is added to the instance data:

<XMLName>
    <FileName>monkey</FileName>
    <FileType>.jpg</FileType>
    <FileURL>https://www.linktoimage.com/monkey.jpg</FileURL>
    <FileVersion>5</FileVersion>
    <FileCompressed>false</FileCompressed>
    <FileEncrypted>false</FileEncrypted>
</XMLName>

Task<MemoryStream> CompressAndEncryptFile(MemoryStream fileData, string fileType, string fileName)

This method is called is called when uploading a new file and UsingCompression or UsingEncryption is true. The purpose of the method is to compress the file and encrypt the compressed file if specified and return the compressed/encrypted memory stream.

MauiUploadFileButtonSelected()

This method is called when the Upload File button is selected and the user is using the MAUI application. The purpose of this method is to display the Upload Options Window.

When using the MAUI application the user has multiple options of how they want to upload a file so having this window display allows the user to specify what they want to do.

UploadOptionButtonSelected(string uploadOption)

This method is called when one of the upload options is selected from the Upload Options Window. The purpose of this method is to close the window, record the selected option, and finally call the LoadFile method.

ClearFile()

This method is called when the Clear File button is selected. This button is only visible when a file has been uploaded. The purpose of this method is to clear all data regarding the uploaded file for the current instance. This will allow the user to upload a different file if they would like.

IMPORTANT NOTE: When the user clears the file, the file is not deleted from the storage, only the reference for the file on the current instance is removed.

Download(PdfViewerDownloadEventArgs args = null)

This method is called when the Download button is selected. This button is only available when a file has been uploaded. The purpose of this method is to download the uploaded file to the users device.

If the user is on the website, the JavaScript function downloadFromByteArray is called in the helper.js file and the file download begins. If the uploaded file is compressed or encrypted then the file will be decrypted and extracted so the raw file is downloaded to the users device.

If the user is on the MAUI application then the devices default web browser is opened and the file begins to download to the devices default downloads directory.

GetFileB64Data()

This method is called when the Base64 code of the uploaded file is required, either to display or download the file. The purpose of this method is to retrieve the Base64 code of the file and save it to the FileData variable.

IMPORTANT NOTE: File URLS are used first but in some cases the URL is not enough and the file Base64 code is required to complete the operation. Using URLs is much better for performance so the Base64 code is only retrieved and used when needed.

OpenImageViewer()

This method is called when the an image file is uploaded and the View Image button is selected. Its purpose is to display the image in a popup window so it can viewed without needing to download it.

OnZoomInClick()

This method is called when the zoom in button in the View Image popup window is selected. Its purpose is to zoom in on the image and call UpdateSlider().

OnZoomOutClick()

This method is called when the zoom out button in the View Image popup window is selected. Its purpose is to zoom out on the image and call UpdateSlider().

OnResetClick()

This method is called when the reset button in the View Image popup window is selected. Its purpose is to reset the zoom and pan on the image and call UpdateSlider().

UpdateSlider()

This method is called when the slider is adjusted in the View Image popup window and when the

CopyURL()

This method is called when the copy file URL button is selected. Its purpose is to copy the file URL to the users clipboard.