* Remote Firmware Updates - Firmware replacement using OTA update or upload via UI

-D FT_UPLOAD_FIRMWARE=1

Flag | Description

------------------ | ----------------------------------------------

FT_PROJECT | Controls whether the "project" section of the UI is enabled. Disable this if you don't intend to have your own screens in the UI.

FT_SECURITY | Controls whether the [security features](#security-features) are enabled. Disabling this means you won't need to authenticate to access the device and all authentication predicates will be bypassed.

FT_MQTT | Controls whether the MQTT features are enabled. Disable this if your project does not require MQTT support.

FT_NTP | Controls whether network time protocol synchronization features are enabled. Disable this if your project does not require accurate time.

FT_OTA | Controls whether OTA update support is enabled. Disable this if you won't be using the remote update feature.

FT_UPLOAD_FIRMWARE | Controls the whether the manual upload firmware feature is enabled. Disable this if you won't be manually uploading firmware.

-D FT_UPLOAD_FIRMWARE=1

"react-dropzone": "^11.0.1",

label="Provide Access Point…"

export const UPLOAD_FIRMWARE_ENDPOINT = ENDPOINT_ROOT + "uploadFirmware";

export function redirectingAuthorizedUpload(xhr: XMLHttpRequest, url: string, file: File, onProgress: (event: ProgressEvent<EventTarget>) => void): Promise<void> {

return new Promise((resolve, reject) => {

xhr.open("POST", url, true);

const accessToken = getStorage().getItem(ACCESS_TOKEN);

if (accessToken) {

xhr.withCredentials = true;

xhr.setRequestHeader("Authorization", 'Bearer ' + accessToken);

}

xhr.upload.onprogress = onProgress;

xhr.onload = function () {

if (xhr.status === 401 || xhr.status === 403) {

history.push("/unauthorized");

} else {

resolve();

}

};

xhr.onerror = function (event: ProgressEvent<EventTarget>) {

reject(new DOMException('Error', 'UploadError'));

};

xhr.onabort = function () {

reject(new DOMException('Aborted', 'AbortError'));

};

const formData = new FormData();

formData.append('file', file);

xhr.send(formData);

});

if (response.status === 401 || response.status === 403) {

Loading&hellip;

import React, { FC, Fragment } from 'react';

import { useDropzone, DropzoneState } from 'react-dropzone';

import { makeStyles, createStyles } from '@material-ui/styles';

import CloudUploadIcon from '@material-ui/icons/CloudUpload';

import CancelIcon from '@material-ui/icons/Cancel';

import { Theme, Box, Typography, LinearProgress, Button } from '@material-ui/core';

interface SingleUploadStyleProps extends DropzoneState {

uploading: boolean;

const progressPercentage = (progress: ProgressEvent) => Math.round((progress.loaded * 100) / progress.total);

const getBorderColor = (theme: Theme, props: SingleUploadStyleProps) => {

if (props.isDragAccept) {

return theme.palette.success.main;

}

if (props.isDragReject) {

return theme.palette.error.main;

}

if (props.isDragActive) {

return theme.palette.info.main;

}

return theme.palette.grey[700];

const useStyles = makeStyles((theme: Theme) => createStyles({

dropzone: {

padding: theme.spacing(8, 2),

borderWidth: 2,

borderRadius: 2,

borderStyle: 'dashed',

color: theme.palette.grey[700],

transition: 'border .24s ease-in-out',

cursor: (props: SingleUploadStyleProps) => props.uploading ? 'default' : 'pointer',

width: '100%',

borderColor: (props: SingleUploadStyleProps) => getBorderColor(theme, props)

}

export interface SingleUploadProps {

onDrop: (acceptedFiles: File[]) => void;

onCancel: () => void;

accept?: string | string[];

uploading: boolean;

progress?: ProgressEvent;

const SingleUpload: FC<SingleUploadProps> = ({ onDrop, onCancel, accept, uploading, progress }) => {

const dropzoneState = useDropzone({ onDrop, accept, disabled: uploading, multiple: false });

const { getRootProps, getInputProps } = dropzoneState;

const classes = useStyles({ ...dropzoneState, uploading });

const renderProgressText = () => {

if (uploading) {

if (progress?.lengthComputable) {

return `Uploading: ${progressPercentage(progress)}%`;

}

return "Uploading\u2026";

}

return "Drop file here or click to browse";

}

const renderProgress = (progress?: ProgressEvent) => (

<LinearProgress

variant={!progress || progress.lengthComputable ? "determinate" : "indeterminate"}

value={!progress ? 0 : progress.lengthComputable ? progressPercentage(progress) : 0}

/>

);

return (

<div {...getRootProps({ className: classes.dropzone })}>

<input {...getInputProps()} />

<Box flexDirection="column" display="flex" alignItems="center">

<CloudUploadIcon fontSize='large' />

<Typography variant="h6">

{renderProgressText()}

</Typography>

{uploading && (

<Fragment>

<Box width="100%" p={2}>

{renderProgress(progress)}

</Box>

<Button startIcon={<CancelIcon />} variant="contained" color="secondary" onClick={onCancel}>

Cancel

</Button>

</Fragment>

)}

</Box>

</div>

);

export default SingleUpload;

export { default as SingleUpload } from './SingleUpload';