Part-14 - Flutter Upload File/Image To Rest API/Server Using Multiport Http Request with Null Safety

[@thetechbrotherss]

Api: fakestoreapi.com Permission for IOS: camera permission NSCameraUsageDescription hello app camera description. gallery NSPhotoLibraryUsageDescription hello app photos description. Permission for android:

[@uxruslan]

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).

[@thetechbrotherss]

Yes

[@abdullah-jg4lq]

thank you paa jeee 😍Allah apko lambi sahat wali nakion wali zindagi ata pharmaya ameen

[@thetechbrotherss]

do share

[@viv3khack3r]

😂

[@vivekjunghamal5730]

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!

[@thetechbrotherss]

You can check the article on medium though i have tried my best to explain.

[@vivekjunghamal5730]

@@thetechbrotherss no doubt in your explanation... i just wanted to get deeper! thanks for the lead

[@hassamtariq3931]

* 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.

[@thetechbrotherss]

Not sure about this error

[@someshsahu4638]

very nice explanation thank you so much🙏🏼🙏🏼🙏🏼

[@thetechbrotherss]

share with your friends

[@N.LAGENT]

I appreciate your work thanks and Best of Luck

[@N.LAGENT]

I appreciate your work thanks and Best Of Luck

[@thetechbrotherss]

Thank you too

[@arslanasghar750]

Sir kia ap refresh token in flutter pa video bnayee ga ? I really need it

[@thetechbrotherss]

I will try to to make videos as soon as possible.

[@uxruslan]

Sir i got a question::::::::::) Why didn't you use var request = http.post( Uri.parse(''), body{ params: image: });

[@uxruslan]

is it becuz of the files to be uploaded???

[@thetechbrotherss]

Its maliparts

[@ShadabKhan-ib7me]

wonderfull playlist but intro music is disturbing while using headphones

[@thetechbrotherss]

I removed intro video in my videos, sorry for inconvenience

[@azammughal4906]

sir, can you add a small video of explaining the whole code and cotext of each step with other others.

[@thetechbrotherss]

ok

[@azammughal4906]

@@thetechbrotherss o thanks, upload function does work in this code??????

[@taimoormanzoor7386]

Sir In my program the "File?" data type is not supported. So how can I resolve this problem?

[@thetechbrotherss]

Import io and async

[@islamicpostbygul]

Brother to be honest Boht confusing hai this video and everything not explained well but overall tutorial was amazing

[@thetechbrotherss]

Agree

[@ranaasad6268]

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

[@thetechbrotherss]

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.

[@ranaasad6268]

@@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

[@hamsken4665]

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♥

[@thetechbrotherss]

these are 3rd party api that's why

[@S4eedKhan]

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

[@thetechbrotherss]

Yes it's still valid

[@RakeshKumar-dn2dh]

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 🙏🙏

[@thetechbrotherss]

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.

[@RakeshKumar-dn2dh]

@@thetechbrotherss OK Sir ♥️ Thankyou

[@smgraphics3012]

kiya authorization and token wagera to add nahi krna pray ga postman mein image add krnay k liyay laptop say?

[@thetechbrotherss]

depend krta ha agr backend waly ny integrate kia ho to kr skty ha

[@smgraphics3012]

@@thetechbrotherss acha

[@NazrulIslam-iz6sw]

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.

[@thetechbrotherss]

Check api documentation for latest implementation and follow this process

[@BeyondControll]

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

[@thetechbrotherss]

Please check their api in postman and read documentation

[@hamzazafeer]

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

[@laraib.sheikh5982]

Sir how to upload image with header . Please make video on this topic.

[@thetechbrotherss]

Map headers={ "Authorization":"Bearer $token", "Content-type": "multipart/form-data" }; request.headers.addAll(headers);

[@laraib.sheikh5982]

@@thetechbrotherss when I upload image then in console image uploaded print .but when I check postman then it is not uploaded. Kindly guide me.

[@atifullah7567]

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

[@thetechbrotherss]

Sir postman ma ap kuch mistake kr rahy hon gy. It's working fine.

