React Native Document Picker || Upload Images, Pdf in React Native Application

Поделиться
HTML-код
  • Опубликовано: 29 сен 2024
  • React Native Document Picker || Upload Images, Pdf in React Native Application
    In this video, we will see how can we upload files through our React Native application. We will add functionality to upload images, pdf, docs, excel sheets, etc.
    Source Code: github.com/off...
    For any help or doubts, you can contact me on Instagram or Telegram: sgcodes.co.in/
    ===============================
    Latest Videos
    ===============================
    React Native Calendar:
    • React Native Calendar ...
    React Native Login-Signup UI:
    • React Native Login & S...
    React Native Image Carousel:
    • Image Carousel in Reac...
    React Loaders:
    • React Loading Spinners...
    Custom React Native Dropdown:
    • Custom Select Dropdown...
    Uber Interview Process:
    • How he cracked Uber wh...
    React Native Weather App:
    • Weather App in React N...
    React Native Movie App:
    • React Native Movie App...
    React Native Telegram UI Clone:
    • Telegram Clone UI usin...
    ===============================
    Popular Playlists:
    ===============================
    React Native Projects:
    • React Native Projects
    React Native Tutorial:
    • React Native Tutorial
    React Navigation:
    • React Navigation
    React Native Custom Components:
    • React Native Custom Co...
    React Placement Ready:
    • React Placement Ready
    React Native Crash Course in Hindi:
    • React Native Crash Cou...
    React Custom Components:
    • ReactJs Custom Components
    ===============================
    Popular Videos:
    ===============================
    Get Ready for frontend Developer Interviews:
    • React Placement Ready ...
    React Native Calculator:
    • Light & Dark Theme Cal...
    React Native Video Player:
    • React Native Video Pla...
    React Native Linear Gradient:
    • React Native Linear Gr...
    ===============================
    React Placement Ready:
    ===============================
    Part-I Basic React:
    • React Placement Ready ...
    Part-II Virtual DOM & DOM:
    • React Placement Ready ...
    Part-III JSX:
    • React Placement Ready ...
    Part-IV Lifecycle methods:
    • React Placement Ready ...
    Part-V(a) React hooks:
    • React Placement Ready ...
    Part-V(b) React Hooks:
    • React Placement Ready ...
    Part-VI React Components:
    • React Placement Ready ...
    Part-VII State & Props in React:
    • React Placement Ready ...
    Part-VIII React Context API:
    • React Placement Ready ...
    Part-IX Redux:
    • React Placement Ready ...
    Part-X React Router:
    • React Placement Ready ...
    Part-XI Miscellaneous:
    • React Placement Ready ...
    ===============================
    React Native Crash Course in Hindi:
    ===============================
    The Basics of React Native:
    • The Basics of React Na...
    User Profile in React Native:
    • User Profile in React ...
    Form Validation in React Native Part-I:
    • Form Validation in Rea...
    Form Validation in React Native Part-II:
    • Form Validation in Rea...
    TODO App in React Native:
    • TODO App in React Nati...
    COVID Vaccination Slot finding App:
    • COVID Vaccination Slot...
    ===============================
    How to Crack Placements & Interviews:
    ===============================
    Get your Dream Job via Cold Calling:
    • Get your dream job via...
    Get into FAANG via Referral:
    • How to get into FAANG ...
    Uber Interview Process:
    • How he cracked Uber wh...
    ✨ Tags ✨
    react native document picker upload file,react native tutorial,react native document picker,react native document picker example,react native document picker tutorial,react native document picker github,document picker in react native,image upload in react native,profile image upload in react native,react,react native,upload picture react native,document picker react native,document picker react native example,react native tutorial for beginners

