@imposium-hub/components 1.39.1 → 1.41.0

package/components/publish-wizard/publish/EmailWorkflow.tsx

@@ -0,0 +1,255 @@
+import * as React from 'react';
+import HRule from '../../h-rule/HRule';
+import Spinner from '../../spinner/Spinner';
+import * as copy from '../../../constants/copy';
+import {BigButton} from '../PublishWizard';
+import { ExportToCsv } from 'export-to-csv';
+import { ICON_DOWNLOAD, ICON_UPLOAD } from '../../../constants/icons';
+import * as moment from 'moment';
+import {IImposiumAPI} from '../../../services/API';
+
+interface IEmailWorkflowProps {
+    story : any;
+    createFreshBatch : (e : string) => any;
+    getBatches : () => any;
+    getBatchExport : (batchId : string) => any;
+    importBatchFromCsv : (storyId : string, batchId : string, batchName : string, csvFile : File, accessKey : string, compId : string, embed : boolean) => any;
+    renderBatch : (batchId : string, batchName : string) => any;
+    status : string;
+    accessKey : string;
+    compositionId : string;
+    compositionName : string;
+    onDone : () => void;
+    api : IImposiumAPI;
+    handleError : (e) => any;
+    batchJobs : any;
+    isExport ? : boolean;
+}
+
+interface IEmailWorkflowState {
+    uploadComplete : boolean;
+    selectedBatchId : string;
+    uploading : boolean;
+    downloading : boolean;
+    renderedBatch : boolean;
+}
+
+class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkflowState> {
+    private readonly hiddenFileInputRef : any;
+    private static readonly PROGRESS_MAX_VALUE : number = 100;
+    private static readonly CSV_EXPORT_CONFIG : any = {
+        fieldSeparator: ',',
+        quoteStrings: '"',
+        decimalSeparator: '.',
+        showLabels: false,
+        showTitle: false,
+        useTextFile: false,
+        useBom: true,
+        useKeysAsHeaders: true
+    };
+    constructor(props) {
+        super(props);
+        this.state = {
+            uploadComplete: false,
+            uploading: false,
+            downloading : false,
+            selectedBatchId: '',
+            renderedBatch: false,
+        };
+        this.hiddenFileInputRef = React.createRef();
+    }
+
+    public downloadSampleCsv() {
+
+        const {name} = this.props.story;
+        const {acts} = this.props.story;
+        const actsKeys : string[] = Object.keys(acts);
+        let inventory : any = {};
+
+        actsKeys.forEach((actKey : string) => {
+            inventory = {...inventory, ...acts[actKey].inventory};
+        });
+
+        const inventoryKeys : string[] = Object.keys(inventory).sort();
+        const maskConfig : any[] = inventoryKeys.map((currKey : string) => ({
+            id: currKey,
+            name: inventory[currKey].name,
+            show: true
+        }));
+
+        const emptyRow : any = maskConfig.map((m : any) => (m.id))
+            .reduce((prevState : any, currId : string) => ({...prevState, [currId]: ''}), {});
+
+        const filename = `${alphaNumeric(name)}-batch-template.csv`;
+        const exporter = new ExportToCsv({
+            ...EmailWorkflow.CSV_EXPORT_CONFIG,
+            filename
+        });
+
+        exporter.generateCsv([emptyRow]);
+    }
+
+    private selectCsv = () : void => {
+        if (this.hiddenFileInputRef.current) {
+            this.hiddenFileInputRef.current.click();
+        }
+    }
+
+    private getBatchName() {
+
+        const {story: {name}, compositionName} = this.props;
+        const date = Date.now();
+        const dateStr = moment(date).format('MMDDYY-HHmm');
+        const batchName = `${alphaNumeric(name)}-${alphaNumeric(compositionName)}-${dateStr}`;
+        return batchName;
+    }
+
+    private doUploadCsv = (uploadEvt) : void => {
+        uploadEvt.persist();
+        const {handleError} = this.props;
+        this.setState({
+            uploading: true,
+            renderedBatch: false,
+        });
+        this.props.createFreshBatch(this.getBatchName())
+            .then((res) => {
+                const {id, name, story_id} = res;
+                this.setState({selectedBatchId: id});
+                this.importBatch({story_id, id, name, uploadEvt});
+            })
+            .catch((e) => {
+                handleError(e);
+                this.setState({uploadComplete: false, uploading: false});
+                throw e;
+            });
+    }
+
+    private importBatch({story_id, id, name, uploadEvt}) {
+        const {accessKey, compositionId, isExport, handleError} = this.props;
+        this.props.importBatchFromCsv(story_id, id, name, uploadEvt.target.files[0], accessKey, compositionId, !isExport)
+            .then(() => {
+                this.setState({uploadComplete: true, uploading: false});
+                if (isExport) {
+                    this.renderBatch({id, name});
+                }
+            })
+            .catch((e) => {
+                const {status, data} = e.response;
+
+                if (status === 400) {
+                    handleError(copy.publish.missingColumns);
+                    alert(copy.publish.csvMissingColumns + data.error);
+                }
+                this.setState({uploadComplete: false, uploading: false});
+                throw e;
+            });
+    }
+
+    private renderBatch({id, name}) {
+        this.props.renderBatch(id, name).then(() => {
+            this.setState({renderedBatch: true});
+        }).catch((e) => {
+            this.props.handleError(copy.publish.renderBatchFailed);
+            this.setState({renderedBatch: false});
+            throw e;
+        });
+    }
+
+    public downloadCsv() {
+        this.setState({
+            downloading: true
+        }, () => {
+            const {status, api, handleError} = this.props;
+            const {selectedBatchId} = this.state;
+            if (status === copy.header.publishing) {
+                handleError(copy.publish.downloadError);
+                return;
+            }
+            this.props.getBatchExport(selectedBatchId).then(() => {
+                this.props.onDone();
+                this.setState({
+                    downloading: false
+                });
+            });
+        });
+    }
+
+    public renderLabel() {
+        const {isExport, batchJobs} = this.props;
+        const {renderedBatch, selectedBatchId, uploading, uploadComplete} = this.state;
+        if (isExport && uploadComplete && !renderedBatch) {
+            return (
+                <span className={'progress-bar'}>
+                    <progress
+                        max = {EmailWorkflow.PROGRESS_MAX_VALUE}
+                        value = {batchJobs.renders[selectedBatchId]}
+                    />
+                </span>
+            );
+        }
+        if (uploading) {
+            const uploadingCopy = (isExport) ? copy.publish.importingData : copy.publish.creatingLinks;
+            return <span><Spinner/>&nbsp;{uploadingCopy}</span>;
+        }
+        return <span>{ICON_UPLOAD}&nbsp;{copy.publish.uploadCsv}</span>;
+    }
+
+    public render() {
+        const {uploadComplete, uploading, downloading, renderedBatch, selectedBatchId} = this.state;
+        const {isExport} = this.props;
+
+        const emailOptions = [
+            {
+                label: <span>{ICON_DOWNLOAD}&nbsp;{copy.publish.downloadSampleCsvLink}</span>,
+                onClick: () => this.downloadSampleCsv(),
+                key: 'download-sample'
+            },
+            {
+                label: this.renderLabel(),
+                onClick: () => this.selectCsv(),
+                key: 'upload',
+                disabled: isExport ? uploadComplete || uploading : uploading,
+            },
+        ];
+        const downloadCsvLabel =  (downloading) ? <span><Spinner/>&nbsp;{copy.publish.exporting}</span> : <span>{ICON_DOWNLOAD}&nbsp;{copy.publish.btnDownload}</span>;
+
+        const downloadCSV = (
+            <div>
+                <h2>{uploadComplete ? copy.publish.downloadLink : copy.publish.generatingLink}</h2>
+                <HRule/>
+                <p>{uploadComplete ? copy.publish.downloadDesc : copy.publish.generatingLinkDesc}</p>
+                <BigButton
+                    label={downloadCsvLabel}
+                    disabled = {downloading}
+                    onClick={() => this.downloadCsv()}/>
+            </div>
+        );
+
+        const uploadCSV = <div>
+            <h2>{copy.publish.emailTitle}</h2>
+            <HRule/>
+            <p>{copy.publish.emailDesc}</p>
+            <input
+                type='file'
+                style={{display: 'none'}}
+                accept='text/csv'
+                ref={this.hiddenFileInputRef}
+                onChange={this.doUploadCsv}/>
+            {emailOptions?.map((option, index) => {
+                return <BigButton
+                    label={<span>{option.label}</span>}
+                    onClick={option.onClick}
+                    disabled={option?.disabled}
+                    key={option.key}/>;
+            })}
+        </div>;
+
+        return (isExport ? renderedBatch : uploadComplete) ? downloadCSV : uploadCSV;
+    }
+}
+
+const alphaNumeric = (str) => {
+    return str.replace(/\W/g, '');
+};
+
+export default EmailWorkflow;

