Part-14 - Flutter Upload File/Image To Rest API/Server Using Multiport Http Request with Null Safety
HTML-код
- Опубликовано: 18 сен 2024
- In this video i will teach you how we can pick image from gallery and display in the app. Once we picked the image from gallery then we will upload it to server using http package with Multiport request.
► Source code ➜ github.com/axi...
► Api ➜ fakestoreapi.com
_____________/Camera Permission For Android\____________
► linkedin:➜ / axiftaj
► Instagram:➜ / axif_taj
► Facebook:➜ / aaxiftaj
► Twitter:➜ / axiftaj
► GitHub:➜ github.com/axi...
► Hire me on Fiver:➜ www.fiverr.com...
=========================================
► Join My Facebook Group ➜ / 983554978866765
_____________/Connect On Social Media\____________
► linkedin:➜ / axiftaj
► Instagram:➜ / axif_taj
► Facebook:➜ / aaxiftaj
► Twitter:➜ / axiftaj
► GitHub:➜ github.com/axi...
► Hire me on Fiver:➜ www.fiverr.com...
=========================================
► Flutter Blog App Playlist: • Flutter Blog App with ...
► How to capture image from camera in flutter:
► Link : • How to capture Image f...
► My Card App Flutter :
► User Circular Avatar Part 1 : • My Card App || Flutter...
► Use fonts in flutter Part 2 : • My Card App || Flutter...
► Final Part 3 : • My Card App || Flutter...
►Covid-19 Tracker App using Rest API's :
• Create Coronavirus (CO...
►Firebase Blog App Android Java:
• Firebase Blog App - Ho...
►C++ Tutorials :
• C++ Programming Tutori... .
rest apis, flutter rest api tutorials crash course, how to implement login and sign with with rest apis with null safety
For business queries : axiftaj@gmail.com
Thank you for watching my channel do give feedback about this video.
#flutter #fluttertutorial #form #components #flutter #login #signup #postapi #nullsagety #asiftajtech
Api: fakestoreapi.com
Permission for IOS:
camera permission
NSCameraUsageDescription
hello app camera description.
gallery
NSPhotoLibraryUsageDescription
hello app photos description.
Permission for android:
Multipart: Multipart requests combine one or more sets of data into a single body, separated by boundaries. You typically use these requests for file uploads and for transferring data of several types in a single request (for example, a file along with a JSON object).
Yes
thank you paa jeee 😍Allah apko lambi sahat wali nakion wali zindagi ata pharmaya ameen
do share
very nice explanation thank you so much🙏🏼🙏🏼🙏🏼
share with your friends
I appreciate your work thanks and Best of Luck
Good Explaination
Thank you
I appreciate your work thanks and Best Of Luck
Thank you too
Very nice tutorial
Thank you so much. Do subscribe and share within your friends circle.
Thanks a lot sir this is awesome
Glad you like it, do subscribe and share with your friends.
@@thetechbrotherss i will
Have been following your tutorial and it has been a great journey but now I am struggling in this one. I am not quite getting the flow.
I am confused on terms like "ByteStream", "multipart" section. Can I get some reference or help in this . Cheers!
You can check the article on medium though i have tried my best to explain.
@@thetechbrotherss no doubt in your explanation... i just wanted to get deeper! thanks for the lead
* What went wrong:
A problem occurred evaluating root project 'android'.
> A problem occurred configuring project ':app'.
> Could not open proj generic class cache for build fil Can you tell me the solution of this error I followed the same process that you explained.
Not sure about this error
request.fields['title'] = "Static title" ;
please explain this line for me! thank you!
this is used to send text to server along side with image using multiport requests. If you don't have text remove it.
postman me image uplode karne me wo 200 code dikha raha hai lekin koi output nahi a raha aur image ke nich ye likha a raha hai : *This file isn't in your working directory. Teammates you share this request with won't be able to use this file. To make collaboration easier you can setup your working directory in Settings.* how to resolve this problem
Please check their api in postman and read documentation
ye error is lye ata ha postman me agar ap image ki postman pe upload nhi ha wo just ye keh rha ha k imagge ko postman pe upload kr lain ta k agar koi or ye api use kry usko bh image show ho jye gi. is ka code se kooi relation nh
Thanks a lot. it's awesome
Most welcome 😊
Sir kia ap refresh token in flutter pa video bnayee ga ? I really need it
I will try to to make videos as soon as possible.
Helpful thanks
Glad it helped
Sir In my program the "File?" data type is not supported. So how can I resolve this problem?
Import io and async
This file isn't in your working directory. Teammates you share this request with won't be able to use this file. To make collaboration easier you can setup your working directory in Settings.
sir jab mai image path add kartha ho tu ye suggestion deta hai image nahy upload hota postman sy
Sir postman ma ap kuch mistake kr rahy hon gy. It's working fine.
same problem here bro
@@thetechbrotherss same problem apka problem solve hhoa
ap na ye problem solve keya agar keya hai to please help me how i can fixed this
just change the path of image to postman files folder.
Sir i got a question::::::::::) Why didn't you use
var request = http.post(
Uri.parse(''),
body{
params:
image:
});
is it becuz of the files to be uploaded???
Its maliparts
Sir how to upload image with header .
Please make video on this topic.
Map headers={
"Authorization":"Bearer $token",
"Content-type": "multipart/form-data"
};
request.headers.addAll(headers);
@@thetechbrotherss when I upload image then in console image uploaded print .but when I check postman then it is not uploaded.
Kindly guide me.
sir, can you add a small video of explaining the whole code and cotext of each step with other others.
ok
@@thetechbrotherss o thanks, upload function does work in this code??????
Sir, I am facing an exception occuring issue at http.ByteStream(image!.openRead()) during debugging. it is giving _CastError (Null check operator used on a null value) .
only circularindicator is spinning. Can you help me?
Its means you haven’t selected image bro check video again carefully
@@thetechbrotherss done,thanks
wonderfull playlist but intro music is disturbing while using headphones
I removed intro video in my videos, sorry for inconvenience
can someone provide the detail on how to upload the image along with other signup detail, like email, password, name...?
request.fields["type"] = 'User'; user this before multipart file and add your email and password
The method 'pickImage' isn't defined for the type 'ImagePicker'. 😒😒 please help
Oh yea, follow latest documentation 🥲
Sir, if we want to upload image to localhost server then we will give uri of localhost? And how to get response from in our application? I'm working with image detection I have created Api and it is working fine on localhost and how can I get predicted result into my app? Please explain
Upload your api to server, your server will done the processing and then returned you the json response and then you can take action accordingly.
@@thetechbrotherss server mean localhost? How I will be able to upload it on localhost? My Api is currently directly working from localhost and also on postman and also giving me response but I'm confused how I can use it in my app
sir mre image upload nahi horhi and hm na 3 parameters send krna tha api ma ap na bs image hi ki hai bki sb ksa honga
Mainy video ma apko kr ke dekhaya tha if you want to send some text parameter how then how you can send those. please watch video carefully.
@@thetechbrotherss sir if some field me number send karna hai wo kaise kare
Hello sir, what if I want to send int type data along with this => request.fields['title'] = "Static title" ; like request.fields['abc'] = 3;
you can send extra data like this with your custom api
Brother why is the image uploaded not showing when I get the URL in postman? and you also didn't showed it in your postman. by the way love your videos♥
these are 3rd party api that's why
Error: ADB exited with exit code 1
Performing Streamed Install
adb: failed to install C:\development\Flutter-Rest-Api-Tutorials-With-Example-main\build\app\outputs\flutter-apk\app.apk: Failure [INSTALL_FAILED_USER_RESTRICTED: Invalid apk]
Error launching application on M2010J19CG.
This shows your pc is slow cannot handle emulator, try physical device
Asalam U Alaikum Sir these videos are 2 to 3 years old. Is the concept still the same today?
I am saying this because whenever I don't understand from your video, I try to watch it from somewhere else' AND there are a lot of changes in other video on the same topics if I compare it with yours'
SORRY Sir
Yes it's still valid
every thing is ok but when i add keys in form data in postman during uploading the image through laptop and after clicking the send button it shows only 1 id in response not showing image id plz tell
Check the documentation for apis
how can we show dialogue box for user to give permission or deny it
yes why not
@@thetechbrotherss Actually that was a question😅
I'm getting a response 520, when I'm exactly trying to do as done in the timestamp: 4:53
I tried to upload an image file from the my pc and in the body its showing me some html stufff.
I don't really understand what's actually causing it. I tried to do the following without giving the `image` parameter and got no error.
Check the path of file, path of url
Bro, I was also facing this problem. but then I tried to upload a jpg image then it was done
@@uzairB533 in my case I uploaded a pic of small dimensions. The first ones were big...those were desktop wallpaper pics...But later I tried to upload small dimensional size images, that worked fine :)
@@swagatbaruah522 what was the size dimension plz tell
#helpful but I have to do ,How to pick multipal image from imagepicker(gallery) and upload to the server(APIs).
use this same pacakge to pick multiple images and the upload it but it has a little different way
I copied your code from github.
it working fine but image not uploading while image is uploading from POSTMAN (same api). what could be the reason please..?
and if I do print(request.fields), it shows title but not image.
Check api documentation for latest implementation and follow this process
Bhai mera 2nd parameters integer me hai so waha string paas ho rha hai so bad request aa rha hai
ask your backend developer to convert it into string. If he needs integer then while receiving the data after api hit then he can convert it to integer and save it as integer.
@@thetechbrotherss ok bhai thanks koi dusra options nhi hai na
I think nope
i tried to print response.body but there's no body option. why is that?
make sure you use await keyword
at 5:06 the first id "_id" is not showing at my end
go to model and check they parameter name against key
22:46
Yes
upload button me click karne par *[ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: Null check operator used on a null value* error a raha hai
Make sure you are not passing null values
sir uploadImage funtion kis kam ka h kuch to kam kr nhi rha
kr raha ha bhai
Bro, I get this error when I select the image
Unhandled Exception: FileSystemException: File closed, path = '/data/user/0/com.example.flutter_application_1/cache/scaled_1000000033.jpg'
Please help me
make sure to add permission in manifest
sir file missing aa raha hai..file upload nahi ho rahi hai
Please watch video carefully and check the documentation of the api
@@thetechbrotherss sir fr bhi error arha
completed... but some code may be you forgot to explain, like stream, cast, multiport, .....
Thanks for feedback
Bro thanks, please I want to send text with image can you guide me on this or recommend an tutorial for it please 🙏 🙏
I have taught the method in the end of this video do not skip
Bhai is method mein access token pass karni hai toh kaise karenge
headers add kr k k
sir you have forgot to explain some code like stream cast multiport form where i can clear my these concept never heard about it before can u help plz
I'll explain and will add a new video in this series
Sir when i pick image form gallery then it occurs error that unsupported operations : Platform._operatingsystem
What is the issue ?
Note : I am running this on Web not on emulator or simulator.
may be the plugging we are using are not supported for web
I struggle to add keys in form data of postman of image i didnt get image id plz help
Check i have taught how to add send data in the end of the videos
@@thetechbrotherss in the end of this video or other plz tell?
Sir everything is going smooth untill i reached post apis and login and upload image i dont know why but i did not understand whats going on like in login chapter we use the api and craete signup using that api email and password but why not if we gave our own email and password then it will save it and we login through it
For that you have to create your own apis, in this lecture I taught the concept
@@thetechbrotherss thats the thing i wants to know sir how to create own apsi
sir mera pic ka response nhi mil raha he muje postmen per mene file ko sabhi folder per rakh ke dekh liya url se bhi try ker liya or save images se bhi try ker liya muje response hi nahi mil raha he
ab kya ho sakta he iska??
Yar agr postman ma api work ni kr rae it means koi issue ha api ma ya phr ap ghlt kr rahy ha kuch
kiya authorization and token wagera to add nahi krna pray ga postman mein image add krnay k liyay laptop say?
depend krta ha agr backend waly ny integrate kia ho to kr skty ha
@@thetechbrotherss acha
Mai multiport ka fieldname me fieldname de rha hu fir bhi api error de rha hai
Yeah third party api ha bro is liye error day rae ha used your own api then it won't give error.
@@thetechbrotherss bAse name bhi pass kiye to ab shi hai
Brother to be honest Boht confusing hai this video and everything not explained well but overall tutorial was amazing
Agree
jani how to uploaded multi pic with describtion
aise he handle krty ha but ab lsit bna lo multiport kis
Sir apki bootcamp ki dosri videos mai concept tha lkn jab say API ka chapter shuru kia hai ratta lag raha hai.....logic nhi beth rahi mind mai kindly suggest source from where i can learn these things conceptually 🙏🙏
I taught the concept in this playlist as well…….. but apis consuming is a big topic for beginners…… i will suggest you to watch video carefully and do more and more practice. Before this chapter concepts were little easy but now we are moving one step ahead that’s why you are feeling that.
@@thetechbrotherss OK Sir ♥️ Thankyou
sir yhn tk bilkul perfact sahi hogia lekin mein chahta hon image ko server to upload pr upload krny k baad local storage mein save krva dia jaye using shared preference ta k jb app ko kill bhi kr dia jaye to save hi rahy when we open again our appp.. can your guide me?
Download that image and store it in local image as base 64
postman ma reuquest ki ha to code 520 aa rha ha or response bhi html form ma aa rha ha? Images ko jb add kia ha tb?ow can i solve that?
to kuch ghlt kia hoga check api , support me on isnta: instagram.com/thetechbrotherss/
😁
sorry but this video mein aap nay siraf khud coding kii haii... samjaii nai haiii...
Agree actually sometimes aisa ho jata ha
23:18
?
Sir its giving me error in run terminal
i just followed your video then i copy your code from gethub but it still giving error why
State the error
@@thetechbrotherss D/SurfaceView@376daa9(28026): updateSurface: surface is not valid,
D/InputMethodManager(28026): startInputInner - Id : 0,
I/ViewRootImpl@13e7bf4[MainActivity](28026): ViewPostIme pointer 0
I/ViewRootImpl@13e7bf4[MainActivity](28026): ViewPostIme pointer 1
I/flutter (28026): Instance of 'ByteStream'
I/flutter (28026): image uploaded
I/ViewRootImpl@13e7bf4[MainActivity](28026): ViewPostIme pointer 0
I/ViewRootImpl@13e7bf4[MainActivity](28026): ViewPostIme pointer 1
how to get the url of the uploaded images to show in widget after upload sucess
ask your developer to give you uploaded url back in response only then you will be able to show it
@thetechbrotherss i need a help in flutter design ?
can you plz help me out
how i can help you
why File? gives wrong?
You are doing something wrong thats why
You can check the source code on my git account.
The current Dart SDK version is 2.19.3.
Because api depends on modal_progress_hud_nsn >=0.4.0 which requires SDK version >=2.19.6
Upgrade packages this is not an error in my code
Dawnload a new flutter sdk version of sdk should be it could be 3.0.0 and above this but not less then or equals to 2.19.6 .. and set that flutter sdk path in android studio your error will be resolve ... i was facing this same error some days ago i solved my error like this this and now everything is working fine
What is the function of stream.cast() here?
I have trouble in adding the image in form data in postman i got only id:20 in json response plz help
Sir i got error in File(image!.path).absolute error: 2 positional argument expected but 1 found what to do please reply
Please watch video carefully and follow along side with me.
@@thetechbrotherss watched more than 4 times but getting same error I stops at that point nothing can done if it is giving error 🥺
@@codecraftmanisha_official import 'dart:io' instead of import 'dart:html'
@@alexrajanand1184 thanks buddy
thanks bro, it helped me a lot, I was stuck at that point.Long live!@@alexrajanand1184
sir ya model progress hub nhi mil raha pub.dev pa, kia kru kaha sa milaga?
to koi r use kr lo, ap apni logic use kr lo.
like use boolean and if it's true show loading
@@thetechbrotherss ok sir i'll try
Sir hum Jo image upload kr rhe hain successful upload hune ke bad image url me show hunga?
Yes agr apka developer apko respons return krta ha to zaror show hoga. is example main main 3rd party apis use kr raha hu so apko image ka url nazar ni ay ge.
Sir bht he advance video ha ya bilkul he kuch smj nai aya ap aik dem he basics sey advance per shift ho gay hn😢😢😢😢
hahahahha yar khair ha first time ma ni smjh atta but agr ap ny video dekh li ha r sahi tarahn run kr lia it a great success, ab ab thora sa search karin ya phr sy dekhain smjh aa jay ge
@@thetechbrotherss poory 2 din main almost 10 baat deikh Chuka hu lakin ya bht he advance level k concepts use huy hn. Ap k bghair kci oor ki b smj nai atti ya b mjbouri ha😂😂😂
sir mera image picker nhii add horaha
kya issue ha
bhai kuch bhi hue jaa raha he (bytestream, multipartrequest ) ye hote kya he wo to bata do ?
ary bhi multipar request use hoti iamges ko upload krny k liye and images ko hm bytes ki form ma send krty ha, ap start sy follow krty apko yeah question na poochn parhta, do subscribe and share with your friends.
ok bro do subscribe and follow on isntagram: instagram.com/thetechbrotherss/
@@thetechbrotherss thankyou asif bhai for solving the dout +1 follower
Thank you
Great video sir
but this error?
Error: The method 'File' isn't defined for the class '_ImagePickState'.
- '_ImagePickState' is from 'package:api_practice/image_pick.dart' ('lib/image_pick.dart').
Try correcting the name to the name of an existing method, or defining a method named 'File'.
File(image.path).absolute,
^^^^
impor the package for file and follow video carefully
I have trouble in adding the image in form data in postman i got only id:20 in json response
import 'dart:io';
@hafizabdulrehman import : 'dart : io' and remove import 'dart : html' package
it worked
It will work
im a beginner and mujhe kuch v samajh nii aaya ye video
Please watch from start to this playlist
ok
.....
.
.
.
.
.
.
.
.
.
.ok
.
.
.
.
.
.
.
.ok.
.
.
.
.
.
.
.
.
.ok
hahhaha ok
can you also upload files using this api? please need this fast
Yes
Plase Make Video For Multiple Image Upload
Ping me on install i will share the code with you.
What does this method do. stream.cast();
search it bro
meray postman mein sirf 1d:20 aya ha
check latest docuementation
bhia % wali loading kse show krte h
Bro different package available ha pub.dev par search kr lo.
I could not understand 🙁
Watch playlist from start
@@thetechbrotherss Okay Sir !!
how to check that image which is stored by us
Check your database, check how your back end developer is doing that. Api i used here are open source that's you cannot see the further process.
can http put to upload file image?
There are two ways to upload image. Base64 or with path ask your developer how he is doing that and then follow process accordingly. I used multi-ports to store path.
Explain in english...
ok