react.js

import * as React from "react";
import {PlelariousTransport} from "../../../helpers/PlelariousTransport";
import {StoryMedia} from "../Story";
import {Media} from "../Media";

interface Props {
    token: string
    storyId: string
    transport: PlelariousTransport
}

interface State {
    isLoading: boolean
    files: Array<File>
    storyMedia: Array<StoryMedia>
    error: any
}

export class UploadMediaModal extends React.Component<Props, State> {

    constructor(props: Readonly<Props>) {
        super(props);
        this.state = { files: [], storyMedia: [], isLoading: true, error: null}
    }

    async componentDidMount() {
        await this.refresh();
    }

    async refresh() {
        const {transport, storyId, token} = this.props

        try {
            const storyMedia = await transport.getStoryMedia(storyId, token)
            this.setState({storyMedia, isLoading: false})
        }
        catch (error) {
            this.setState({error, isLoading: false})
        }
    }

    render() {
        return <div>
            <h3>Upload Media</h3>
            {this.renderBody()}
        </div>
    }

    renderBody() {
        const {isLoading, error, storyMedia} = this.state
        const {storyId, token, transport} = this.props

        if (isLoading) {
            return <p>Loading...</p>
        }

        if (error !== null) {
            const data = error?.response?.data
            console.log('error =', error)
            console.log('data =', data)
            return <p>Failed to upload, see console for details</p>
        }

        const onUpload = async () => {
            try {
                this.setState({isLoading: true})
                await transport.uploadFiles(storyId, token, this.state.files)
                await this.refresh()
            }
            catch (error) {
                this.setState({isLoading: false, error})
            }
        }

        const onFileChange = (event: any) => {
            const fileList = event.target.files
            const files = []

            for (let i = 0; i < fileList.length; i++) {
                files.push(fileList[i])
            }

            this.setState({ files: files });
        };

        const mediaBody = storyMedia.map(it => <Media media={it}/>)

        return <>
            {mediaBody}
            <br />
            <input onChange={onFileChange} type="file" accept="image/*, audio/mp3, video/mp4" multiple={true}/>
            <button onClick={onUpload}>Upload</button>
        </>
    }
}