├── .DS_Store ├── .all-contributorsrc ├── .gitignore ├── LICENSE ├── README.md ├── _config.yml ├── assets ├── .DS_Store ├── art.gif └── art.png ├── contribution.md ├── index.js ├── package.json ├── src └── unsigned.js └── yarn.lock /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-native-nigeria-community/react-native-cloudinary-image-picker/5ca7b8700d613ed7f64911224e66f3f1be3e2566/.DS_Store -------------------------------------------------------------------------------- /.all-contributorsrc: -------------------------------------------------------------------------------- 1 | { 2 | "files": [ 3 | "README.md" 4 | ], 5 | "imageSize": 100, 6 | "commit": false, 7 | "contributors": [ 8 | { 9 | "login": "godswillokokon", 10 | "name": "OGcodes", 11 | "avatar_url": "https://avatars1.githubusercontent.com/u/34509527?v=4", 12 | "profile": "https://ogcodes.netlify.com/", 13 | "contributions": [ 14 | "code", 15 | "doc" 16 | ] 17 | }, 18 | { 19 | "login": "just1and0", 20 | "name": "Oluwatobi Shokunbi ", 21 | "avatar_url": "https://avatars3.githubusercontent.com/u/17249207?v=4", 22 | "profile": "https://linksnest.com/just1and0", 23 | "contributions": [ 24 | "code", 25 | "doc" 26 | ] 27 | } 28 | ], 29 | "contributorsPerLine": 7, 30 | "projectName": "react-native-cloudinary-image-picker", 31 | "projectOwner": "react-native-nigeria-community", 32 | "repoType": "github", 33 | "repoHost": "https://github.com", 34 | "skipCi": true 35 | } 36 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 React Native Nigeria Community 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![react native cloudinary image picker](assets/art.gif) 2 | 3 | [![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-) 4 | 5 | 6 | This package helps you upload assets to cloudinary with ease. 7 | 8 | ### Installation 9 | 10 | Add react-native-cloudinary-image-picker to your project by running; 11 | 12 | ``` 13 | npm install react-native-cloudinary-image-picker 14 | ``` 15 | 16 | or 17 | 18 | ``` 19 | yarn add react-native-cloudinary-image-picker 20 | ``` 21 | 22 | ### **One more thing** 23 | 24 | To frontload the installation work, let's also install and configure dependencies used by this project, being **react-native-image-picker** 25 | 26 | run 27 | 28 | ``` 29 | yarn add react-native-image-picker 30 | 31 | # RN >= 0.60 32 | npx pod-install 33 | 34 | # RN < 0.60 35 | react-native link react-native-image-picker 36 | ``` 37 | 38 | for expo applications run; 39 | 40 | ``` 41 | expo install react-native-image-picker 42 | ``` 43 | 44 | and that's it, you're all good to go! 45 | 46 | If you have any issue setting up image picker, please visit the [official docs](https://github.com/react-native-community/react-native-image-picker) for help 47 | 48 | ### Usage 49 | 50 | ``` 51 | /** 52 | * Sample React Native App 53 | * https://github.com/facebook/react-native 54 | * 55 | * @format 56 | * @flow 57 | */ 58 | 59 | import React from 'react'; 60 | import {SafeAreaView} from 'react-native'; 61 | 62 | import {UnsignedUpload} from ' react-native-cloudinary-image-picker'; 63 | 64 | function App() { 65 | return ( 66 | 67 | 78 | } 79 | onUploadingStart={e => console.log(e)} 80 | onSuccess={e => console.log(e)} 81 | onError={e => console.log(e)} 82 | /> 83 | 84 | ); 85 | } 86 | 87 | export default App; 88 | 89 | ``` 90 | 91 | 92 | 93 | ## API's 94 | 95 | #### all react-native-cloudinary-image-picker API 96 | 97 | | Name | Use/Description | Extra | Type 98 | | -------------------------- | ------------------------------------------- | -----------------------------------------------------------------|----------------------- 99 | | `CLOUDINARY_URL` | CLOUDINARY Base URL to upload asset. | `https://api.cloudinary.com/v1_1//image/upload` | String 100 | | `CLOUDINARY_CLOUD_NAME` | CLOUDINARY cloud name | `` | String 101 | | `CLOUDINARY_UPLOAD_PRESET` | CLOUDINARY upload preset | `` | String 102 | | `CLOUDINARY_FOLDER` | CLOUDINARY folder name | `` | String 103 | | `renderComponent` | React Element | `` | React Element 104 | | `buttonStyle` | default button style | `{ backgroundColor: "red", width: 100 }` | Object 105 | | `onUploadingStart` | callback function when upload starts | `(e) => alert(e)` | Function 106 | | `onError` | callback function when error occurs | `(e) => alert(e)` | Function 107 | | `onSuccess` | callback function when upload is successful | `(e) => alert(e)` | Function 108 | 109 | 110 | 111 | ## Useful Resources 112 | 113 | - [React Native : How to upload an image to Cloudinary.](https://medium.com/react-native-nigeria/react-native-how-to-upload-an-image-to-cloudinary-da3693f0ae61) by [Godswill Okokon](https://twitter.com/Godswillokokon) 114 | 115 | ## Contributions 116 | 117 | What to help make this package even more awesome? [Read how to contribute](https://github.com/react-native-nigeria-community/react-native-cloudinary-image-picker/blob/master/contribution.md) 118 | 119 | ## Licensing 120 | 121 | This project is licensed under MIT license. 122 | 123 | 124 | 125 | ### 126 | 127 | ## Contributors ✨ 128 | 129 | Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)): 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 |

OGcodes
💻 📖
Oluwatobi Shokunbi
💻 📖
140 | 141 | 142 | 143 | 144 | 145 | This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-hacker -------------------------------------------------------------------------------- /assets/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-native-nigeria-community/react-native-cloudinary-image-picker/5ca7b8700d613ed7f64911224e66f3f1be3e2566/assets/.DS_Store -------------------------------------------------------------------------------- /assets/art.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-native-nigeria-community/react-native-cloudinary-image-picker/5ca7b8700d613ed7f64911224e66f3f1be3e2566/assets/art.gif -------------------------------------------------------------------------------- /assets/art.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-native-nigeria-community/react-native-cloudinary-image-picker/5ca7b8700d613ed7f64911224e66f3f1be3e2566/assets/art.png -------------------------------------------------------------------------------- /contribution.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-native-nigeria-community/react-native-cloudinary-image-picker/5ca7b8700d613ed7f64911224e66f3f1be3e2566/contribution.md -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import Unsigned from "./src/unsigned"; 2 | 3 | const UnsignedUpload = Unsigned; 4 | 5 | export { UnsignedUpload }; 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-cloudinary-image-picker", 3 | "version": "0.0.2", 4 | "description": "This package helps you upload assets to cloudinary with ease.", 5 | "main": "index.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/react-native-nigeria-community/react-native-cloudinary-image-picker.git" 9 | }, 10 | "keywords": [ 11 | "react native cloudinary image picker, react native, expo, assets, image " 12 | ], 13 | "author": "React Native Nigeria (https://github.com/react-native-nigeria-community/)", 14 | "license": "MIT", 15 | "bugs": { 16 | "url": "https://github.com/react-native-nigeria-community/react-native-cloudinary-image-picker/issues" 17 | }, 18 | "homepage": "https://github.com/react-native-nigeria-community/react-native-cloudinary-image-picker#readme" 19 | } 20 | -------------------------------------------------------------------------------- /src/unsigned.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { TouchableOpacity, Alert } from "react-native"; 3 | import { launchCamera, launchImageLibrary} from "react-native-image-picker"; 4 | 5 | const Unsigned = (props) => { 6 | const { 7 | // keys 8 | CLOUDINARY_URL, 9 | CLOUDINARY_CLOUD_NAME, 10 | CLOUDINARY_UPLOAD_PRESET, 11 | CLOUDINARY_FOLDER, 12 | // styles 13 | buttonStyle, 14 | // callbacks 15 | onUploadingStart, 16 | onSuccess, 17 | onError, 18 | //render 19 | renderComponent, 20 | // data props 21 | fileName, 22 | } = props; 23 | function handleResponse(response) { 24 | console.log(response); 25 | if (response.assets[0]) { 26 | const source = { 27 | uri: response.assets[0].uri ?? "", 28 | type: response.assets[0].type ?? "", 29 | name: `${fileName}.${response.assets[0].uri}`, 30 | }; 31 | cloudinaryUpload(source); 32 | } 33 | 34 | } 35 | 36 | function launchCameraAction() { 37 | launchCamera( 38 | { 39 | saveToPhotos: true, 40 | mediaType: "photo", 41 | includeBase64: false, 42 | }, 43 | (response) => { 44 | if (!response.didCancel) { 45 | handleResponse(response) 46 | 47 | } 48 | } 49 | ); 50 | } 51 | function launchPhotoLibraryAction() { 52 | launchImageLibrary( 53 | { 54 | maxHeight: 700, 55 | maxWidth: 700, 56 | selectionLimit: 1, 57 | mediaType: "photo", 58 | includeBase64: false, 59 | }, 60 | (response) => { 61 | if (!response.didCancel) { 62 | handleResponse(response) 63 | } 64 | } 65 | ); 66 | } 67 | function takePhotoOptions() { 68 | Alert.alert( 69 | // This is title 70 | "Take or upload a selfie", 71 | // This is body text 72 | "Please make as selection", 73 | [ 74 | { text: "Take Photo", onPress: () => launchCameraAction() }, 75 | { text: "Select Photo", onPress: () => launchPhotoLibraryAction() }, 76 | { text: "Cancel" }, 77 | ], 78 | { cancelable: true } 79 | // on clicking out side, Alert will not dismiss 80 | ); 81 | } 82 | 83 | const selectPhotoTapped = () => { 84 | takePhotoOptions() 85 | }; 86 | const cloudinaryUpload = (photo) => { 87 | onUploadingStart("uploading"); 88 | const data = new FormData(); 89 | data.append("file", photo); 90 | data.append("upload_preset", CLOUDINARY_UPLOAD_PRESET); 91 | data.append("cloud_name", CLOUDINARY_CLOUD_NAME); 92 | data.append("folder", CLOUDINARY_FOLDER); 93 | fetch(CLOUDINARY_URL, { 94 | method: "post", 95 | headers: { 96 | Accept: 'application/json', 97 | 'Content-Type': 'application/json' 98 | }, 99 | body: data, 100 | }) 101 | .then((res) => res.json()) 102 | .then((data) => { 103 | onSuccess(data); 104 | }) 105 | .catch((err) => { 106 | console.log(err); 107 | onError(err); 108 | }); 109 | }; 110 | 111 | return ( 112 | <> 113 | 114 | {renderComponent} 115 | 116 | 117 | ); 118 | }; 119 | 120 | export default Unsigned; 121 | 122 | Unsigned.defaultProps = { 123 | defaultButton: true, 124 | onError: (e) => alert(e), 125 | onSuccess: (e) => alert(e), 126 | onUploadingStart: (e) => alert(e), 127 | buttonStyle: { backgroundColor: 'transparent' }, 128 | fileName: "image", 129 | }; 130 | -------------------------------------------------------------------------------- /yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | --------------------------------------------------------------------------------