codogo-react-widgets/lib/components/cloudinaryUploader.js

Provides a unified way to access the styling of commonly used widgets across different apps

import _taggedTemplateLiteral from "babel-runtime/helpers/taggedTemplateLiteral";
import _slicedToArray from "babel-runtime/helpers/slicedToArray";

var _templateObject = _taggedTemplateLiteral(["\n\tdisplay: flex;\n\twidth: 100%:\n\theight: 100%;\n\tmin-height: 200px;\n\tborder-radius: 0.5em;\n\tborder: 2px dashed ", ";\n\talign-items: center;\n\tjustify-content: center;\n\ttext-align: center;\n\ttransition: 0.2s border-color linear;\n"], ["\n\tdisplay: flex;\n\twidth: 100%:\n\theight: 100%;\n\tmin-height: 200px;\n\tborder-radius: 0.5em;\n\tborder: 2px dashed ", ";\n\talign-items: center;\n\tjustify-content: center;\n\ttext-align: center;\n\ttransition: 0.2s border-color linear;\n"]),
    _templateObject2 = _taggedTemplateLiteral(["\n\tfont-size: 1em;\n\twidth: 50%;\n"], ["\n\tfont-size: 1em;\n\twidth: 50%;\n"]),
    _templateObject3 = _taggedTemplateLiteral(["\n\twidth: 20%;\n\tpadding-top: 20%;\n\tbackground-image: url(", ");\n\tbackground-size: cover;\n\tbackground-position: center;\n"], ["\n\twidth: 20%;\n\tpadding-top: 20%;\n\tbackground-image: url(", ");\n\tbackground-size: cover;\n\tbackground-position: center;\n"]);

import React from "react";
import styled from "styled-components";
import * as R from "ramda";
import Dropzone from "react-dropzone";
import request from "superagent";
import { compose, withHandlers } from "recompose";
import Button from "./button";

// --------------------------------------------------

var PRESET_NAME = "UnAuthed_LimitSize";
var CLOUDINARY_URL = "https://api.cloudinary.com/v1_1/codogo/upload";

var uploadImageToCloudinary = function uploadImageToCloudinary(file) {
	var upload = request.post(CLOUDINARY_URL).field("upload_preset", PRESET_NAME).field("file", file);

	return new Promise(function (good, fail) {
		return upload.end(function (err, resp) {
			if (!err && resp && resp.body && resp.body.public_id) {
				good(resp.body);
			} else {
				fail(err || resp);
			}
		});
	});
};

var enhance = compose(withHandlers({
	onDrop: function onDrop(props) {
		return function (_ref) {
			var _ref2 = _slicedToArray(_ref, 1),
			    file = _ref2[0];

			if (props.onDropFile) {
				props.onDropFile(file);
			}

			uploadImageToCloudinary(file).then(R.pipe(function (_ref3) {
				var public_id = _ref3.public_id,
				    secure_url = _ref3.secure_url;
				return {
					cloudinaryID: public_id,
					uri: secure_url
				};
			}, props.onUpload || R.identity)).then(function () {
				return window.URL.revokeObjectURL(file.preview);
			}).catch(props.onFail || R.identity);
		};
	}
}));

var DropzoneWrapper = styled.div(_templateObject, function (props) {
	return props.active ? props.theme.colors.blue : props.theme.colors.lightGrey;
});

var DropzoneText = styled.div(_templateObject2);

var DropzoneImagePreview = styled.div(_templateObject3, R.prop("src"));

// props: { isDragActive, isDragReject, acceptedFiles, rejectedFiles }
var DropzoneContent = function DropzoneContent(props) {
	if (props.acceptedFiles.length) {
		return React.createElement(
			DropzoneWrapper,
			{ active: true },
			React.createElement(DropzoneImagePreview, { src: props.acceptedFiles[0].preview }),
			React.createElement(
				DropzoneText,
				null,
				"Uploading..."
			)
		);
	} else if (props.isDragActive) {
		return React.createElement(
			DropzoneWrapper,
			{ active: true },
			React.createElement(
				DropzoneText,
				null,
				"drop your file here!"
			)
		);
	} else {
		return React.createElement(
			DropzoneWrapper,
			null,
			React.createElement(
				DropzoneText,
				null,
				"drag files here or"
			),
			React.createElement(
				Button,
				{ type: "CONFIRM" },
				"Choose a file"
			)
		);
	}
};

var CloudinaryUploader = function CloudinaryUploader(props) {
	return React.createElement(
		Dropzone,
		{
			accept: "image/*",
			onDrop: props.onDrop,
			style: {
				width: "100%",
				height: "100%",
				minHeight: "200px"
			}
		},
		DropzoneContent
	);
};

export default enhance(CloudinaryUploader);