DEV Community

Cover image for Uploading images to Cloudinary in react-native-typescript, using react-native-image-picker
Chukwunazaekpere
Chukwunazaekpere

Posted on

Uploading images to Cloudinary in react-native-typescript, using react-native-image-picker

First things first; let's setup a cloudinary account on which we'll be saving our images. If you've not gotten an account with cloudinary, check this out: "https://cloudinary.com".
Registration is easy! After the registration phase, you'll be directed to your dashboard. On this dashboard, for now, we need information on the following: upload-presets and cloud-name.
Your cloud-name is directly on the top-left corner of your dashboard(once opened). For the upload-preset, do the following:
On the top-right corner of your dashboard,
a) hit the gear icon.
b) Hit on the upload tab.
c) Scroll downwards to the upload preset section. Cloudinary has an upload-preset for you already. All you need do, is; either add a new one or edit what you've got already. It's okay to edit. What we're after, is to change the "signing mode" feature to "unsigned"; which will enable uploads without authentication. However, uploads are restricted if the upload-preset and cloud name aren't provided.
Either ways, ensure that this variables live in your ".env"-file (check out my post on "Environment variables (hiding variables) in react-native).
Codes:
Below is the code to be called upon during an upload:

<TouchableOpacity onPress={() => selectFile()} style={styles.packageImageButton}>                                        
                 //...other logic ...
               </TouchableOpacity>  
Enter fullscreen mode Exit fullscreen mode
const selectFile = async () => { setCloudinaryImage(""); // Select Image to upload // "includeBase64" ensures that images can be converted into forms, readable by cloudinary. launchImageLibrary({mediaType: "photo", includeBase64: true, maxHeight: 400, maxWidth: 400}, async e => { packageDetails["Package Image"] = ""; const base64Image = e.assets![0].base64; const base64Img = `data:image/jpg;base64,${base64Image}`; //======Set the cloudinary details for the package image=== const uploadedImageData = new FormData(); uploadedImageData.append("upload_preset",CLOUDINARY_UPLOAD_PRESET); uploadedImageData.append("file", base64Img); setPackageDetails({ ...packageDetails, "Package Image": base64Img as string }); setCloudinaryImage(uploadedImageData as any); //=============================================== }); const uploadedImage = await axios.post(${CLOUDINARY_BASE_URL}/${CLOUDINARY_CLOUD_NAME}/image/upload/, cloudinaryImage); packageDetails["Package Image"] = uploadedImage.data.secure_url; };

Discussion (0)