Flutter Tutorial - How To Use File Picker | The Right Way | Android, iOS, Web & Desktop

[@HeyFlutter]

This might help you :) 👉 12 Week Flutter Training from Newbie to Expert: heyflutter.com Source Code: github.com/JohannesMilke/file_picker_example Image Picker From Gallery And Camera Tutorial: kzbin.info/www/bejne/g4TZZGughJl4gM0 PDF Viewer Tutorial: kzbin.info/www/bejne/q5rdi5WAjN-ce8k Video Player Tutorial: kzbin.info/www/bejne/q6uXqYWkepKIf9k Lottie Animations Tutorial: kzbin.info/www/bejne/oaqzmq2em9NroZo Create PDF Document Tutorial: kzbin.info/www/bejne/sJCYqZ6eetCWa7s Audio Player App Tutorial: kzbin.info/www/bejne/Y4KYlGB7a5ienKs Image Tutorial: kzbin.info/www/bejne/gHWnoIFoia2qq8k Images From Assets And Network Tutorial: kzbin.info/www/bejne/d5LGmmqKp7qosLM Image Slider Tutorial: kzbin.info/www/bejne/gHawqWWXrZVqaZY Crop Images Tutorial: kzbin.info/www/bejne/ponFc4eAqZyZqK8 Cache Images Tutorial: kzbin.info/www/bejne/bKjZdWCQYp6NiK8 Zoom Image On Double Tap Tutorial: kzbin.info/www/bejne/amXQgXurprWairc Pinch Zoom Image Tutorial: kzbin.info/www/bejne/h4HLqoewhdaNa7M 3D Flip Card Animation Tutorial: kzbin.info/www/bejne/jl7cl6iBas6ra7c User Profile Tutorial: kzbin.info/www/bejne/jmqYXmWterhkf6s Change App Icon And App Name Tutorial: kzbin.info/www/bejne/m36rk5p_nK-si7M

[@MrZawe]

love this have be waiting for this

[@iamnomana]

Another awesome tutorial from Johannes ❤🙌

[@bang-naim]

Thank you!!! You are indeed the best!

[@HeyFlutter]

You’re most welcome, @putra.m.tampubolon! 🙂

[@sheffomp]

You are so great! I love your videos. Btw You just make Flutter videos on this channel?

[@mohammadshahid9820]

Thank u so much. This one is good. Johannes

[@nikhilkukreja8498]

Thank you so much Johannes ❤️✨

[@sumibafna2882]

"Very very helpful"...It is the best on the internet!!

[@codontv1000]

Thank you for this video and congratulations for your 30k suscribers 👏

[@codontv1000]

@@HeyFlutter ✅👍🏽

[@rakeshgiri6750]

You channel contents are 🔥🔥🔥🔥💯✔

[@marinasteflyuk252]

Vielen, vielen danke!!! Thank you very much!!!! you are my Retter in der Not!!!!

[@marinasteflyuk252]

@@HeyFlutter hey i have a problem with context in the OPENFILES FUTURE. My program do not work becouse the context is not defind. Does it have to do something with the routes?

[@tamoguido6771]

thanks for the video Mr JOHANNES. Please i need to recover these files and list them in my own way

[@HeyFlutter]

Thank You Tamo guido!. Can you please explain your question a little bit? I didn't get it

[@HoangNguyen-dz2vt]

Thank you so much for making videos like this, it helps a lot with my work

[@tuanvungo8883]

anh tải được source code ko ạ

[@HoangNguyen-dz2vt]

@@tuanvungo8883 cái này mình nhìn rồi code theo thôi bạn, code theo cho nhanh nhớ haha, chủ yếu xem hướng làm thôi bạn

[@tuanvungo8883]

bạn cho mình hỏi cái path data/user, mình mở ở đâu ta ?

[@ahmadashraf7701]

Thank you for your efforts

[@HeyFlutter]

You’re most welcome, Ahmad Ashraf! 🙂

[@vinothkumarm9066]

Thanks for the video

[@jrheisler]

Well done!!!

[@gosai.18]

How can i upload image to the firebase on Flutter Web ?

[@HeyFlutter]

Thanks for the idea @gosai.18 😀, i have added it in my list of future videos

[@MdJubayerHossain---kt6sy]

Thanks , Sir I hope understood & help full.

[@creatifyappsstore]

3:20 so what if i want to store my file to another app package folders.. Like I don't want to store my file to same app package folder example:- com.example.file_picker to com.example.another_app not in same package folder

[@creatifyappsstore]

Please reply sir

[@HeyFlutter]

