I am writing a post on how to use the Upload widget for signed params. I gets a signature correctly using a function but then it just sits in a 0% state as if nothing is happening. There are no errors in the console. If I try to close the widget I do get
"There are running uploads. Click OK to abort."
Here is my App.js
```
/* src/App.js */
import React, { useEffect, useState } from "react";
import Amplify, { API, graphqlOperation } from "aws-amplify";
import { createVideo } from "./graphql/mutations";
import { listVideos, cloudinarysignature } from "./graphql/queries";
import awsExports from "./aws-exports";
Amplify.configure(awsExports);
const initialState = { name: "", description: "" };
// eslint-disable-next-line no-unused-vars
async function fetchCloudinarySignature(cb, params) {
try {
constcSign = awaitAPI.graphql(graphqlOperation(cloudinarysignature, { msg:JSON.stringify(params) }));
constdata = JSON.parse(cSign.data.cloudinarysignature);
console.log(`Uploading using key ${data.body}`);
returndata.body;
} catch (err) {
console.log("error fetching signature");
}
}
const uploadWidget = window.cloudinary.createUploadWidget(
{
cloudName:"ajonp",
uploadPreset:"m5mhhkih",
uploadSignature:fetchCloudinarySignature,
},
(error, result) => {
if (!error && result && result.event === "success") {
console.log("Done! Here is the video info: ", result.info);
}
if(error){
console.log(error);
}
}
);
const showWidget = () => {
uploadWidget.open();
};
const App = () => {
const [formState, setFormState] = useState(initialState);
const [videos, setVideos] = useState([]);
useEffect(() => {
fetchVideos();
}, []);
functionsetInput(key, value) {
setFormState({ ...formState, [key]:value });
}
asyncfunctionfetchVideos() {
try {
constvideoData = awaitAPI.graphql(graphqlOperation(listVideos));
constvideos = videoData.data.listVideos.items;
setVideos(videos);
} catch (err) {
console.log("error fetching videos");
}
}
asyncfunctionaddVideo() {
try {
if (!formState.name || !formState.description) return;
constvideo = { ...formState };
setVideos([...videos, video]);
setFormState(initialState);
awaitAPI.graphql(graphqlOperation(createVideo, { input:video }));
} catch (err) {
console.log("error creating video:", err);
}
}
return (
<divstyle={styles.container}>
<h2>Amplify Videos</h2>
<input
onChange={(event) =>setInput("name", event.target.value)}
style={styles.input}
value={formState.name}
placeholder="Name"
/>
<input
onChange={(event) =>setInput("description", event.target.value)}
style={styles.input}
value={formState.description}
placeholder="Description"
/>
<button
style={styles.uploadButton}
className="cloudinary-button"
onClick={showWidget}
>
Upload Video
</button>
<buttonstyle={styles.button}onClick={addVideo}>
Create Video
</button>
{videos.map((video, index) => (
<divkey={video.id ? video.id : index}style={styles.video}>
<pstyle={styles.videoName}>{video.name}</p>
<pstyle={styles.videoDescription}>{video.description}</p>
</div>
))}
</div>
);
};
const styles = {
container: {
width:400,
margin:"0 auto",
display:"flex",
flexDirection:"column",
justifyContent:"center",
padding:20,
},
video: { marginBottom:15 },
input: {
border:"none",
backgroundColor:"#ddd",
marginBottom:10,
padding:8,
fontSize:18,
},
videoName: { fontSize:20, fontWeight:"bold" },
videoDescription: { marginBottom:0 },
button: {
backgroundColor:"black",
color:"white",
outline:"none",
fontSize:18,
padding:"12px 0px",
},
uploadButton: { margin:"22px" },
};
export default App;
/* eslint-disable no-unused-vars */
/* eslint-disable no-undef */
const cloudinary = require("cloudinary").v2;
const cloud_name = process.env.CLOUDINARY_CLOUD_NAME;
const api_key = process.env.CLOUDINARY_API_KEY;
const api_secret = process.env.CLOUDINARY_API_SECRET;
cloudinary.config({
cloud_name,
api_key,
api_secret,
});
exports.handler = async (event) => {
console.log(event);
constresponse = {
statusCode:400,
body:`Missing Cloudinary ENV Variables`,
};
if (!api_secret || !api_key || !cloud_name) {
returnresponse;
}
console.log(`Params for signature`);
constsignature = awaitcloudinary.utils.api_sign_request(
JSON.parse(event.arguments.msg),
api_secret
);
response.body = signature;
returnJSON.stringify(response);
};
Comments
1 comment