[@evergreenpakistan3934]

same problem here bro

[@armangul2078]

@@thetechbrotherss same problem apka problem solve hhoa

[@ZubairAhmadcu--A]

ap na ye problem solve keya agar keya hai to please help me how i can fixed this

[@faisaljamal7080]

just change the path of image to postman files folder.

[@Abhishekkumar-vm9mw]

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?

[@thetechbrotherss]

Its means you haven’t selected image bro check video again carefully

[@Abhishekkumar-vm9mw]

@@thetechbrotherss done,thanks

[@SehrishMoujahid]

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

[@thetechbrotherss]

Check the documentation for apis

[@MrAwaisChand]

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?

[@thetechbrotherss]

Download that image and store it in local image as base 64

[@pankajshellcode]

Good Explaination

[@thetechbrotherss]

Thank you

[@abubatool2298]

completed... but some code may be you forgot to explain, like stream, cast, multiport, .....

[@thetechbrotherss]

Thanks for feedback

[@quangnguyenuc1261]

request.fields['title'] = "Static title" ; please explain this line for me! thank you!

[@thetechbrotherss]

this is used to send text to server along side with image using multiport requests. If you don't have text remove it.

[@afaqmazhar5703]

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

[@thetechbrotherss]

For that you have to create your own apis, in this lecture I taught the concept

[@afaqmazhar5703]

@@thetechbrotherss thats the thing i wants to know sir how to create own apsi

[@smart_asmr1]

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.

[@thetechbrotherss]

may be the plugging we are using are not supported for web

[@saddamafzal8855]

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

[@thetechbrotherss]

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.

[@ashutoshtiwari6104]

@@thetechbrotherss sir if some field me number send karna hai wo kaise kare

[@thazeroword646]

Very nice tutorial

[@thetechbrotherss]

Thank you so much. Do subscribe and share within your friends circle.

[@surbhipaliwal3576]

The method 'pickImage' isn't defined for the type 'ImagePicker'. 😒😒 please help

[@thetechbrotherss]

Oh yea, follow latest documentation 🥲

[@swagatbaruah522]

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.

[@thetechbrotherss]

Check the path of file, path of url

[@uzairB533]

Bro, I was also facing this problem. but then I tried to upload a jpg image then it was done

[@swagatbaruah522]

@@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 :)

[@smgraphics3012]

@@swagatbaruah522 what was the size dimension plz tell

[@romzanali9930]

i tried to print response.body but there's no body option. why is that?

[@thetechbrotherss]

make sure you use await keyword

[@ShadabKhan-ib7me]

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

[@thetechbrotherss]

I'll explain and will add a new video in this series

[@harunbakirci1781]

Thanks a lot sir this is awesome

[@thetechbrotherss]

Glad you like it, do subscribe and share with your friends.

[@harunbakirci1781]

@@thetechbrotherss i will

[@death_breather]

how can we show dialogue box for user to give permission or deny it

[@thetechbrotherss]

yes why not

[@death_breather]

@@thetechbrotherss Actually that was a question😅

[@Unknown-gz9vb]

Thanks a lot. it's awesome

[@thetechbrotherss]

Most welcome 😊

[@chiragmakwana9830]

Hello sir, what if I want to send int type data along with this => request.fields['title'] = "Static title" ; like request.fields['abc'] = 3;

[@thetechbrotherss]

you can send extra data like this with your custom api

[@RaghulPrasanthKarthikeyan]

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

[@thetechbrotherss]

make sure to add permission in manifest

[@mansigaming9830]

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??

[@thetechbrotherss]

Yar agr postman ma api work ni kr rae it means koi issue ha api ma ya phr ap ghlt kr rahy ha kuch

[@pradhumnamirotha827]

Bhai is method mein access token pass karni hai toh kaise karenge

[@thetechbrotherss]

headers add kr k k

[@ashutoshtiwari6104]

Bhai mera 2nd parameters integer me hai so waha string paas ho rha hai so bad request aa rha hai

[@thetechbrotherss]

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.

[@ashutoshtiwari6104]