Thank you, @creatifyappsstore! 🙂. Try to provide enough details with your question whenever you face any issue.

[@ВикторЦай-л7я]

Supra thanks!

[@HeyFlutter]

You are welcome, @user-vr9qb5rj4j!

[@sahartalaa9774]

Hello, thank you for your great videos, can I ask a question, when I tried to upload the file that I picked it, it accept the file type but picker have platform file, how I can fix this problem

[@aliakkawi4759]

Hi and thanks for the tutorial, Do we need to explicitly ask the user for photos and videos permission on iOS Platform? the library is not handling this. Thanks

[@HeyFlutter]

Hey, @aliakkawi4759 🙂 It is being handled by the library itself

[@xIvalicex]

Nice explanation, thank you. I do have a question... what if you wanted to have that option as a part of a Form? Say: Title, dueDate and an attachment to send these 3 values to a backend?

[@001Debjeet]

how you have achieved this ? can you please explain

[@xIvalicex]

@@001Debjeet the way I did was for flutter web, I used a different library since dio supported mobile at the moment I wrote the code. The libraries used were: http.dart and file_picker.dart. The method I used does not have the path property since there’s no path property for flutter web. Then I use a multi part method to send all that data to the backend.

[@tamoguido6771]

please you can do one tuto to explain google cast with flutter ?? i want to cast playlist and have a full control on my phone

[@HeyFlutter]

Thanks for the idea, Tamo guido! 🙂 I have added it to my list of ideas for future videos!

[@kainatnaeem4607]

I wanted to access the source code, first I requested properly and I enter my details and subscribed to the newsletter but in the last they are asking for money, I think you should mention in the start so that everyone who does not want to enter their details will not continue , Anyways thank you for the great tutorial

[@HeyFlutter]

Thank You kainat naeem!. I showed the main functionality, which is important for this package. Learn more about it here: github.com/JohannesMilke/sponsorware

[@testmind5595]

Hi, Thanks for your videos, I have a doubt: I picked the file but couldn't open it. While trying to open shows error Media not found. Please give me a solution for this.

[@prabinlamsal74]

I am trying to use file_picker in archlinux and its giving error ' Couldnot find executable zenity in the path' and the condition in the package path==null is being executed inside the package. Can you please help?

[@HeyFlutter]

Thank You @prabinlamsal74! Follow this link: stackoverflow.com/questions/61218939/invalid-arguments-cannot-find-executable-for-where-flutter I hope you will get your answer 🙂

[@landry_ng3517]

in production mode, is it necessary to add permission for reading local storage for android and ios?

[@HeyFlutter]

Thank you, Landry_NG! 🙂. Permission is necessary in every mode.

[@eldadario7339]

Perfect

[@klevisxhyra173]

Just in case anyone had the same problem with me where selecting files in web was not working, run flutter clean and flutter pub get and build the app again.🔥

[@HeyFlutter]

Thank you, Klevis Xhyra! 🙂

[@Khalid-xv8ni]

nice video sir, but iam imagine how we combine the image picker and file picker, like whatsapp the attachment document and take from camera ?

[@HeyFlutter]

Thank You Khalid! Follow this link: pub.dev/packages/file_picker I hope you will get your answer 🙂

[@mohussein4699]

Can I determine the file directory which will be opened

[@HeyFlutter]

Thank You Mo Hussein! Follow this link: stackoverflow.com/questions/63769816/how-to-open-find-the-file-created-by-path-provider I hope you will get your answer 🙂

[@mohussein4699]

@@HeyFlutter thanks Johannes , but I can't find answer yet What I need that I have pdf file I put it in assets/ So what I need is when I use file picker I want it to open to assets file

[@patrickmccullagh881]

