react-full-gallery
Version:
A react image gallery with upload, edit, remove images.
150 lines (149 loc) • 7.99 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef, useState } from 'react';
import './index.css';
import "antd/dist/antd.css";
import "@uppy/core/dist/style.css";
import "@uppy/dashboard/dist/style.css";
import "@uppy/audio/dist/style.css";
import "@uppy/screen-capture/dist/style.css";
import "@uppy/image-editor/dist/style.css";
import Uppy from '@uppy/core';
import Dashboard from '@uppy/dashboard';
import RemoteSources from '@uppy/remote-sources';
import ImageEditor from '@uppy/image-editor';
import Form from '@uppy/form';
import DropTarget from '@uppy/drop-target';
import Compressor from '@uppy/compressor';
import { v4 as uuidv4 } from 'uuid';
import Gallery from './gallery';
function blobToBase64(blob) {
return new Promise(function (resolve, _) {
var reader = new FileReader();
reader.onloadend = function () { return resolve(reader.result); };
reader.readAsDataURL(blob);
});
}
var ImageGallery = function (props) {
var _a = useState([]), images = _a[0], setImages = _a[1];
var _b = useState([]), imagesToUpload = _b[0], setImagesToUpload = _b[1];
var uppyRef = useRef(null);
var imagesRef = useRef([]);
var imagesToUploadRef = useRef([]);
useEffect(function () {
setImages(props.images);
}, [props.images]);
useEffect(function () {
imagesRef.current = images;
}, [images]);
useEffect(function () {
imagesToUploadRef.current = imagesToUpload;
}, [imagesToUpload]);
useEffect(function () {
setTimeout(function () {
if (!uppyRef.current) {
var uppy = new Uppy({
restrictions: {
maxFileSize: props.maxFileSize || 200000,
allowedFileTypes: props.allowedFileTypes,
},
onBeforeFileAdded: function (currentFile, files) {
var _a, _b, _c, _d, _e;
var shouldFileBeAdded = true;
if (props.onBeforeFileAdded) {
shouldFileBeAdded = !!props.onBeforeFileAdded(currentFile, files);
}
if (shouldFileBeAdded) {
if (currentFile.preview) {
var fullWidthImageUrl = new URL(currentFile.preview);
fullWidthImageUrl.searchParams.delete('w');
setImagesToUpload(__spreadArray(__spreadArray([], imagesToUploadRef.current, true), [{
originalUrl: fullWidthImageUrl.toString(),
name: currentFile.name,
id: uuidv4()
}], false));
}
else if (((_a = currentFile.data) === null || _a === void 0 ? void 0 : _a.size) && Object.keys(currentFile.data).length > 1) {
blobToBase64(currentFile.data).then(function (imageBase64) {
setImagesToUpload(__spreadArray(__spreadArray([], imagesToUploadRef.current, true), [{
originalUrl: imageBase64,
name: currentFile.name,
id: uuidv4()
}], false));
});
}
else if ((_c = (_b = currentFile.remote) === null || _b === void 0 ? void 0 : _b.body) === null || _c === void 0 ? void 0 : _c.url) {
var imageUrl = (_e = (_d = currentFile.remote) === null || _d === void 0 ? void 0 : _d.body) === null || _e === void 0 ? void 0 : _e.url.toString();
setImagesToUpload(__spreadArray(__spreadArray([], imagesToUploadRef.current, true), [{
originalUrl: imageUrl,
name: currentFile.name,
id: uuidv4()
}], false));
}
}
return false;
},
onBeforeUpload: function (files) {
var newImages = Object.keys(files).map(function (key) {
return {
originalUrl: files[key].preview || '',
name: files[key].name,
id: ''
};
});
setImages(__spreadArray(__spreadArray([], imagesRef.current, true), newImages, true));
setTimeout(function () {
var _a;
(_a = document.querySelector('.uppy-DashboardContent-back')) === null || _a === void 0 ? void 0 : _a.click();
}, 200);
if (props.onBeforeUpload) {
return props.onBeforeUpload(files);
}
return false;
},
})
.use(Dashboard, {
target: "#".concat(props.targetId),
inline: true,
height: props.height || 470,
metaFields: [
{ id: 'name', name: 'Name', placeholder: 'file name' },
{ id: 'caption', name: 'Caption', placeholder: 'add description' },
],
note: props.note
})
.use(RemoteSources, {
sources: props.remoteSources || ['Box', 'Dropbox', 'Facebook', 'GoogleDrive', 'Instagram', 'OneDrive', 'Unsplash', 'Url', 'Zoom'],
companionUrl: props.companionUrl,
})
.use(Form, { target: "#".concat(props.formTargetId) })
.use(ImageEditor, { target: Dashboard })
.use(DropTarget, { target: document.querySelector("#".concat(props.dropTargetId || props.targetId)) })
.use(Compressor);
uppyRef.current = uppy;
}
}, 200);
//eslint-disable-next-line
}, []);
return (_jsxs("div", __assign({ style: __assign({ width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column' }, props.style) }, { children: [_jsx("div", { id: props.targetId }), _jsx("form", { id: props.formTargetId }), _jsx(Gallery, { images: imagesToUpload.length ? imagesToUpload : images, setImagesToUpload: setImagesToUpload, loading: props.loading, mode: imagesToUpload.length ? 'Upload' : 'Update', allowMultipleEdit: props.allowMultipleEdit, allowMultipleDelete: props.allowMultipleDelete, handleRemoveImages: props.handleRemoveImages, handleUploadImages: props.handleUploadImages, handleUpdateImages: props.handleUpdateImages })] })));
};
export default ImageGallery;