bflows-bandi-fe/src/components/FormField/components/FileuploadAsync/index.js

import React, { useEffect, useState, useRef } from 'react';
import { classNames } from 'primereact/utils';
import { __ } from '@wordpress/i18n';

import FileUploadService from '../../../../service/file-upload-service';

import { FileUpload } from 'primereact/fileupload';
import { Tag } from 'primereact/tag';
import { Button } from 'primereact/button';
import { head, isEmpty } from 'ramda';
import { mimeTypes } from '../../../../configData';

const FileuploadAsync = ({
                             fieldName,
                             setDataFn,
                             label,
                             errors,
                             register,
                             defaultValue = [],
                             config = {},
                             infoText = null,
                             accept = ['image/*'],
                             doctype = 'images',
                             maxSize = 100000000,
                             emptyText = __('Trascina qui il tuo file', 'gepafin'),
                             chooseLabel = __('Aggiungi immagine', 'gepafin'),
                             multiple = false,
                             sourceId = 0,
                             source = 'application',
                             disabled = false
                         }) => {
    const [stateFieldData, setStateFieldData] = useState([]);
    const [acceptFormats, setAcceptFormats] = useState('');
    const inputRef = useRef();

    const customBase64Uploader = (event) => {
        const formData = new FormData()
        for (const file of event.files) {
            formData.append('file', file)
        }
        FileUploadService.uploadFile(sourceId, formData, callback, errorCallback, [
            ['documentType', doctype.toUpperCase()],
            ['sourceType', source.toUpperCase()]
        ]);
    };

    const callback = (data) => {
        if (data.status === 'SUCCESS') {
            setStateFieldData(data.data);
            const files = inputRef.current.getFiles();
            inputRef.current.setUploadedFiles(files);
            inputRef.current.setFiles([]);
        }
    }

    const errorCallback = (err) => {
        console.log('err', err);
    }

    const itemTemplate = (file) => {
        return (
            <div className="appForm__fileUploadItem">
                <div>
                    <span className="appForm__fileUploadItemName">
                        {file.name}
                    </span>
                </div>
                <div>
                    {file.id ? <Tag value={__('Caricato', 'gepafin')} severity="success"></Tag> : null}
                    {!file.id ? <Tag value={__('In attesa', 'gepafin')} severity="warning"></Tag> : null}
                </div>
                <div>
                    <Button
                        type="button"
                        disabled={disabled}
                        icon="pi pi-times"
                        severity="danger"
                        aria-label={__('Anulla', 'gepafin')}
                        onClick={() => onTemplateRemove(file)}/>
                </div>
            </div>
        );
    };

    const onTemplateRemove = (file) => {
        if (file.id) {
            FileUploadService.deleteFile(
                {},
                (data) => dCallback(data, file.id),
                dErrorCallback,
                [['id', file.id]]
            );
        } else {
            const files = inputRef.current.getFiles()
            const newFiles = files.filter(o => o.lastModified !== file.lastModified && o.name !== file.name);
            inputRef.current.setFiles(newFiles);
        }
    }

    const dCallback = (data, id) => {
        if (data.status === 'SUCCESS') {
            setStateFieldData(prevState => {
                const newFiles = prevState.filter(o => o.id !== id);
                inputRef.current.setUploadedFiles(newFiles);
                return newFiles;
            });
        }
    }

    const dErrorCallback = (err) => {
        console.log('err', err);
    }

    const onBeforeDrop = (e) => {
        return !isEmpty(e.dataTransfer.files) ? validateFileInputType(e.dataTransfer.files) : false;
    }

    const onBeforeSelect = (e) => {
        if (e.originalEvent.target.files) {
            return !isEmpty(e.originalEvent.target.files)
                ? validateFileInputType(e.originalEvent.target.files)
                : false;
        }
    }

    const validateFileInputType = (files) => {
        const MIMEtype = new RegExp(acceptFormats);

        return Array.prototype.every.call(files, function passesAcceptedFormat(file) {
            return MIMEtype.test(file.type);
        });
    }

    const getPropeMimeLabels = (acceptFormats) => {
        return acceptFormats
            .map(v => {
                const found = head(mimeTypes.filter(o => o.code === v));
                let res = v;

                if (found) {
                    res = found.name;
                }

                return res;
            })
            .join(', ');
    }

    useEffect(() => {
        setStateFieldData(defaultValue);
        register(fieldName, config)
    }, []);

    useEffect(() => {
        // eslint-disable-next-line no-useless-escape
        setAcceptFormats(accept.join(',').replace(/\*/g, '.\*').replace(/,/g, '|'));
    }, [accept]);

    useEffect(() => {
        if (inputRef.current) {
            inputRef.current.setUploadedFiles(stateFieldData);
        }
        setDataFn(fieldName, [...stateFieldData], { shouldValidate: true });
    }, [stateFieldData])

    return (
        sourceId && sourceId !== 0
            ? <>
                <label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] })}>
                    {label}{config.required ? '*' : null}
                    {acceptFormats ? ' (' + getPropeMimeLabels(accept) + ')' : null}
                </label>
                <FileUpload
                    ref={inputRef}
                    disabled={disabled}
                    id={fieldName}
                    name={fieldName}
                    url={'/document/uploadFile'}
                    multiple={multiple}
                    accept={accept}
                    maxFileSize={maxSize}
                    emptyTemplate={<p>{emptyText}</p>}
                    chooseLabel={chooseLabel}
                    cancelLabel={__('Cancella', 'gepafin')}
                    uploadLabel={__('Carica', 'gepafin')}
                    className={classNames({ 'p-invalid': errors[fieldName] })}
                    itemTemplate={itemTemplate}
                    customUpload
                    onBeforeDrop={onBeforeDrop}
                    onBeforeSelect={onBeforeSelect}
                    uploadHandler={customBase64Uploader}/>
                {infoText ? <small>{infoText}</small> : null}
            </>
            : null
    )
}

export default FileuploadAsync;