Thank you so much for this. I have everything working except the saving permanently. I get an error and need to add ! to saveFilePermantly(files!). However, after running I can see both old and and paths in my console, but get an error (_CastError (Null check operator used on a null value). using SDK 33 . Any help here would be appreciated.

[@HeyFlutter]

Hey, @patrickmccullagh881 🙂 Please file an issue here: github.com/miguelpruivo/flutter_file_picker/issues

[@murilosantos187]

Hi Bro, I'm from Brazil, and I really enjoy this video, If you can help me, I want to know, How can I pick a picture from the galery and set this on a AssetImage?

[@murilosantos187]

@JohannesMilke, I Find the solution in another video from your channel, kzbin.info/www/bejne/g4TZZGughJl4gM0&ab_channel=JohannesMilke thanks.

[@HeyFlutter]

Thank You Murilo Santos! Follow this link: pub.dev/packages/image_picker I hope you will get your answer 🙂

[@DCZT]

Thank you for this. I have a question. How can I fetch automatically all pdf files from my device and display them in a grid view at app startup?

[@DCZT]

@@HeyFlutter Hello. Thank you, this is really helpful, but I am trying to do something different. I am trying to fetch automatically all of my pdf files from my storage on my phone, not from the web but offline locally.

[@DCZT]

@@HeyFlutter Or if that's not possible, perhaps is there a way I can store that list of files with shared preferences, I mean save the path to the file in shared preferences and then load them in that grid view at start of the app.

[@KonesThe]

Hi Johannes, would it be possible to access a file from the computer? So having a file saved on the computer, and accessing it from the android device. Both connected on the same network. I've previously accessed an SQL database, but that came with the SQL Server Port 1433. Is there a way to do it with a file? Is there a need for a Port to access it? I know I can ping it fine from the App, but nothing else.

[@HeyFlutter]

Thank You Josep Mor! Follow this link: www.geeksforgeeks.org/flutter-pick-and-open-files-from-storage/ I hope you will get your answer 🙂

[@KonesThe]

@@HeyFlutter thank you for the reply Johannes. I was asking about opening a file on the computer. In the end, what I did is I created a server with Dart and I communicated with that server from the App. With Get and Post. Now I can access my files from the computer.

[@flutterfix4628]

Please update your videos with the new updates thanks

[@HeyFlutter]

Thanks for the idea, Flutter Fix! 🙂 I have added it to my list of ideas for future videos!

[@melomanzer5508]

My app restarts after picking a file. Any help please ?

[@bardogod4011]

Same error, my app restar my drift database

[@AdeelAslam-w5z]

if i want to delete the original file from device gallery after moving file into app folder ?? how can i do sir ?

[@HeyFlutter]

Thank You @AdeelAslam-w5z! Follow this link: stackoverflow.com/questions/76387231/how-to-delete-images-from-phone-gallery-using-flutter I hope you will get your answer 🙂

[@munawir7013]

hello sir, how to pick folder and get all file in the folder not choose to one more one

[@jamesr2408]

Thank you for sharing a very useful tutorial, but this does not work on web platform. "Error: On web `path` is always `null`". The workaround is to use (await FilePicker.platform.pickFiles())!.files, followed by pickedFile!.first.bytes!, but this produces List. But OpenFile need to work. I tried pickedFile[0] still didn't work.

[@caglarpeker5083]

Hi, ı cant use it on android because throw ecxeption not handled message channel metod. Hıe can ı solve this problem ??

[@HeyFlutter]

Hey, @caglarpeker5083 🙂 Make sure to re-install your app after doing pub get

[@w33k3nd5]

hello bro, I have a quick question, I have seen some app , in ahich when we copy url in the browser i.e chrome in android, the app itself show a floating widget in the chrome if those particular link is copied , like overflow on the top , giving various options. can you tell how to achieve this.

[@HeyFlutter]

Thanks, W33K3ND! 🙂 Learn more about it here: 1) kzbin.info/www/bejne/nJnOknerlpWlnqc 2) kzbin.info/www/bejne/hYCoqn1mmNljick

[@elumalaim6857]

since, this app doesn't interact with DB, the next time (when u restart ur app) u go to the "Files" page, there will be nothing right? I mean, the flow is like, u have to pick the files after that u push 'em to the appDataDirectory and then it's "Files" screen. U need to pick the files everytime I think.

[@elumalaim6857]

@@HeyFlutter so i need to use a DB right?

[@mkhwanazicebo4448]

why does this no longer work, it keeps giving me the error - 2 positional argument(s) expected, but 1 found. and The argument type 'String?' can't be assigned to the parameter type 'List' . inside the FILE parameter..plz help

[@HeyFlutter]

Thank You Mkhwanazi cebo! Follow this link: stackoverflow.com/questions/55995791/how-can-i-resolve-the-argument-type-string-cant-be-assigned-to-the-parameter I hope you will get your answer 🙂

[@funnynews341]

at 2:28 . Is there any other method, or file_picker fixed this cached path to the app path?

[@funnynews341]

@@HeyFlutter Thank you Johannes Mike

[@HeyFlutter]

Thank You Funny News! Follow this link: pub.dev/packages/file_picker I hope you will get your answer 🙂

[@mohsinikram8921]

Thanks for this amazing video. Can you make a video of NFC Scan in fluttter?

[@mohsinikram8921]

@@HeyFlutter Thanks for your kind response. I'm desperately waiting for your video. :)

[@venkatramansp238]

I got an error! Module not found. I tried a lot of ways to clear it. But i couldn't. Can you please tell me why that error comes.

