Direct signed upload with manual generated signature
Hello Cloudinary support. I am trying to upload images from my client side (React & React Native) using signed upload.
I am getting the signature from my server but when I use the signature to upload my image the response is 401 (Unauthorized)
This is my code
**** Server side ****
exports.generateSignature = functions.https.onCall((data, context) => {
const params_to_sign = data.params;
try {
return cloudinary.utils.api_sign_request(
params_to_sign,
CLOUDINARY_SECRET_KEY
);
} catch (error) {
throw new functions.https.HttpsError("failed-precondition", error.message);
}
});
**** Client Side ****
***** Request Signature******
const requestCloudinarySignature = (timestamp) => {
returnnewPromise((resolve, reject) => {
try {
const params = {
timestamp : timestamp
}
const signature = firebaseFunctions.httpsCallable("generateSignature");
signature({
api:api
})
.then((response) => {
resolve(response.data)
})
.catch(error => {
reject(error)
})
} catch (err) {
reject(err);
}
})
}
I successfully get the Signature. Then I tried to use that signature to upload the image in this way
****** Send image to Cloudinary ****
Note: The client side code was used for unsigned and it worked perfectly.
.
.
.
const timestamp = new Date().getTime();
constsignature = awaitgenerateCloudinarySignature(timestamp);
console.log("Signature from Cloudinary: " + signature);
constformData = newFormData();
formData.append("file", file);
formData.append("upload_preset", preset);
formData.append("api_key", my_api_key);
formData.append("timestamp", timestamp)
formData.append("signature", signature);
let config = {
headers: {
"X-Requested-With":"XMLHttpRequest"
},
onUploadProgress:progressEvent=> {
varprogress = Math.round((progressEvent.loaded * 100.0) / progressEvent.total);
setProgressIndicator(progress);
}
}
const response = awaitaxios.post(cloudinaryApiUrl, formData, config);
As I said before I receive 401 (Unauthorized). I have been surfing on Google and through documentation but I haven't found and example with signed upload.
If you guys can point me I will be glad.
Thanks
-
Hi Lina,
It looks like you're using new Date().getTime() which will return milliseconds, but the values you provide should be in seconds.
Can you try it with seconds and see if it works? perhaps something like:
const timestamp =
Math.round(new Date() / 1000)If it still doesn't work, can you provide some information I can use to find these calls in our logs and see what the issue may be?Thanks,
Stephen
Post is closed for comments.
Comments
2 comments