package/components/publish-wizard/publish/HubSpotFlow.tsx

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import Button from '../../button/Button';
+import TextAreaField from '../../text-area-field/TextAreaField';
+import HRule from '../../h-rule/HRule';
+import * as copy from '../../../constants/copy';
+import {ICON_CLIPBOARD} from '../../../constants/icons';
+
+interface IHubSpotFlowProps {
+    story : any;
+    status : string;
+    compositionId : string;
+    accessKey : string;
+    handleError(e) : void;
+    handleNotification? : (n) => void;
+}
+
+class HubSpotFlow extends React.PureComponent<IHubSpotFlowProps, undefined> {
+    constructor(props) {
+        super(props);
+    }
+
+    private createUrl() {
+        const { story, compositionId, accessKey} = this.props;
+        const storyId = story.id;
+        const act = this.getFirstAct(story);
+        const variables = act.inventory;
+        let queryString = '';
+
+        for (const key in variables) {
+            if (variables.hasOwnProperty(key)) {
+                const prefix = (queryString) ? '&' : '?';
+                queryString += `${prefix}${key}={{${key.toUpperCase()}}}`;
+            }
+        }
+
+        const href = window.location.href;
+        const root = (href.indexOf('staging') !== -1 || href.indexOf('localhost') !== -1) ? 'staging.imposium.com' : 'imposium.com';
+        const playerUrl = `https://player.${root}/new/${accessKey}/${storyId}/${compositionId}${queryString}`;
+        const posterUrl = `https://api.${root}/story/${storyId}/${compositionId}/poster${queryString}`;
+        return `<a href="${playerUrl}" target="_blank"><img width="400" alt="Play Video" src="${posterUrl}"></a>`;
+    }
+
+    private getFirstAct = (story) : any => {
+
+        for (const key in story.acts) {
+            if (story.acts.hasOwnProperty(key)) {
+                return story.acts[key];
+            }
+        }
+    }
+
+    public render() {
+        const {status, handleError, handleNotification} = this.props;
+        return (
+            <div>
+                <h2>{copy.publish.hubspotTitle}</h2>
+                <HRule/>
+                <p>{copy.publish.hubspotDesc}</p>
+                <HRule/>
+                <TextAreaField
+                    label={copy.publish.embeddedCode}
+                    value={this.createUrl()}
+                    showCopy = {status !== copy.header.publishing}
+                    onNotification = {(n) => handleNotification(n)}
+                    onError = {(e) => handleError(e)}
+                    readOnly = {true}/>
+                {status === copy.header.publishing &&
+                <Button size={'small'} customStyles={{margin: 0, height: '20px', border: 'none'}}
+                        color='primary'
+                        onClick={() => handleError(copy.publish.embeddedCodeCopyError)}
+                >
+                    {ICON_CLIPBOARD}
+                </Button>
+                }
+            </div>
+        );
+    }
+}
+
+export default HubSpotFlow;

