-
Notifications
You must be signed in to change notification settings - Fork 0
/
CloudinaryUploadWidget.jsx
109 lines (100 loc) · 3.24 KB
/
CloudinaryUploadWidget.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
import { useEffect, useState, useCallback } from "react";
import PropTypes from "prop-types";
import { updateEventData } from "./helpers/firebase";
import { getEventIdFromUrl } from "./helpers/urlHelpers";
function CloudinaryUploadWidget({ uwConfig, docSnap }) {
const [loaded, setLoaded] = useState(false);
const [images, setImages] = useState([]);
const [thumbnails, setThumbnails] = useState([]);
const [uploadProgress, setUploadProgress] = useState(null);
const [pullData, setPullData] = useState(false);
/**
* Load Cloudinary Upload Widget Script
*/
useEffect(() => {
if (!loaded) {
const uwScript = document.getElementById("uw");
if (!uwScript) {
const script = document.createElement("script");
script.setAttribute("async", "");
script.setAttribute("id", "uw");
script.src = "https://upload-widget.cloudinary.com/global/all.js";
script.addEventListener("load", () => setLoaded(true));
document.body.appendChild(script);
} else {
setLoaded(true);
}
}
}, [loaded]);
/**
* This useEffect will be trigger every time the docSnap, images, or thumbnails chage
* and will update the data in our Firestore DB
*/
useEffect(() => {
const updateEventImages = async () => {
try {
const updatedData = {
...docSnap,
images: docSnap?.images ? [...docSnap.images, ...images] : [...images],
thumbnails: docSnap?.thumbnails ? [...docSnap.thumbnails, ...thumbnails] : [...thumbnails],
};
await updateEventData(getEventIdFromUrl(window.location.pathname), updatedData);
} catch (error) {
console.error("Error updating document: ", error);
}
};
if (docSnap || images.length > 0 || thumbnails.length > 0 || pullData) {
updateEventImages();
}
setPullData(false);
}, [docSnap, images, thumbnails, pullData]);
const initializeCloudinaryWidget = async () => {
setUploadProgress(null);
setPullData(true);
if (loaded) {
try {
await window.cloudinary.openUploadWidget(uwConfig, processUploads);
} catch (error) {
setUploadProgress('failed');
}
}
};
const processUploads = useCallback((error, result) => {
if (result?.event === "queues-end") {
result.info.files.forEach(img => {
if (
img.status !== "success" ||
img.uploadInfo.moderation?.[0]?.status !== "approved" ||
error !== undefined
) {
setUploadProgress('failed');
} else {
setImages(prevImages => [
...prevImages,
img.uploadInfo.url,
]);
setThumbnails(prevThumbnails => [
...prevThumbnails,
img.uploadInfo.thumbnail_url,
]);
setUploadProgress('successful');
}
});
}
}, []);
return (
<>
<button id="upload_widget" onClick={initializeCloudinaryWidget}>
Upload Images
</button>
{uploadProgress && (
<p>Image Upload Status: {uploadProgress === 'successful' ? 'successful' : 'failed'}</p>
)}
</>
);
}
CloudinaryUploadWidget.propTypes = {
uwConfig: PropTypes.object.isRequired,
docSnap: PropTypes.object,
};
export default CloudinaryUploadWidget;