README

@fusionworks/ra-s3-input

It's an input file for react-admin that uploads files on S3. This component is an wrapper for react-s3-uploader and uses react-image-lightbox for image galeries.

Install

npm install @fusionworks/ra-s3-input

Props

S3FileInput

Prop	Type	Description	Default
source	string	source field in resource object
apiRoot	string	path to api server
fileCoverImg	string	source field in your resource model
uploadOptions	object	options that will be passed to s3Input component (same options as props for react-s3-uploader)
multipleFiles	boolean	allows to upload multiple files	false

S3FileFolder

Prop	Type	Description
source	string	source field in resource object
apiRoot	string	path to api server

Usage

Using in Create/Edit form is similar :

import { Edit, SimpleForm, TextInput } from 'react-admin';
// import S3FileInput component
import { S3FileInput } from '@fusionworks/ra-s3-input';

export const EntityEdit = props => (
  <Edit {...props}>
    <SimpleForm>
      <TextInput source='id' />
      <TextInput source='name' />
        <S3FileInput
          source='photo'
          apiRoot='localhost:3000/' // your api server
          fileCoverImg="someImgURL" // cover img for non-img files
          multipleFiles // allaw to save multiple files for that source
          uploadOptions={{
            signingUrl: 'localhost:3000/s3/sign', // api point to your server for S3 signin,
            s3path: 'yourS3FolderOnBucket/subFolderId', // path to folder from S3 where wil be saved file
            multiple: true, // for selecting multiple files from file system
          }}
        />
    </SimpleForm>
  </Edit>
);

And There is a componont for simple showing Files, without ability to add/delete files:


import { Show, SimpleShowLayout, TextField } from 'react-admin';
// import S3FileField
import { S3FileField } from '@fusionworks/ra-s3-input';

// use S3FileField component in show View
export const ShowEntity = props => (
  <Show {...props}>
    <SimpleShowLayout>
        <TextField source="id" />
        <TextField source="name" />
        <S3FileField
          apiRoot='localhost:3000/' // your api server
          source="photos"
        />
    </SimpleShowLayout>
  </Show>
);

Also there is required some handling for /signIn route and for file get reuqests.

This is haow it is done on a backend server that uses nestJs :


// s3.controller
import { Controller, Get, Req, Res, Param } from '@nestjs/common';
import { S3Service } from './s3.service';

@Controller('s3')
export class S3Controller {
  constructor(private s3service: S3Service) {}

  @Get('/sign')
  sign(@Req() req, @Res() res) {
    return this.s3service.signIn(req, res);
  }

  @Get('/uploads/yourS3FolderOnBucket/subFolderId/:key')
  fileRedirect(@Param('caseId') caseId: string, @Param('key') key: string, @Res() res) {
    return this.s3service.tempRedirect(caseId, key, res);
  }
}

// s3.service
import { Injectable } from '@nestjs/common';
import { InjectConfig, ConfigService } from 'nestjs-config';
import { S3 } from 'aws-sdk';

@Injectable()
export class S3Service {
  private readonly s3Bucket: string;
  private readonly s3Region: string;
  private s3: S3;

  constructor( @InjectConfig() private config: ConfigService ) {
    this.s3Bucket = config.get('s3.bucket'); // your s3 bucket name
    this.s3Region = config.get('s3.region'); // your s3 Bucket region
    this.s3 = new S3({ region: this.s3Region, signatureVersion: 'v4' });
  }

  async signIn(req, res): Promise<any> {
    const { objectName, contentType, path } = req.query;
    const objectNameChunks = objectName.split('/');
    const filename = objectNameChunks[objectNameChunks.length - 1];
    const mimeType = contentType;
    const fileKey = `${path || ''}/${objectName}`;
    const params = {
      Bucket: this.s3Bucket,
      Key: fileKey,
      Expires: 60,
      ContentType: mimeType,
      ACL: 'private',
    };

    res.set({ 'Access-Control-Allow-Origin': '*' });
    this.s3.getSignedUrl('putObject', params, (err, data) => {
      if (err) {
        return res.status(500, 'Cannot create S3 signed URL');
      }

      res.json({
        signedUrl: data,
        publicUrl: '/s3/uploads/' + fileKey,
        filename,
        fileKey,
      });
    });
  }

  tempRedirect(subFolder: string, key: string, res) {
    const params = {
      Bucket: this.s3Bucket,
      Key: `yourS3FolderOnBucket/${subFolder}/${key}`,
    };
    this.s3.getSignedUrl('getObject', params, (err, url) => {
      res.redirect(url);
    });
  }

}

Note you need to use aws-sdk module on back-end

Usage no npm install needed!