[@HeyFlutter]

Thank you VENKATRAMAN S P, make sure to follow the tutorial step by step 🙂 also try by flutter clean -> flutter pub get commands in console

[@pradhumnamirotha827]

When I use for web there is issue Error: on web path is always null you should access bytes property instead

[@HeyFlutter]

Thank You pradhumna mirotha! Follow this link: stackoverflow.com/questions/66032845/get-file-path-from-system-directory-using-flutter-web-chrome-to-read-file-cont I hope you will get your answer 🙂

[@nino4885]

Why do I get a compiler error for platform: The getter 'platform' isn't defined for the type 'Future Function()' :(

[@HeyFlutter]

Thank You Ni No! Follow this link: stackoverflow.com/questions/61832126/flutter-the-getter-isnt-defined-for-the-type I hope you will get your answer 🙂

[@nazarii_9.0]

Cool video. But I need the user to see only csv files when selecting files. I haven't found a solution to this.

[@HeyFlutter]

Hey, Number5 Fort 🙂 you can find allowedExtensions: ['jpg', 'pdf', 'doc'] property inside filepicker, simply pass here the file type as csv

[@nazarii_9.0]

​ @Johannes Milke yes, but a user sees other types of files (of course it's unavailable for selecting). I want the user sees only one type of file.

[@danimatar7815]

Hey, i was trying to use this package for multi files picker on flutter web, but it's not allowing me to pick multiple files even if allowMultiple prop is true, any idea?

[@HeyFlutter]

Thank You Dani Matar! Follow this link: stackoverflow.com/questions/56252856/how-to-pick-files-and-images-for-upload-with-flutter-web I hope you will get your answer 🙂

[@chaoscore5500]

I hope you read comments because i really need help .. file picker although it works with flutter web .. you cant get a file path with web .. its always null .. i have a csv file i want to access to take the data inside but since im using a web application i cant do that .. can you help?

[@HeyFlutter]

Thank You Chaos Core! Follow this link: stackoverflow.com/questions/56252856/how-to-pick-files-and-images-for-upload-with-flutter-web I hope you will get your answer 🙂

[@chaoscore5500]

Thaaaank you .. ive been working on it non-stop since yesterday i found a solution but its not complete yet .. there is a crazy tiny bit left

[@tutel7840]

one question how do i find the file picker in my phone?

[@HeyFlutter]

Thank You tutel! Follow this link: pub.dev/packages/file_picker I hope you will get your answer 🙂

[@andresrg1939]

Hey, it's awesome to be able to select multiple files once, I would like to know if somebody knows how to keep save it this files, so if you get in again, the files still get there, I mean know if I come back, I have to select all files again, they are not visible in the screen view. If someone know how to do it, I will be so thankfull.

[@HeyFlutter]

Thank You Andres RG! Follow this link: pub.dev/packages/file_picker I hope you will get your answer 🙂

[@ab2_3000]

When i tap the button nothing happens, file explorer doesn't show up, what am I missing.am using android emulator

[@HeyFlutter]

Thank you, @ab2_3000! 🙂. There must be some error message.

[@ab2_3000]

@@HeyFlutter i ran flutter clean and it works fine,thanks alot

[@IbrahimAlqadi]

Thank you. but when i choose any image to open it the message error is " unable to find item "

[@IbrahimAlqadi]

​@@HeyFlutter i mean ,when i select image or video from gallery and show options for open it if i choose image ,the gallery say " unable to find item " or choose video ,the MXplayer say " Can't play this file " and when i searched this problem in internet can't found it i hope you understand what i mean , and i'm sorry for my english because i'm weaknees in english language 😊

[@MxMayers]

i wanna open file, get real path, modify this file and save to the same place and same name how can i get real path?

[@Ismail-hd4yz]

How to check if the chosen file is secure or not. I have created a txt file and saved as .png And filepicker treat that as a real png image

[@HeyFlutter]

Hey @Ismail-hd4yz 😀 even on changing the file extension file's mime-type stores the exact info, you can check it from there.

[@Ismail-hd4yz]

@@HeyFlutter thanks a lot. Thats a good one. 👍

[@DANISHALI-gj5gt]

I am having path error that path is null in flutter web is there any solution to it ?

[@HeyFlutter]

Hello, DANISH ALI! Follow this link: stackoverflow.com/questions/65420592/flutter-web-file-picker-throws-invalid-arguments-path-must-not-be-null-e, I hope it will solve your problem. Thank You 🙂

[@vishallambert9494]

what if i didn't select any file and press back button in android? my app crashes in this scenario. please help

[@HeyFlutter]

Thank you, @vishallambert9494! 🙂. Try to provide enough details with your question whenever you face any issue.

[@vishallambert9494]

@@HeyFlutter Sure. I am using file_picker package. For example, in android device (real device nor emulator) when i click a button the file picker screen opens. i will pick a file and display the file details in the flutter app. But what if I didn't select any file and press the device back button. In this scenario if I didn't select any file and press back button, my app is crashing. That's the issue I am facing.

[@aronemalicse7888]

When I use the Filetype.Custom and ['doc']. the app crashes.

[@HeyFlutter]

Thank you Arone Malicse, make sure to follow the tutorial step by step 🙂

[@chonchanokchamsaeng1188]

I try to use for my flutter web. But it not working. :(

[@mr.videocreator]

File is not working in release mode

[@HeyFlutter]

king of universe!, make sure you have added necessary permissions on native side code 🙂

[@mr.videocreator]

@@HeyFlutter yes . Added . Read data from csv file is not working in release mode . Its working only debug mode

[@muratyldrm6977]

Hey bro,I gave you all my information and confirmed by mail. but I still can't access the source code. Can you help? i really need this code

[@HeyFlutter]

Thank You Murat Yıldırım!. I showed the main functionality, which is important for this package. Learn more about it here: github.com/JohannesMilke/sponsorware

[@Esther-ff4od]

Hii i need the source code for this how do i get it.

[@HeyFlutter]

Hey, @Esther-ff4od You need to subscribe on github to access the code.

[@AjithKumar-kx7iv]

how to pick a file from cloud storage

[@HeyFlutter]

Thank You Ajith Kumar! Follow this link: stackoverflow.com/questions/51857796/flutter-upload-image-to-firebase-storage I hope you will get your answer 🙂

[@xhalozero]

Doesn't work for Flutter Web, file paths are set to null always.

[@HeyFlutter]

Thank You Ted H! Follow this link: pub.dev/packages/file_picker I hope you will get your answer 🙂

[@sheralikhtk5200]

how to show thumbnails?

[@HeyFlutter]

Thank You Sher Ali KHTK! Follow this link: pub.dev/packages/video_thumbnail I hope you will get your answer 🙂

[@benedictcontawe3355]

getColor method is undefined

[@HeyFlutter]

Hey @benedictcontawe3355, make sure to follow the tutorial step by step 🙂

[@benedictcontawe3355]

I just commented out that line thanks it works

[@satuteknologi1961]

i wil use it on my app ...just for fun

[@HeyFlutter]

Great, Thank you @satuteknologi1961!

[@satuteknologi1961]

@@HeyFlutter then how to upload them simultaneously to firebase & firestore?

[@elumalaim6857]

I need source code pls

[@elumalaim6857]

@@HeyFlutter thanks man😇

[@HeyFlutter]

Thank you 😊, Elumalai M! Check out this github repo : kzbin.info?event=video_description&redir_token=QUFFLUhqbDUzV1hhcDV5LTI3eFE3eFFiRm9ZelJsV1BNUXxBQ3Jtc0tra0ZWUHB5VmNmaExPR2M3WXJvQUNnOXh1VTNaRVdOUmZndGd1RmhsajRoYWtDbkI1NDlyNGY1b2tLLTJvdGlZUHVqbUF6d1lvU05TdDdmQ1o4eF9ERVJnZXRrVmpza3pFal9OYU9KR3FOU3ozeFVLZw&q=https%3A%2F%2Fgithub.com%2FJohannesMilke%2Ffile_picker_example

[@__mothership__8475]

HELP !!! getting this error , when running this - final result = await FilePicker.platform.pickFiles(); if(result == null)return; flutter: [MethodChannelFilePicker] Unsupported operation. Method not found. The exception thrown was: MissingPluginException(No implementation found for method any on channel miguelruivo.flutter.plugins.filepicker) [VERBOSE-2:ui_dart_state.cc(209)] Unhandled Exception: MissingPluginException(No implementation found for method any on channel miguelruivo.flutter.plugins.filepicker) #0 MethodChannel._invokeMethod (package:flutter/src/services/platform_channel.dart:175:7) #1 MethodChannel.invokeListMethod (package:flutter/src/services/platform_channel.dart:363:35) #2 FilePickerIO._getPath (package:file_picker/src/file_picker_io.dart:93:33) #3 _UploadFileState.build. (package:startup/AppPage/firebase_storage/upload_file.dart:24:32)

[@HeyFlutter]

Thank you, Vipul Ghate! 🙂 you can try by uninstalling your app and install it again after pub get or pub upgrade