uppyReactComponent.js

import React, { Component } from "react";
import axios from "axios";
import * as config from "../config.json";
import _ from "lodash";
import { StatusBar } from "@uppy/react";
import { DragDrop } from "@uppy/react";
import "@uppy/core/dist/style.css";
import "@uppy/drag-drop/dist/style.css";
import "@uppy/status-bar/dist/style.css";
import "./s3uploadComponent.css";

const Uppy = require("@uppy/core");
const AwsS3 = require("@uppy/aws-s3");
const appendString = "_something";

const getNewFileName = (filename, fieldValue) => {
	console.log("Func", filename, fieldValue);

	if (fieldValue.includes(appendString)) {
		if (filename.split(".").pop() === fieldValue.split(".").pop())
			return fieldValue.substr(fieldValue.lastIndexOf("/") + 1);
		else {
			return (
				Math.random()
					.toString(36)
					.substring(2, 15) +
				Math.random()
					.toString(36)
					.substring(2, 15) +
				appendString +
				"." +
				filename.split(".").pop()
			);
		}
	} else {
		return (
			Math.random()
				.toString(36)
				.substring(2, 15) +
			Math.random()
				.toString(36)
				.substring(2, 15) +
			appendString +
			"." +
			filename.split(".").pop()
		);
	}
};

const getSignedUrl = (filename, filetype) => {
	return axios
		.post("http://localhost:3030/api/s3/sign/something/kashyap", {
			filename: filename,
			filetype: filetype
		})
		.then(data => {
			// Return an object in the correct shape.
			return {
				method: "PUT",
				url: data.data.signedUrl,
				fields: {}
			};
		});
};

const getOldFileName = (values, fieldName) => {
	console.log(JSON.stringify(values), fieldName);
	const name = _.get(values, fieldName);
	console.log("Name", name);
	return name;
};

class S3BroswerUploader extends Component {
	constructor(props) {
		super(props);
		this.uppy = Uppy({
			autoProceed: true,
			restrictions: {
				maxFileSize: 10000000,
				maxNumberOfFiles: 1,
				minNumberOfFiles: 1,
				allowedFileTypes: [
					"image/*",
					"application/pdf",
					"application/msword",
					"application/vnd.openxmlformats-officedocument.wordprocessingml.document"
				]
			}
		})
			.use(AwsS3, {
				async getUploadParameters(file) {
					let filename = file.data.name;
					const filetype = file.data.type;

					let fieldValues = props.values;
					const fieldName = props.fieldName;

					let oldFileName = await getOldFileName(
						fieldValues,
						fieldName
					);

					filename = getNewFileName(filename, filetype);
					console.log(filename, filetype, oldFileName);

					const signedObject = await getSignedUrl(filename, filetype);
					console.log(signedObject);
					return signedObject;
				}
			})
			.on("complete", result => {
				// console.log(result.successful);
				if (result.successful.length > 0) {
					this.props.saveFileLocation(
						this.props.fieldName,
						result.successful
							.pop()
							.response.uploadURL.split("?")
							.shift()
					);
				}
				this.uppy.reset();
				new S3BroswerUploader();
			});
	}

	render() {
		return (
			<div>
				<DragDrop uppy={this.uppy} />
				<StatusBar uppy={this.uppy} hideAfterFinish={true} />
			</div>
		);
	}
}

export default S3BroswerUploader;