@@thetechbrotherss ok bhai thanks koi dusra options nhi hai na

[@thetechbrotherss]

I think nope

[@takirajani2693]

sir file missing aa raha hai..file upload nahi ho rahi hai

[@thetechbrotherss]

Please watch video carefully and check the documentation of the api

[@moonjxtt3537]

@@thetechbrotherss sir fr bhi error arha

[@abdullahsheikh6730]

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?

[@thetechbrotherss]

to kuch ghlt kia hoga check api , support me on isnta: instagram.com/thetechbrotherss/

[@surbhipaliwal3576]

sir uploadImage funtion kis kam ka h kuch to kam kr nhi rha

[@thetechbrotherss]

kr raha ha bhai

[@hafizabdulrehman7532]

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, ^^^^

[@thetechbrotherss]

impor the package for file and follow video carefully

[@smgraphics3012]

I have trouble in adding the image in form data in postman i got only id:20 in json response

[@muhammadaleem5463]

import 'dart:io';

[@YashGautam-ik8si]

@hafizabdulrehman import : 'dart : io' and remove import 'dart : html' package

[@FusionFinds1]

Bro thanks, please I want to send text with image can you guide me on this or recommend an tutorial for it please 🙏 🙏

[@thetechbrotherss]

I have taught the method in the end of this video do not skip

[@smgraphics3012]

I struggle to add keys in form data of postman of image i didnt get image id plz help

[@thetechbrotherss]

Check i have taught how to add send data in the end of the videos

[@smgraphics3012]

@@thetechbrotherss in the end of this video or other plz tell?

[@MuslimUmmat]

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.

[@thetechbrotherss]

This shows your pc is slow cannot handle emulator, try physical device

[@codecraftmanisha_official]

Sir i got error in File(image!.path).absolute error: 2 positional argument expected but 1 found what to do please reply

[@thetechbrotherss]

Please watch video carefully and follow along side with me.

[@codecraftmanisha_official]

@@thetechbrotherss watched more than 4 times but getting same error I stops at that point nothing can done if it is giving error 🥺

[@alexrajanand1184]

@@codecraftmanisha_official import 'dart:io' instead of import 'dart:html'

[@Beast69396]

@@alexrajanand1184 thanks buddy

[@hafizmuhammadhuzaifa1294]

thanks bro, it helped me a lot, I was stuck at that point.Long live!@@alexrajanand1184

[@leo-arbind8770]

#helpful but I have to do ,How to pick multipal image from imagepicker(gallery) and upload to the server(APIs).

[@thetechbrotherss]

use this same pacakge to pick multiple images and the upload it but it has a little different way

[@guptaatin123]

How to do the same using active camera not gallery

[@thetechbrotherss]

same way ma picture image from gallery

[@Dagra_xt]

sir ya model progress hub nhi mil raha pub.dev pa, kia kru kaha sa milaga?

[@thetechbrotherss]

to koi r use kr lo, ap apni logic use kr lo. like use boolean and if it's true show loading

[@Dagra_xt]

@@thetechbrotherss ok sir i'll try

[@REDAppleseed]

how to get the url of the uploaded images to show in widget after upload sucess

[@thetechbrotherss]

ask your developer to give you uploaded url back in response only then you will be able to show it

[@bobhero7]

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

[@thetechbrotherss]

Upgrade packages this is not an error in my code

[@ShahidAli-gc1pn]

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

[@বিষ্ময়করপ্রাণীজগৎ]

why File? gives wrong?

[@thetechbrotherss]

You are doing something wrong thats why

[@thetechbrotherss]

You can check the source code on my git account.

[@3dmagic956]

Mai multiport ka fieldname me fieldname de rha hu fir bhi api error de rha hai

[@thetechbrotherss]

Yeah third party api ha bro is liye error day rae ha used your own api then it won't give error.

[@3dmagic956]

@@thetechbrotherss bAse name bhi pass kiye to ab shi hai

[@BeyondControll]

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

[@thetechbrotherss]

Make sure you are not passing null values

[@HelloWorld-tx4qn]

