{"id":2374,"date":"2022-12-01T01:45:45","date_gmt":"2022-11-30T18:45:45","guid":{"rendered":"https:\/\/www.bagi2info.com\/?p=2374"},"modified":"2023-01-04T11:53:51","modified_gmt":"2023-01-04T04:53:51","slug":"cara-upload-file-image-menggunakan-form-data-react-native-expo","status":"publish","type":"post","link":"https:\/\/www.bagi2info.com\/en\/how-to-upload-files-images-using-the-react-native-expo-data-form\/","title":{"rendered":"How to Upload Files\/Images Using the React Native Expo Data Form"},"content":{"rendered":"\r\n<figure class=\"wp-block-image size-full is-style-default\"><a href=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/12\/upload.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"618\" height=\"273\" src=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/12\/upload.jpg\" alt=\"upload file \/ gambar\" class=\"wp-image-3273\" srcset=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/12\/upload.jpg 618w, https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/12\/upload-300x133.jpg 300w\" sizes=\"auto, (max-width: 618px) 100vw, 618px\" \/><\/a><\/figure>\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Hello friends, back to the react native tutorial, sometimes we want to add a file or image upload function to our application, here is the source code for uploading files\/images using form data in react native Expo. <\/p>\r\n\r\n\r\n\r\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.bagi2info.com\/en\/how-to-upload-files-images-using-the-react-native-expo-data-form\/#Appjs\" >App.js<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.bagi2info.com\/en\/how-to-upload-files-images-using-the-react-native-expo-data-form\/#Uploadphp\" >Upload.php<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Appjs\"><\/span>App.js<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n<pre title=\"App.js\" class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx line-numbers\">import React, { useState } from 'react';\r\nimport {\r\n  View,\r\n  StyleSheet,\r\n  Alert,\r\n  PermissionsAndroid,\r\n  Text,\r\n  TouchableOpacity,\r\n} from 'react-native';\r\n\r\nimport * as DocumentPicker from 'expo-document-picker';\r\n\r\nexport default function App() {\r\n  const [singleFile, setSingleFile] = useState(null);\r\n\r\n  const checkPermissions = async () => {\r\n    try {\r\n      const result = await PermissionsAndroid.check(\r\n        PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE\r\n      );\r\n\r\n      if (!result) {\r\n        const granted = await PermissionsAndroid.request(\r\n          PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,\r\n          {\r\n            title:\r\n              'You need to give storage permission to download and save the file',\r\n            message: 'App needs access to your camera ',\r\n            buttonNeutral: 'Ask Me Later',\r\n            buttonNegative: 'Cancel',\r\n            buttonPositive: 'OK',\r\n          }\r\n        );\r\n        if (granted === PermissionsAndroid.RESULTS.GRANTED) {\r\n          console.log('You can use the camera');\r\n          return true;\r\n        } else {\r\n          Alert.alert('Error', I18n.t('PERMISSION_ACCESS_FILE'));\r\n\r\n          console.log('Camera permission denied');\r\n          return false;\r\n        }\r\n      } else {\r\n        return true;\r\n      }\r\n    } catch (err) {\r\n      console.warn(err);\r\n      return false;\r\n    }\r\n  };\r\n\r\n  const uploadImage = async () => {\r\n    const BASE_URL = 'xxxx';\r\n\r\n    \/\/ Check if any file is selected or not\r\n    if (singleFile != null) {\r\n      \/\/ If file selected then create FormData\r\n      const data = new FormData();\r\n\r\n      data.append('file_attachment', {\r\n        uri: singleFile.uri,\r\n        name: singleFile.name,\r\n        type: singleFile.mimeType,\r\n      });\r\n\r\n      \/\/ return\r\n      try {\r\n        let res = await fetch(BASE_URL + 'tutorial\/upload.php', {\r\n          method: 'post',\r\n          body: data,\r\n          headers: {\r\n            Accept: 'application\/json',\r\n            'Content-Type': 'multipart\/form-data',\r\n          },\r\n          timeout: 5000,\r\n        });\r\n\r\n        let result = await res.json();\r\n        console.log('result', result);\r\n        if (result.status == 1) {\r\n          Alert.alert('Info', result.msg);\r\n        }\r\n      } catch (error) {\r\n        \/\/ Error retrieving data\r\n        \/\/ Alert.alert('Error', error.message);\r\n        console.log('error upload', error);\r\n      }\r\n    } else {\r\n      \/\/ If no file selected the show alert\r\n      Alert.alert('Please Select File first');\r\n    }\r\n  };\r\n\r\n  async function selectFile() {\r\n    try {\r\n      const result = await checkPermissions();\r\n\r\n      if (result) {\r\n        const result = await DocumentPicker.getDocumentAsync({\r\n          copyToCacheDirectory: false,\r\n          type: 'image\/*',\r\n        });\r\n\r\n        if (result.type === 'success') {\r\n          \/\/ Printing the log realted to the file\r\n          console.log('res : ' + JSON.stringify(result));\r\n          \/\/ Setting the state to show single file attributes\r\n          setSingleFile(result);\r\n        }\r\n      }\r\n    } catch (err) {\r\n      setSingleFile(null);\r\n      console.warn(err);\r\n      return false;\r\n    }\r\n  }\r\n\r\n  return (\r\n    &lt;View style={styles.mainBody}>\r\n      &lt;View style={{ alignItems: 'center' }}>\r\n        &lt;Text\r\n          style={{\r\n            fontSize: 30,\r\n            textAlign: 'center',\r\n            marginTop: 20,\r\n            marginBottom: 30,\r\n          }}>\r\n          React Native File Upload Example\r\n        &lt;\/Text>\r\n      &lt;\/View>\r\n      {\/*Showing the data of selected Single file*\/}\r\n      {singleFile != null ? (\r\n        &lt;Text style={styles.textStyle}>\r\n          File Name: {singleFile.name ? singleFile.name : ''}\r\n          {'\\n'}\r\n          Type: {singleFile.type ? singleFile.type : ''}\r\n          {'\\n'}\r\n          File Size: {singleFile.size ? singleFile.size : ''}\r\n          {'\\n'}\r\n          URI: {singleFile.uri ? singleFile.uri : ''}\r\n          {'\\n'}\r\n        &lt;\/Text>\r\n      ) : null}\r\n\r\n      &lt;TouchableOpacity\r\n        style={styles.buttonStyle}\r\n        activeOpacity={0.5}\r\n        onPress={selectFile}>\r\n        &lt;Text style={styles.buttonTextStyle}>Select File&lt;\/Text>\r\n      &lt;\/TouchableOpacity>\r\n\r\n      &lt;TouchableOpacity\r\n        style={styles.buttonStyle}\r\n        activeOpacity={0.5}\r\n        onPress={uploadImage}>\r\n        &lt;Text style={styles.buttonTextStyle}>Upload File&lt;\/Text>\r\n      &lt;\/TouchableOpacity>\r\n    &lt;\/View>\r\n  );\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n  mainBody: {\r\n    flex: 1,\r\n    justifyContent: 'center',\r\n    padding: 20,\r\n  },\r\n  buttonStyle: {\r\n    backgroundColor: '#307ecc',\r\n    borderWidth: 0,\r\n    color: '#FFFFFF',\r\n    borderColor: '#307ecc',\r\n    height: 40,\r\n    alignItems: 'center',\r\n    borderRadius: 30,\r\n    marginLeft: 35,\r\n    marginRight: 35,\r\n    marginTop: 15,\r\n  },\r\n  buttonTextStyle: {\r\n    color: '#FFFFFF',\r\n    paddingVertical: 10,\r\n    fontSize: 16,\r\n  },\r\n  textStyle: {\r\n    backgroundColor: '#fff',\r\n    fontSize: 15,\r\n    marginTop: 16,\r\n    marginLeft: 35,\r\n    marginRight: 35,\r\n    textAlign: 'center',\r\n  },\r\n});\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\"><\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Uploadphp\"><\/span>Upload.php<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">The following API backend files use PHP to copy files from React Native form submissions<\/p>\r\n\r\n\r\n\r\n<pre title=\"tutorial\/upload.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php line-numbers\">&lt;?php\r\nif (!empty($_FILES['file_attachment']['name'])) {\r\n\r\n    $target_dir = \"photos\/\";\r\n\r\n    if (!file_exists($target_dir)) {\r\n        mkdir($target_dir, 0755);\r\n    }\r\n\r\n    $target_file =\r\n        $target_dir . basename($_FILES[\"file_attachment\"][\"name\"]);\r\n    $imageFileType =\r\n        strtolower(pathinfo($target_file, PATHINFO_EXTENSION));\r\n\r\n    \/\/ Check if file already exists\r\n    if (file_exists($target_file)) {\r\n        echo json_encode(\r\n            array(\r\n                \"status\" => 0,\r\n                \"data\" => array(), \"msg\" => \"Sorry, file already exists.\"\r\n            )\r\n        );\r\n        die();\r\n    }\r\n\r\n    \/\/ Check file size\r\n    if ($_FILES[\"file_attachment\"][\"size\"] > 5000000) {\r\n        echo json_encode(\r\n            array(\r\n                \"status\" => 0,\r\n                \"data\" => array(),\r\n                \"msg\" => \"Sorry, your file is too large.\"\r\n            )\r\n        );\r\n        die();\r\n    }\r\n\r\n    if (\r\n        move_uploaded_file(\r\n            $_FILES[\"file_attachment\"][\"tmp_name\"],\r\n            $target_file\r\n        )\r\n    ) {\r\n\r\n        echo json_encode(\r\n            array(\r\n                \"status\" => 1,\r\n                \"data\" => array(),\r\n                \"msg\" => \"The file \" .\r\n                    basename($_FILES[\"file_attachment\"][\"name\"]) .\r\n                    \" has been uploaded.\",\r\n                \"filename\" => $filename\r\n            )\r\n        );\r\n    } else {\r\n        echo json_encode(\r\n            array(\r\n                \"status\" => 0,\r\n                \"data\" => array(),\r\n                \"msg\" => \"Sorry, there was an error uploading your file.\"\r\n            )\r\n        );\r\n    }\r\n}\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Snack: <\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/ckk.ai\/upload-file\">https:\/\/ckk.ai\/upload-file<\/a><\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Referensi: <\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/aboutreact.com\/file-uploading-in-react-native\/\">https:\/\/aboutreact.com\/file-uploading-in-react-native\/<\/a><\/p>\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Changes: Modified coding using <strong>Expo<\/strong>, added check permissions for android, and replaced the image capture library using <strong>expo-document-picker<\/strong><\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\"><\/p>\r\n","protected":false},"excerpt":{"rendered":"<p>Hello friends, back to the react native tutorial, sometimes we want to add a file or image upload function to our application, here is the source code for uploading files\/images using form data in&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":3273,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[173],"tags":[79,62,150,145],"class_list":["post-2374","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-native","tag-android","tag-php","tag-react-native","tag-source-code"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 4.9.10 - aioseo.com -->\n\t<meta name=\"description\" content=\"Cara Upload File\/Image Menggunakan Form Data React Native Expo, terdapat check permission untuk android, library pengambilan gambar expo-document-picker\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"webmaster\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.bagi2info.com\/en\/how-to-upload-files-images-using-the-react-native-expo-data-form\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 4.9.10\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Bagi2info.com - Tips dan Trik Komputer, Tutorial Pemrograman, SQL, PHP, React Native - Expo\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"How to Upload Files\/Images Using the React Native Expo Data Form\" \/>\n\t\t<meta property=\"og:description\" content=\"Cara Upload File\/Image Menggunakan Form Data React Native Expo, terdapat check permission untuk android, library pengambilan gambar expo-document-picker\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.bagi2info.com\/en\/how-to-upload-files-images-using-the-react-native-expo-data-form\/\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/www.bagi2info.com\/wp-content\/uploads\/2017\/10\/coollogo_com-12072770.png?fit=28164&#038;ssl=1\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/i0.wp.com\/www.bagi2info.com\/wp-content\/uploads\/2017\/10\/coollogo_com-12072770.png?fit=28164&#038;ssl=1\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2022-11-30T18:45:45+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2023-01-04T04:53:51+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:site\" content=\"@bagi2infocom\" \/>\n\t\t<meta name=\"twitter:title\" content=\"How to Upload Files\/Images Using the React Native Expo Data Form\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Cara Upload File\/Image Menggunakan Form Data React Native Expo, terdapat check permission untuk android, library pengambilan gambar expo-document-picker\" \/>\n\t\t<meta name=\"twitter:creator\" content=\"@bagi2infocom\" \/>\n\t\t<meta name=\"twitter:image\" content=\"https:\/\/i0.wp.com\/www.bagi2info.com\/wp-content\/uploads\/2017\/10\/coollogo_com-12072770.png?fit=28164&amp;ssl=1\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"BlogPosting\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/how-to-upload-files-images-using-the-react-native-expo-data-form\\\/#blogposting\",\"name\":\"How to Upload Files\\\/Images Using the React Native Expo Data Form\",\"headline\":\"How to Upload Files\\\/Images Using the React Native Expo Data Form\",\"author\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/author\\\/admin\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/#person\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/www.bagi2info.com\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/upload.jpg\",\"width\":618,\"height\":273,\"caption\":\"upload file \\\/ gambar\"},\"datePublished\":\"2022-12-01T01:45:45+07:00\",\"dateModified\":\"2023-01-04T11:53:51+07:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/how-to-upload-files-images-using-the-react-native-expo-data-form\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/how-to-upload-files-images-using-the-react-native-expo-data-form\\\/#webpage\"},\"articleSection\":\"React Native, android, php, react native, source code\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/how-to-upload-files-images-using-the-react-native-expo-data-form\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/category\\\/react-native\\\/#listItem\",\"name\":\"React Native\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/category\\\/react-native\\\/#listItem\",\"position\":2,\"name\":\"React Native\",\"item\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/category\\\/react-native\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/how-to-upload-files-images-using-the-react-native-expo-data-form\\\/#listItem\",\"name\":\"How to Upload Files\\\/Images Using the React Native Expo Data Form\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/how-to-upload-files-images-using-the-react-native-expo-data-form\\\/#listItem\",\"position\":3,\"name\":\"How to Upload Files\\\/Images Using the React Native Expo Data Form\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/category\\\/react-native\\\/#listItem\",\"name\":\"React Native\"}}]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/#person\",\"name\":\"webmaster\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/how-to-upload-files-images-using-the-react-native-expo-data-form\\\/#personImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/38da1efad6745212e2c3b76c8d8e72f69844b6451e55a9c219cdb2bb8b8901ef?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"webmaster\"},\"sameAs\":[\"https:\\\/\\\/twitter.com\\\/bagi2infocom\",\"https:\\\/\\\/www.instagram.com\\\/bagi2infocom\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/author\\\/admin\\\/#author\",\"url\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/author\\\/admin\\\/\",\"name\":\"webmaster\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/how-to-upload-files-images-using-the-react-native-expo-data-form\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/38da1efad6745212e2c3b76c8d8e72f69844b6451e55a9c219cdb2bb8b8901ef?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"webmaster\"},\"sameAs\":[\"https:\\\/\\\/twitter.com\\\/bagi2infocom\",\"https:\\\/\\\/www.instagram.com\\\/bagi2infocom\"]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/how-to-upload-files-images-using-the-react-native-expo-data-form\\\/#webpage\",\"url\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/how-to-upload-files-images-using-the-react-native-expo-data-form\\\/\",\"name\":\"How to Upload Files\\\/Images Using the React Native Expo Data Form\",\"description\":\"Cara Upload File\\\/Image Menggunakan Form Data React Native Expo, terdapat check permission untuk android, library pengambilan gambar expo-document-picker\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/how-to-upload-files-images-using-the-react-native-expo-data-form\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/author\\\/admin\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/author\\\/admin\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/www.bagi2info.com\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/upload.jpg\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/how-to-upload-files-images-using-the-react-native-expo-data-form\\\/#mainImage\",\"width\":618,\"height\":273,\"caption\":\"upload file \\\/ gambar\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/how-to-upload-files-images-using-the-react-native-expo-data-form\\\/#mainImage\"},\"datePublished\":\"2022-12-01T01:45:45+07:00\",\"dateModified\":\"2023-01-04T11:53:51+07:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/\",\"name\":\"Bagi2info.com\",\"description\":\"Tips dan Trik Komputer, Tutorial Pemrograman, SQL, PHP, React Native - Expo\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/#person\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"How to Upload Files\/Images Using the React Native Expo Data Form","description":"Cara Upload File\/Image Menggunakan Form Data React Native Expo, terdapat check permission untuk android, library pengambilan gambar expo-document-picker","canonical_url":"https:\/\/www.bagi2info.com\/en\/how-to-upload-files-images-using-the-react-native-expo-data-form\/","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BlogPosting","@id":"https:\/\/www.bagi2info.com\/en\/how-to-upload-files-images-using-the-react-native-expo-data-form\/#blogposting","name":"How to Upload Files\/Images Using the React Native Expo Data Form","headline":"How to Upload Files\/Images Using the React Native Expo Data Form","author":{"@id":"https:\/\/www.bagi2info.com\/en\/author\/admin\/#author"},"publisher":{"@id":"https:\/\/www.bagi2info.com\/en\/#person"},"image":{"@type":"ImageObject","url":"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/12\/upload.jpg","width":618,"height":273,"caption":"upload file \/ gambar"},"datePublished":"2022-12-01T01:45:45+07:00","dateModified":"2023-01-04T11:53:51+07:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/www.bagi2info.com\/en\/how-to-upload-files-images-using-the-react-native-expo-data-form\/#webpage"},"isPartOf":{"@id":"https:\/\/www.bagi2info.com\/en\/how-to-upload-files-images-using-the-react-native-expo-data-form\/#webpage"},"articleSection":"React Native, android, php, react native, source code"},{"@type":"BreadcrumbList","@id":"https:\/\/www.bagi2info.com\/en\/how-to-upload-files-images-using-the-react-native-expo-data-form\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.bagi2info.com\/en\/#listItem","position":1,"name":"Home","item":"https:\/\/www.bagi2info.com\/en\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.bagi2info.com\/en\/category\/react-native\/#listItem","name":"React Native"}},{"@type":"ListItem","@id":"https:\/\/www.bagi2info.com\/en\/category\/react-native\/#listItem","position":2,"name":"React Native","item":"https:\/\/www.bagi2info.com\/en\/category\/react-native\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.bagi2info.com\/en\/how-to-upload-files-images-using-the-react-native-expo-data-form\/#listItem","name":"How to Upload Files\/Images Using the React Native Expo Data Form"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.bagi2info.com\/en\/#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/www.bagi2info.com\/en\/how-to-upload-files-images-using-the-react-native-expo-data-form\/#listItem","position":3,"name":"How to Upload Files\/Images Using the React Native Expo Data Form","previousItem":{"@type":"ListItem","@id":"https:\/\/www.bagi2info.com\/en\/category\/react-native\/#listItem","name":"React Native"}}]},{"@type":"Person","@id":"https:\/\/www.bagi2info.com\/en\/#person","name":"webmaster","image":{"@type":"ImageObject","@id":"https:\/\/www.bagi2info.com\/en\/how-to-upload-files-images-using-the-react-native-expo-data-form\/#personImage","url":"https:\/\/secure.gravatar.com\/avatar\/38da1efad6745212e2c3b76c8d8e72f69844b6451e55a9c219cdb2bb8b8901ef?s=96&d=mm&r=g","width":96,"height":96,"caption":"webmaster"},"sameAs":["https:\/\/twitter.com\/bagi2infocom","https:\/\/www.instagram.com\/bagi2infocom"]},{"@type":"Person","@id":"https:\/\/www.bagi2info.com\/en\/author\/admin\/#author","url":"https:\/\/www.bagi2info.com\/en\/author\/admin\/","name":"webmaster","image":{"@type":"ImageObject","@id":"https:\/\/www.bagi2info.com\/en\/how-to-upload-files-images-using-the-react-native-expo-data-form\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/38da1efad6745212e2c3b76c8d8e72f69844b6451e55a9c219cdb2bb8b8901ef?s=96&d=mm&r=g","width":96,"height":96,"caption":"webmaster"},"sameAs":["https:\/\/twitter.com\/bagi2infocom","https:\/\/www.instagram.com\/bagi2infocom"]},{"@type":"WebPage","@id":"https:\/\/www.bagi2info.com\/en\/how-to-upload-files-images-using-the-react-native-expo-data-form\/#webpage","url":"https:\/\/www.bagi2info.com\/en\/how-to-upload-files-images-using-the-react-native-expo-data-form\/","name":"How to Upload Files\/Images Using the React Native Expo Data Form","description":"Cara Upload File\/Image Menggunakan Form Data React Native Expo, terdapat check permission untuk android, library pengambilan gambar expo-document-picker","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/www.bagi2info.com\/en\/#website"},"breadcrumb":{"@id":"https:\/\/www.bagi2info.com\/en\/how-to-upload-files-images-using-the-react-native-expo-data-form\/#breadcrumblist"},"author":{"@id":"https:\/\/www.bagi2info.com\/en\/author\/admin\/#author"},"creator":{"@id":"https:\/\/www.bagi2info.com\/en\/author\/admin\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/12\/upload.jpg","@id":"https:\/\/www.bagi2info.com\/en\/how-to-upload-files-images-using-the-react-native-expo-data-form\/#mainImage","width":618,"height":273,"caption":"upload file \/ gambar"},"primaryImageOfPage":{"@id":"https:\/\/www.bagi2info.com\/en\/how-to-upload-files-images-using-the-react-native-expo-data-form\/#mainImage"},"datePublished":"2022-12-01T01:45:45+07:00","dateModified":"2023-01-04T11:53:51+07:00"},{"@type":"WebSite","@id":"https:\/\/www.bagi2info.com\/en\/#website","url":"https:\/\/www.bagi2info.com\/en\/","name":"Bagi2info.com","description":"Tips dan Trik Komputer, Tutorial Pemrograman, SQL, PHP, React Native - Expo","inLanguage":"en-US","publisher":{"@id":"https:\/\/www.bagi2info.com\/en\/#person"}}]},"og:locale":"en_US","og:site_name":"Bagi2info.com - Tips dan Trik Komputer, Tutorial Pemrograman, SQL, PHP, React Native - Expo","og:type":"article","og:title":"How to Upload Files\/Images Using the React Native Expo Data Form","og:description":"Cara Upload File\/Image Menggunakan Form Data React Native Expo, terdapat check permission untuk android, library pengambilan gambar expo-document-picker","og:url":"https:\/\/www.bagi2info.com\/en\/how-to-upload-files-images-using-the-react-native-expo-data-form\/","og:image":"https:\/\/i0.wp.com\/www.bagi2info.com\/wp-content\/uploads\/2017\/10\/coollogo_com-12072770.png?fit=28164&#038;ssl=1","og:image:secure_url":"https:\/\/i0.wp.com\/www.bagi2info.com\/wp-content\/uploads\/2017\/10\/coollogo_com-12072770.png?fit=28164&#038;ssl=1","article:published_time":"2022-11-30T18:45:45+00:00","article:modified_time":"2023-01-04T04:53:51+00:00","twitter:card":"summary","twitter:site":"@bagi2infocom","twitter:title":"How to Upload Files\/Images Using the React Native Expo Data Form","twitter:description":"Cara Upload File\/Image Menggunakan Form Data React Native Expo, terdapat check permission untuk android, library pengambilan gambar expo-document-picker","twitter:creator":"@bagi2infocom","twitter:image":"https:\/\/i0.wp.com\/www.bagi2info.com\/wp-content\/uploads\/2017\/10\/coollogo_com-12072770.png?fit=28164&ssl=1"},"aioseo_meta_data":{"post_id":"2374","title":null,"description":"Cara Upload File\/Image Menggunakan Form Data React Native Expo, terdapat check permission untuk android, library pengambilan gambar expo-document-picker","keywords":[],"keyphrases":{"focus":{"keyphrase":"","score":0,"analysis":{"keyphraseInTitle":{"score":0,"maxScore":9,"error":1}}},"additional":[]},"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":[],"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"BlogPosting","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":null,"frequency":"default","local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":null,"created":"2022-10-18 04:23:07","updated":"2025-06-04 07:59:10","seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.bagi2info.com\/en\/\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.bagi2info.com\/en\/category\/react-native\/\" title=\"React Native\">React Native<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tHow to Upload Files\/Images Using the React Native Expo Data Form\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/www.bagi2info.com\/en\/"},{"label":"React Native","link":"https:\/\/www.bagi2info.com\/en\/category\/react-native\/"},{"label":"How to Upload Files\/Images Using the React Native Expo Data Form","link":"https:\/\/www.bagi2info.com\/en\/how-to-upload-files-images-using-the-react-native-expo-data-form\/"}],"_links":{"self":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts\/2374","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/comments?post=2374"}],"version-history":[{"count":10,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts\/2374\/revisions"}],"predecessor-version":[{"id":3630,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts\/2374\/revisions\/3630"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/media\/3273"}],"wp:attachment":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/media?parent=2374"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/categories?post=2374"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/tags?post=2374"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}