Monday, November 29, 2021

React.js, handle attachment




import React, { Component } from 'react';

class Attachment extends Component {

    constructor(props) {
        super(props);
    }

    render() {
        const handleDownload = (e, id, type, name) => {
            e.preventDefault();
            if(type == 'preview'){
                this.props.context.componentParent.handleShowPdf(id);
            }else if(type == 'download'){
                this.props.context.componentParent.handleDownload(id, name);
            }
        };
        if(this.props && this.props.data && this.props.data.attachment && this.props.data.attachment.length > 0){
            return (
                <div>
                    {this.props.data.attachment.map((item, i) => {return (
                        <div key={i}><a className="mr-1" onClick={(e) => handleDownload(e, item.file_id, item.type, item.name)}>{item.name}</a>&nbsp;&nbsp;</div>
                    )})}
                </div>
            );
        }else{
            return null
        }
    }

};
 


export default Attachment;

This can be used in AG-grid

  const gridOptions = {
            columnDefs: [
                { field: 'name', headerName: 'Name', hide: false },
                { field: 'apply_end_date', headerName: 'Deadline', },
                {
                    field: 'files', headerName: 'Application Form', minWidth: 400,
                    cellRendererFramework: Attachment,
                },
                {
                    field: 'funding_id',
                    headerName: 'Action',
                    cellRendererFramework: CustomBtn
                },
            ],

 

No comments:

Post a Comment