can someone provide the detail on how to upload the image along with other signup detail, like email, password, name...?

[@thetechbrotherss]

request.fields["type"] = 'User'; user this before multipart file and add your email and password

[@fahimullah6752]

Sir its giving me error in run terminal

[@fahimullah6752]

i just followed your video then i copy your code from gethub but it still giving error why

[@thetechbrotherss]

State the error

[@fahimullah6752]

@@thetechbrotherss D/SurfaceView@376daa9(28026): updateSurface: surface is not valid, D/InputMethodManager(28026): startInputInner - Id : 0,

[@fahimullah6752]

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

[@anonymus3385]

bhai kuch bhi hue jaa raha he (bytestream, multipartrequest ) ye hote kya he wo to bata do ?

[@thetechbrotherss]

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/

[@anonymus3385]

@@thetechbrotherss thankyou asif bhai for solving the dout +1 follower

[@thetechbrotherss]

Thank you

[@AbdullahKhan-ql3sn]

jani how to uploaded multi pic with describtion

[@thetechbrotherss]

aise he handle krty ha but ab lsit bna lo multiport kis

[@qasimjasim7056]

Helpful thanks

[@thetechbrotherss]

Glad it helped

[@hamzaarshid7007]

What is the function of stream.cast() here?

[@smgraphics3012]

I have trouble in adding the image in form data in postman i got only id:20 in json response plz help

[@theinfluencer940]

at 5:06 the first id "_id" is not showing at my end

[@thetechbrotherss]

go to model and check they parameter name against key

[@iphone11pro-s7r]

@thetechbrotherss i need a help in flutter design ?

[@iphone11pro-s7r]

can you plz help me out

[@thetechbrotherss]

how i can help you

[@timtom6895]

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😢😢😢😢

[@thetechbrotherss]

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

[@timtom6895]

@@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😂😂😂

[@ctvtechno4992]

22:46

[@thetechbrotherss]

Yes

[@khubaibirfan9215]

Sir hum Jo image upload kr rhe hain successful upload hune ke bad image url me show hunga?

[@thetechbrotherss]

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.

[@AbdulWaris-t4o]

sir mera image picker nhii add horaha

[@thetechbrotherss]

kya issue ha

[@harshverma9140]

bhia % wali loading kse show krte h

[@thetechbrotherss]

Bro different package available ha pub.dev par search kr lo.

[@maazafridi2090]

sorry but this video mein aap nay siraf khud coding kii haii... samjaii nai haiii...

[@thetechbrotherss]

Agree actually sometimes aisa ho jata ha

[@Malang445]

can you also upload files using this api? please need this fast

[@thetechbrotherss]

Yes

[@satyajeetsingh5038]

im a beginner and mujhe kuch v samajh nii aaya ye video

[@thetechbrotherss]

Please watch from start to this playlist

[@ukashaanwar9451]

What does this method do. stream.cast();

[@thetechbrotherss]

search it bro

[@romzanali9930]

it worked

[@thetechbrotherss]

It will work

[@ctvtechno4992]

23:18

[@thetechbrotherss]

?

[@SehrishMoujahid]

meray postman mein sirf 1d:20 aya ha

[@thetechbrotherss]

check latest docuementation

[@abhishek4ever]

Plase Make Video For Multiple Image Upload

[@thetechbrotherss]

Ping me on install i will share the code with you.

[@shashwatssp]

I could not understand 🙁

[@thetechbrotherss]

Watch playlist from start

[@shashwatssp]

@@thetechbrotherss Okay Sir !!

[@makeinpro]

can http put to upload file image?

[@thetechbrotherss]

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.

[@fixcodedesign2165]

ok ..... . . . . . . . . . .ok . . . . . . . .ok. . . . . . . . . .ok

[@thetechbrotherss]

hahhaha ok

[@CodeWithMaya07]

Explain in english...

[@thetechbrotherss]

ok

[@halithhamja6107]

how to check that image which is stored by us

[@thetechbrotherss]

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.

[@rishirajjangid6072]

[@thetechbrotherss]

😁