Uploading & Overwriting images via http endpoint?
I am using Firebase Storage as my primary image host, but I am looking to navigate away from the Storage platform due to upload/download optimizations, and a number of other interesting Cloudinary settings.
After navigating the documentation, and not really finding a solid answer for using Node.js within my Ionic application, because it seems to need a server to authenticate the signed requests, I came up with the following solution:
let url = 'https://api.cloudinary.com/v1_1/<Cloudinary_Account>/image/upload';
let fd = new FormData();
fd.append("upload_preset", '<Unsigned_upload_preset>');
fd.append('public_id', `users/avatars/${<User_Id>}`);
// fd.append('overwrite', 'true'); // This does not work, unfortunately.
fd.append("tags", "browser_upload"); // Optional - add tag for image admin in Cloudinary
fd.append("file", image);
const config = {
headers: { "X-Requested-With": "XMLHttpRequest" },
};
return new Promise((resolve, reject) => {
this.http.post(url, fd, config).subscribe(res => {
if(res) {
resolve(res);
}
});
});
}
So after looking through the docs, I found out that I cannot overwrite files using an unsigned upload, so I need to use a server to get the signed request. But I do not want to use Firebase Functions to process uploading the image to Cloudinary, because while there are examples of it on the web, it goes back to my original issue of the upload times taking too long (upwards of 2 mins, for 4 - base64 images).
How can I create a signed request client side, without exposing my API_SECRET to the user?
Or would it be better to create a firebase function that returns the signed signature to the user via an HTTP request, that they can then use to upload to Cloudinary directly from their mobile device?
I know there are JQuery upload methods, but I do not have any inputs that the user is going to be using, currently, I am uploading the images to Firebase progmatically, after a certain user interaction happens (they select/take a photo) and navigate to another page.
Post is closed for comments.
Comments
1 comment