Комментарии • 63

  • @umairali2360
    @umairali2360 11 месяцев назад +1

    how to pass selected file in post api, please guide

  • @lajun.j
    @lajun.j Месяц назад

  • @harshdeep7015
    @harshdeep7015 Год назад +2

    Bro please make a video on how can I render any component from other .js file to current .js file on current.js file's button click?? Means reusable component banana lekin usko tab hi display karna jab jis screen pe usi screen ke button ke press hone pe display karana??
    Kahi bhi ye video nahi mil raha hai bahut confusion ho raha hai please make a video... Btw great video👍

    • @officialsgcodes
      @officialsgcodes  Год назад

      Video already ban chuki h, next series m publish ho jayegi February m 😊

    • @harshdeep7015
      @harshdeep7015 Год назад +2

      @@officialsgcodes ok jaldi bro, for example modal kaise show karte hai, beautiful ui view ya card ko other.js file se app.js me kaise display karenge app.js ke data ko other.js ke ui me fit karke app.js me render kaise karenge ye hona chahiye jaroor👍

    • @officialsgcodes
      @officialsgcodes  Год назад

      Modal p 2 videos already bana chuka hoon, todo app wali and a detailed tutorial as well. You check that in the meanwhile.
      Todo App: ruclips.net/video/abgMRgo5Jw0/видео.html
      Modal Tutorial: ruclips.net/video/NNBS3m7H9QI/видео.html

  • @pratikpashine9054
    @pratikpashine9054 Год назад +1

    HOW TO GET ABSOLUTE PATH OF A FILE from uri content://

    • @officialsgcodes
      @officialsgcodes  Год назад

      If you have the uri, then you can simply do uri.getPath() first. This will give you the path uri and then split it on :
      After splitting you will get the exact path.

    • @venkkateshmg4850
      @venkkateshmg4850 Год назад

      How to split you have mentioned to split it could you please explain

  • @satyak1337
    @satyak1337 Год назад +1

    Please make to upload image picker files to Firebase. This is typical use case for image picker where user logged in user will upload their images to backend(firebase).

  • @KamranKhanmammadov-p7s
    @KamranKhanmammadov-p7s Год назад

    canivi yetim yetim iwledi

  • @rsfunlimitless4244
    @rsfunlimitless4244 Год назад +1

    Thank you sir It is very helpful video

  • @samarsan4944
    @samarsan4944 Год назад +1

    Acha zra ye bataiye School Management system ki website maine bnai h to kya uska app bhi bna sakte h yem isliye pooch rha aki isme fronted to hota ni ??

    • @officialsgcodes
      @officialsgcodes  Год назад

      Haan bana sakte ho. Jo bhi operations aapne website p diye h, unn sabko app par de sakte h

    • @samarsan4944
      @samarsan4944 Год назад

      @@officialsgcodes acha isme website ka dashboard wale code react native m convert ho jyga ??

    • @officialsgcodes
      @officialsgcodes  Год назад

      Convert nhi hoga. Aapko doobara likhna padega, but kuch methods reuse kar sakte ho ReactJs k

  • @ManishKumar-vx2xe
    @ManishKumar-vx2xe Год назад +1

    thank you for awesome video👍👍

  • @chinmaymoharana6562
    @chinmaymoharana6562 Год назад

    How to restrict the Google drive files from being uploading

  • @rajpootyadav8359
    @rajpootyadav8359 9 месяцев назад

    If I'm previewing the image or pdf then we selecting the image or pdf so app is crashing.
    It happens only when first time selection after installation of app.

  • @projectassignment-e7f
    @projectassignment-e7f 9 месяцев назад

    hi bro can you make a video on how to upload images and document to google drive using react native android and store the image link to database

  • @satyak1337
    @satyak1337 Год назад +1

    Thank you. Short and on point video. No crazy complex project or unnecessary code in the example. 👍

  • @karansingh-nj7rs
    @karansingh-nj7rs Год назад +1

    Good Video sir- could you give me idea how to send this selected image in post API, I mean what type of parameters we need to send while sending uploading image in post api

    • @officialsgcodes
      @officialsgcodes  Год назад +1

      You can send the entire array to the API request and then store the image/pdf to your server. You can use formdata for this purpose.

    • @karansingh-nj7rs
      @karansingh-nj7rs Год назад

      @@officialsgcodes sir i mean for storing image do we need to send type along with image url?

    • @officialsgcodes
      @officialsgcodes  Год назад

      No, that's not needed

  • @abhijeetpatil932
    @abhijeetpatil932 11 месяцев назад

    content uri ko file uri may kaise convert karu,

  • @rivalheriyan1327
    @rivalheriyan1327 Год назад +1

    Nice sir thanks

  • @mrklenton6897
    @mrklenton6897 10 месяцев назад

    thank for this video.

  • @mehransoulmusic8666
    @mehransoulmusic8666 Год назад

    agr an atteched files ko hum chate ma bajna chaty ho. to kasay karay.

  • @khinzaw8065
    @khinzaw8065 10 месяцев назад

    thank u so much

  • @Zero-qc5nu
    @Zero-qc5nu Год назад

    I have question while uploading image and file using document picker using form data i got a network error sometimes and sometimes I am not getting this error in Android itz working fine in ios

    • @officialsgcodes
      @officialsgcodes  Год назад

      Network error comes because of missing header content-type.
      Please add that header, you won't get network error again.

  • @diegosolliveira
    @diegosolliveira Год назад

    I made all this and the button isn't showing anything when I press

  • @CitroMake
    @CitroMake Год назад

    every time i try to use pick function it give me an error

  • @sumitsolapurkar5545
    @sumitsolapurkar5545 Год назад

    Hello Sir , Can u please make a another video in react-native expo with allTypes of files upload.

  • @umeshtandon459
    @umeshtandon459 Год назад

    TypeError: null is not an object (evaluating 'RNDocumentPicker.pick') ye error aa rha hai sir

    • @officialsgcodes
      @officialsgcodes  Год назад +1

      Check the import statement, seems like import is wrong

    • @suganya8270
      @suganya8270 Год назад

      Hi i also getting the same error please help me to fix it,i checked import

    • @rohitbera6178
      @rohitbera6178 Год назад

      i was facing the same issue as i was using expo , but solved when used expo-document-picker

  • @MagalakshmiD-p3f
    @MagalakshmiD-p3f Год назад

    Thankyou for your clear explaination.

  • @hassanhassouna1066
    @hassanhassouna1066 Год назад

    Thanks Sir! I'm facing a problem the pick is always null, did you face anything like that before?

    • @officialsgcodes
      @officialsgcodes  Год назад

      I haven't faced anything like this before.

    • @ayy4703
      @ayy4703 11 месяцев назад

      Same and i use expo, did you solve it :/