package/components/publish-wizard/publish/PublishStatusIndicator.tsx

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import { cancelPublish } from '../../../redux/actions/publish';
+import { IImposiumAPI } from '../../../services/API';
+import Spinner from '../../spinner/Spinner';
+import { connect } from 'react-redux';
+import { ICON_TIMES } from '../../../constants/icons';
+import { bindActionCreators } from 'redux';
+
+interface IPublishStatusIndicatorProps {
+    publishData : any;
+    cancelPublish(api : IImposiumAPI, storyId : string) : void;
+    api : IImposiumAPI;
+}
+
+interface IPublishStatusIndicatorStates {
+    hover : boolean;
+    publishing : boolean;
+}
+class PublishStatusIndicator extends React.PureComponent<IPublishStatusIndicatorProps, IPublishStatusIndicatorStates> {
+
+    constructor(props) {
+
+        super(props);
+
+        this.state = {
+            hover: false,
+            publishing: true,
+        };
+    }
+
+    public onEnterHandler() {
+        this.setState({hover: true});
+    }
+
+    public onLeaveHandler() {
+        this.setState({hover: false});
+    }
+
+    public cancelPublisingHandler() {
+        const { publishData: {story_id}, api } = this.props;
+        this.props.cancelPublish(api, story_id);
+    }
+
+    public render() {
+        const { publishing, version} = this.props.publishData;
+        const { hover } = this.state;
+
+        // nothing published yet, using working copy
+        if (!publishing && !version) {
+            return null;
+        } else {
+
+            let cta : any = '';
+            if (publishing) {
+                const newVersion = version || 0 + 1;
+                const publishingString = `v${newVersion} Publishing`;
+
+                cta = <span onMouseEnter={() => this.onEnterHandler()} onMouseLeave={() => this.onLeaveHandler()}>
+                    {hover ?
+                    <><span onClick={() => this.cancelPublisingHandler()} style={{cursor: 'pointer'}}>{ICON_TIMES}</span>{' '}{publishingString}</> :
+                    <><Spinner/>{publishingString}</>
+                    }
+                    </span>;
+            } else {
+                cta = <span>{`v${version} Live`}</span>;
+            }
+
+            return <div className = 'publish-status-indicator'>
+                {cta}
+            </div>;
+        }
+
+    }
+}
+
+const mapStateToProps = (state) => ({
+    publishData: state.publish
+});
+
+const mapDispatchToProps = (dispatch) : any => {
+    return bindActionCreators({cancelPublish}, dispatch);
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(PublishStatusIndicator);

package/components/publish-wizard/publish/WebpageHosted.tsx

@@ -0,0 +1,120 @@
+import * as React from 'react';
+import * as copy from '../../../constants/copy';
+import {BigLink, BigButton } from '../PublishWizard';
+import {ICON_DOWNLOAD, ICON_GLOBE, ICON_JS, ICON_PROJECT_DIAGRAM} from '../../../constants/icons';
+import {downloadSDKArchive, ISDKArchiveBody} from '../../../utils/template-generator';
+import {getDemoURL} from '../../../utils/routing';
+import HRule from '../../h-rule/HRule';
+
+interface IWebpageHostedProps {
+    story : any;
+    accessKey : string;
+    compositionId : string;
+}
+
+export const documentationLinks = [
+    {
+        key: 'js-sdk-link',
+        label : <span>{ICON_JS}&nbsp;{copy.integration.js}</span>,
+        link : copy.integration.jsSdkLink
+    },
+    {
+        key: 'rest-link',
+        label : <span>{ICON_PROJECT_DIAGRAM}&nbsp;{copy.integration.rest}</span>,
+        link : copy.integration.restLink
+    },
+];
+
+class WebpageHosted extends React.PureComponent<IWebpageHostedProps> {
+    constructor(props) {
+        super(props);
+    }
+
+    private downloadSampleWebPage = () => {
+        const { story, compositionId, accessKey } = this.props;
+        const firstAct : any = this.getFirstAct(story);
+        let archiveName : string;
+        let sdkExampleBody : ISDKArchiveBody;
+        if (
+            story.id &&
+            story.name &&
+            typeof firstAct !== 'undefined' &&
+            firstAct.hasOwnProperty('inventory')
+        ) {
+            archiveName = story.name + copy.integration.sdkArchiveSuffix;
+            sdkExampleBody = {
+                storyId: story.id,
+                compositionId,
+                storyName: story.name,
+                accessToken: accessKey,
+                inventory: firstAct.inventory
+            };
+
+            downloadSDKArchive(archiveName, sdkExampleBody);
+        }
+    }
+
+    private getFirstAct = (story) : any => {
+
+        for (const key in story.acts) {
+            if (story.acts.hasOwnProperty(key)) {
+                return story.acts[key];
+            }
+        }
+    }
+
+    private linkToDemoPage() {
+        const {accessKey, compositionId, story: {id}} = this.props;
+        if (accessKey) {
+            const demoUrl = `${getDemoURL()}/${accessKey}/${id}/${compositionId}`;
+            window.open(demoUrl, '_blank');
+        }
+    }
+
+    public render() {
+        const webPageOptions = [
+            {
+                label : <span>{ICON_GLOBE}&nbsp;{copy.publish.webPageHosted}</span>,
+                onClick: () => this.linkToDemoPage(),
+            },
+            {
+                label : <span>{ICON_DOWNLOAD}&nbsp;{copy.publish.sampleWebpage}</span>,
+                onClick: () => this.downloadSampleWebPage(),
+            },
+        ];
+
+        return (
+            <div>
+                <h2>{copy.publish.webpageTitle}</h2>
+                <HRule/>
+                <p>{copy.publish.webpageDesc}</p>
+                <HRule/>
+                {webPageOptions?.map((option, index) => {
+                    return (
+                        <BigButton
+                            key={index}
+                            label={option.label}
+                            onClick={() => option.onClick()}
+                        />
+                    );
+                })}
+                <br/>
+                <br/>
+                <h2>{copy.integration.documentation}</h2>
+                <HRule/>
+                <p>{copy.integration.docParagraph}</p>
+                {documentationLinks?.map((link) =>   {
+                    return (
+                        <BigLink
+                            key={link.key}
+                            label = {link.label}
+                            link = {link.link}
+                        />
+                    );
+                })}
+        </div>
+        );
+    }
+}
+
+export default WebpageHosted;

package/constants/copy.ts

@@ -95,3 +95,103 @@ export const compositions = {
     textLayerContent: 'Content',
     tooltipTextLayerContent: 'The copy rendered in this layer. Wrap variables like so: {{variable_id}}.'
 };
+
+export const publish = {
+    accessKey: 'Access Key',
+    tooltipAccessKey: 'API access key to use for this video distribution.',
+    publishTitle: 'Publish & Deliver',
+
+    // publish
+    publishStepTitle: 'STEP 1: Publish your Project',
+    publishStepDesc: 'Your project needs to be published before your changes can be seen. If you haven\'t made any changes since the last time you published, you can skip to the next step.',
+
+    // distribute
+    distributeStepTitle: 'STEP 2: How do you want your users to view their video?',
+    distributeStepDesc: 'Select which Composition you want to deliver, access credentials you want to use, and distribution channel.',
+    compositionError: 'Please Select Composition',
+
+    // webpage
+    btnWebsite: 'Webpage',
+    webpageTitle: 'STEP 3: Webpage',
+    webPageHosted: 'Webpage hosted on Imposium',
+    webpageDesc: 'You can share a demo page that is hosted on Imposium or you can download a sample webpage you can customize and use to generate videos. Please ensure you include a column for every variable on your story.',
+    sampleWebpage: 'Download sample webpage',
+
+    // email
+    btnEmail: 'Email',
+    exporting: 'Exporting CSV... (please wait)',
+    emailTitle: 'STEP 3: Upload a CSV file with your user information in it.',
+    emailDesc: 'You can download a sample CSV with fields to populate as a starting point. Or you can upload one that already has the data in it.',
+    downloadSampleCsvLink: 'Download Sample CSV',
+    uploadCsv: 'Upload Your CSV UserList',
+    generatingLink: 'STEP 4: Generating embed links',
+    downloadLink: 'STEP 5: Download Your Userlist CSV file',
+    btnDownload: 'Download CSV',
+    generatingLinkDesc: 'Please wait while we generate the link for your users. This may take few minutes.',
+    missingColumns: 'Error: missing required columns',
+    renderBatchFailed: 'Error: Failed to render batch',
+    createBatchFailed: 'Error: Failed to create batch',
+    downloadError: 'Error downloading sample CSV.',
+    embeddedCodeCopyError: 'Error copying embed code.',
+    creatingLinks: 'Creating User Links... (please wait)',
+    importingData: 'Importing Data... (please wait)',
+    downloadDesc: 'Your CSV data file is ready to download with an embed code you can import into your email platform to send out.',
+    csvMissingColumns: 'Warning: Some of your column names did not match up with the variables in the story. Please ensure these variables line up and then re-upload the csv: ',
+    // export
+    exportBatchOfVideo: 'Export batch of videos',
+
+    // hubspot
+    btnHubspot: 'Hubspot',
+    hubspotTitle: 'STEP 3: Copy Hubspot code snippet',
+    hubspotDesc: 'Copy the provided embed code into HubSpot. Replace the placeholder variable values with HubSpot template strings, to splice in your user data.',
+    saveChanges: 'Save Changes',
+    embeddedCode: 'Embed Url: ',
+
+    // api
+    btnAPI: 'API integration',
+
+    // global
+    btnPublish: 'Publish',
+    btnSkip: 'Skip',
+    btnBack: 'Back',
+    btnFinished: 'Done',
+    noCompErrorTitle: 'No Compositions Found',
+    noCompErrorDesc: `You can't publish and deliver your project until you have created your first composition.`
+};
+
+export const integration = {
+    errorPullingComps: ' Error getting composition IDs, contact your Imposium admin for support.',
+    errorCreatingCreds: ' Error creating credentials, contact your Imposium admin for support.',
+    errorGettingCreds: ' Error getting credentials, contact your Imposium admin for support.',
+    documentation: 'Documentation',
+    docParagraph: 'Use the links below for more information on integrating Imposium into your application.',
+    js: 'JavaScript SDK',
+    jsSdkLink: 'https://docs.imposium.com/js-sdk/#/',
+    restLink: 'https://docs.imposium.com',
+    rest: 'REST API',
+    sdkArchiveSuffix: ' - JS SDK Integration.zip',
+};
+
+export const header = {
+    publishing: 'Publishing...',
+    working: 'Using Working Copy',
+    statusError: 'Error getting story status',
+    publishJobError: 'Error creating publish story job',
+    publishPollError: 'Error polling publish job status',
+};
+
+export const project = {
+    compName: 'Composition',
+    tooltipCompId : 'Unique ID of the selected composition. Used to render that specific composition via the API and Imposium JS-SDK.',
+};
+
+export const BATCHES_COPY = {
+    progress: {
+        notRendered: 'not rendered',
+        rendering: 'rendering',
+        rendered: 'rendered',
+        cancelled: 'cancelled',
+        queued: 'queued',
+        malformed: 'unknown'
+    }
+};

package/constants/icons.tsx

@@ -51,6 +51,13 @@ import { faLayerGroup } from '@fortawesome/free-solid-svg-icons/faLayerGroup';
 import { faCube } from '@fortawesome/free-solid-svg-icons/faCube';
 import { faFileCode } from '@fortawesome/free-solid-svg-icons/faFileCode';
 import { faQuestionCircle } from '@fortawesome/pro-light-svg-icons/faQuestionCircle';
+import { faHubspot } from '@fortawesome/free-brands-svg-icons/faHubspot';
+import { faEnvelope } from '@fortawesome/free-solid-svg-icons/faEnvelope';
+import { faGlobe } from '@fortawesome/free-solid-svg-icons/faGlobe';
+import { faProjectDiagram } from '@fortawesome/free-solid-svg-icons/faProjectDiagram';
+import { faJs } from '@fortawesome/free-brands-svg-icons/faJs';
+import { faDownload } from '@fortawesome/free-solid-svg-icons/faDownload';
+import { faUpload } from '@fortawesome/free-solid-svg-icons/faUpload';
 
 export const ICON_VIDEO = <FontAwesomeIcon icon = {faVideo}/>;
 
@@ -153,3 +160,17 @@ export const ICON_CUBE = <FontAwesomeIcon icon = {faCube}/>;
 export const ICON_FILE_CODE = <FontAwesomeIcon icon = {faFileCode}/>;
 
 export const ICON_HELP = <FontAwesomeIcon icon = {faQuestionCircle}/>;
+
+export const ICON_HUBSPOT = <FontAwesomeIcon icon = {faHubspot}/>;
+
+export const ICON_EMAIL = <FontAwesomeIcon icon = {faEnvelope}/>;
+
+export const ICON_GLOBE = <FontAwesomeIcon icon = {faGlobe}/>;
+
+export const ICON_PROJECT_DIAGRAM = <FontAwesomeIcon icon = {faProjectDiagram}/>;
+
+export const ICON_JS = <FontAwesomeIcon icon = {faJs}/>;
+
+export const ICON_DOWNLOAD = <FontAwesomeIcon icon = {faDownload}/>;
+
+export const ICON_UPLOAD = <FontAwesomeIcon icon = {faUpload} />;