Image upload example using urlsession in swift ios
Vložit
- čas přidán 13. 04. 2020
- Upload image in swift can be done in multiple ways with URLSession and in this video we will be covering upload image using base64 in swift, upload image using byte array in swift, upload image using multipart form data in swift. This swift video tutorial provides all the image upload example in swift ios. Apart from these three methods for uploading images in swift, there are other ways too but these are the most commonly used methods.
We will be using the HTTPUtility that we created in our API series for this using URLSession which we will use to upload the images and hence it's very important that you watch the API series to know more on the HTTPUtility.
Swift API series: • URLSession: Get and po...
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
✅ Subscribe to the channel and stay ahead of everyone by following the right way for writing clean code in swift. 🔥🔥🔥🔥🔥
🔗Click on the link to subscribe: czcams.com/users/codecat?sub...
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-----------------------------------------------------------------------------------------------------------------------
📥 Download the source code from
Github: github.com/codecat15/CZcams-...
Google Drive: drive.google.com/open?id=1XKg...
-----------------------------------------------------------------------------------------------------------------------
🎶 Royalty-free Music: www.bensound.com
############################################
Connect with me on social media
📧: codecat15@gmail.com
Twitter: / codecat15
Facebook: / code.cat.792
Github: github.com/codecat15
###########################################
#uploadImageInSwift #uploadImageExampleSwift #uploadImageiOS
I am sharing a gist for multi-part upload image just in case if the one I explained in the demo does not work for you, hope it helps
Gist link for multi-part image upload: gist.github.com/codecat15/6c1eaa5b7ea48b26b10d907fef68abf2
Do share this video with your iOS developer friends and show them how easy it is to upload an image on the server without using third party libraries
This was really helpful to understand how request is made in multipart form and what is the meaning of each line. I saw same code in stack overflow but I didn't understand them hence didn't use them. Thank you for this video :)
Hello Ganesh, welcome to the channel, Multi-part is a little tricky and I am glad this video was helpful. Please feel free to ask questions and do share the content with your ios group.
Its Really Great Man, please keep going, I am learning swift & often look around for help, but never came across a guy who Explains things the way you did. Awesome Thanks for making the Video🙌
Hey thanks Sumit, am glad these videos were eloquent and resourceful to you. If you have any questions then please do feel free to ask them i will be happy to answer your questions.
Also do share this channel with your friends and help them by showing how easy swift programming is 😊
@@CodeCat15 for sure🔥👍
Like the detail explanation of multipart form data. :)
We can actually optimize that code and make it even more simple than writing all that string but for now i wanted to show everyone what it looks like so that it can be optimized later.
If you have any questions regarding this topic then please do ask and don’t forget to like and share this channel with your iOS group
Great tutorial. Thank you!
Thank you, am glad thus was helpful
Great tutorial ! Thank you!
I am glad this was helpful Dhaval
Your videos are amazing. You actually explain things very easily and I like that you code on Xcode with BGcolor white as it is more visible and comfortable for us. thanks a lot for making these videos.
Welcome to the channel Akanksha, thank you for your bright words. I am glad these videos are helpful. About that white bg color i have recently switched to a dark theme coz did a poll on my instagram and many devs did complain about the white bg color so i had to switch to dark bg so sorry if you see dark bg color in next videos.
Please do feel free to ask questions on this topic and do share the video with your iOS group on social platforms
@@CodeCat15 I am facing some issue with sending array of images. My API is accepting multiple images with one more parameter.
If I need to send one image then I can pass its data with other parameter but now I have to pass array of images. Now if I insert all image data into one array then how the server will distinguish between images. Please tell me how would I achieve this.
You would need to set mime type if its an image, some api need that the one i made in the demo does not require it but its a good practice to include it. Push your code on git if you still facing issues i can check it out
@@CodeCat15 I am setting mime type but how the data of different images can be distinguished in a single array?
if possible then please make a video on this. I have read all the comments and you have already promised other people to make video on this topics. Please please do help. I can't upload my app code on git hub. Sorry for that.
Really Appreciate your work man!
I am glad the video was helpful Yogesh
@@CodeCat15 Yeah It is.
@@YogeshPateliOS I follow both of you. You guys are really doing great work and can easily understand your explaination. Thank you so much 🤗
@@shwetatalmale8023 thank you 😄
Finished the API series today. Thanks a lot Ravi, it was really great learning.
Good thing is you don't use booking language/examples which makes easier to understand what need to be used and why.
Thank you Akhil, I always try to avoid giving bookish examples coz everyone does that and they are very repetitive. I am glad this series was helpful. Please feel free to ask questions on API parsing here or on iOS discord server cafe.
Great.......
Waiting for this explanation since I started working in iOS for 1.5+yrs.. really helpful..
Can we get an video on image caching Sir with native swift code?
Hey @Suraj welcome to the channel and thank you for your comment. I am happy to tell you that I will try to upload the video on image caching as soon as possible, if you have any question that you feel are unanswered in this video please do feel free to ask them and do share this channel with your iOS group on whats app or facebook
Sir I know little bit about byteArray and base64 but I want one explanation video from your side. please explain
Hi sir, great to see a nice way and simple to present this. can you please make a video for making a dynamic dropdown using table view as apple does not gives direct ui for dropdown.
Mostly dropdowns in iOS are done via Picker because that is native to the iOS ecosystem and that's what the users are more prone to see and are aware of, unless you want something replicating the web then in that case you would have to spend sometime creating a custom control on your own or search for a third party library that satisfies all the use-cases for the dropdown for your project.
very nice video sir...🤘
please make video on auto layout..iphone and ipad both..
Pahele to maybe ios architecture pe release karunga mai video coz vo janna bahut jaruri hai, fir uske baad for sure i will make videos on autolayouts 😁 btw mere channel k playlist mai kuch videos hai jo aapko pasand aaye as a beginner so do see them as well 👍 and koi bhi doubt ho to plz do ask 👨💻
Hey code cat,
Please explain the use of .self after structure name, when to use it and what it is doing.
Thanks
heyy, where did you get that requestBody parameter in httpUtility? i couldn't find it in your previous video
very helpful but being a backend developer as well dint get what should backend api contains
This video was presented as a demo for the swift developers assuming there’s already an API, i myself code the API in .net core. I can help you out with that if you are also using the same technology to make apis
Your content is really helpful...
Can you please make a video on Navigation show\hide feature like whatsup\facebook app?
That's a good suggestion Vaibhav, let me add that to the list
ok lets say, if my API has several parametrs like: chatId, senderId, receiverId, image, message, userToken. my endpoint urlString is going to be different. What I have to put where image:? I put request.file and i tried to print whole urlString it has too many strings
Nice video. I want to ask if there is a way to upload images to the server without converting to .pngData or .jpeg?
Hi brother, I was wondering If you make videos on TableViews scenarios or challenges like Checkboxes, Multiple selections, Multiple sections, and items there, dealing with images in table view cell (making UI interaction smooth while scrolling) that we face while dealing with table views in a separate table view playlist. It's just as a suggestion, It would be really helpful.
You know i was thinking about the same thing, before the core data video but then I just ended up with core data, but the minute I finish core data series I will turn my attention to more UI centric solutions.
Code Cat Nice! So we have few topics now! VIPER and UI related problems that we face! I’ll be looking forward for these videos! You are doing a great work and I highly appreciate this brother! And also for your quick responses ❤️
@@AnuragKashyap17 thanks man, sometimes I may not respond back so quickly coz of the time zone issues like if you comment at 11:00 AM IST I am as sleeping at that time, but when I get up I will surely get back to all the missed comments. Cheers 🍻
Code Cat I mean If I am getting a reply in 1 day or 2 that is considered to be a quick reply to me! 😅
Hahahah cool cool
great video, can you make another one about how to do upload images from files in the background
Url session already runs on async thread and uploads the images on a separate thread without impacting the main thread,
however when you say background uploads i am assuming you want the is to upload some offline stored images to be send to the server? Is that correct?
@@CodeCat15 I mean when the user closes the screen or goes back to home screen, how to make the upload task keep running
Is this possible to upload image in background???
@@shubhamshankarjoshi3463 yes you surely can, by using the background operations
I do not know base64 and byte array
What we can do, If we lose the internet connection after 40% image uploaded.
and continue the image uploading from 40% after connected with internet.
Please create a video for byte array or base64
Hello Vaibhav, welcome to the channel, I am thinking of doing a series on data structures would try to include them as well :)
Hi, can you help me I want to upload video from iPhone to server using multipart-form. is it similar to image uploading?
No, uploading videos requires more bandwidth than an image, depending on the size of the file you may have to do file chunking and then upload the file to the server.
File chunking is preferred algorithm used to send large files to server.
@@CodeCat15 OK thank you for help
Can you let us know how multiple images can be uploaded in server with base64 format
Short answer for this is i would use concurrent queues for this coz you don’t want to post images one by one unless there’s a need for it, mostly i just send it parallel to the server so that all of them are posted quickly and sometimes the solution is also based on the count of images you are trying to send to the server like is it 3 or 30? A question to you would be does your api accepts multiple images? Or u need to send those image one by one?
@@CodeCat15 its not like i m facing this situation , but have seen alot of videos for uploading image in server in multiform, but i would like to explore more header type like base64 formurlencode etc with more complex situations, like multiimages with more efficency, would love to have your videos on queue.
One thing i like your videos Good explanations..one suggestion you are posting similiar kind of videos which is already there, try some different likes queue handling multiple api,obersever pattern etc...
Thanks for the explanation, I will add multiple images in my notes to do a video on this asap, regarding the topics you see I want to cover the basics first coz if we don't get it right then the foundation is never strong enough, I did made a video on observer pattern though hahaha but I agree with you as the days go by I will come up with more complex topics and will try my best to simplify them.
do you have the API part ? i wish to understand how API handle post from swift
Hey Lim welcome to the channel, the code that I demonstrate in this video tutorial can be downloaded from either GitHub or Google Drive and the link for the same is given in the video description. However I have also made an HTTPUtility which handles the posting to an API and can be used as cocoapod, check that out on my github page when you have time, I am working to add multipart to this utility which will be released soon.
I hope I was able to answer your question, if not then please do ask
github.com/codecat15/HttpUtility
@@CodeCat15 hi Code Cat. you demonstration on the swift part is very clear. Just i can't get the Image Post API in your Swagger UI . i rewrote it using .NET WebAPI, however the API couldn't receive any data from swift POST
Here's the thing about my API I was on a trial service of azure and I think the trial period is complete and I removed the image api from the swagger documentation and I think that's the issue that you are facing,
however I want to help and make sure you do a successful post so I made some changes and re-enabled the image API so that you can give it a try and do your posting. Check the swagger documentation for your reference. I hope this helps if not then let me know and I will try my best to sort any roadblocks for you
api-dev-scus-demo.azurewebsites.net/swagger/index.html
I am a .net developer myself if you are facing issues with the API then do let me know that too, I used .net core for building those APIs
@@CodeCat15 here's my API that handle image post. from the model , API able to retrieve the "filename", but the "attachement" show empty.
[AllowAnonymous]
[Route("api/Customer/Upload")]
[HttpPost]
public RtnImageRequest Upload(ImageRequest r)
{
RtnImageRequest rtnImageRequest = new RtnImageRequest();
ApiHelper.apiAccessLog apiLog = new ApiHelper.apiAccessLog();
apiLog.SetXmlIn(Request, r);
try
{
rtnCustomerKYC.Status = "D";
rtnCustomerKYC.BufferSize = r.attachment.Length.ToString();
}
catch (Exception ex)
{
rtnCustomerKYC.MsgCode = ex.Message;
}
apiLog.SavetoLog_ApiAccess(rtnCustomerKYC, rtnCustomerKYC.Status);
return rtnCustomerKYC;
}
In the ImageRequest model what type is the attachment? If you are trying to upload a byte array image then the attachment type has to be a byte array something like this
[DataMember]
[Required]
public byte[] Attachment { get; set; }
But if its anything apart from a byte array then like a base64 string then you can use a simple string for the same
[DataMember]
[Required]
public string Attachment { get; set; }
Hello,
please make a video for video upload..!
Hello Nadim, that's a wonderful request I will see what i can do for the same because this should be fun to implement as video sizes are crazy big so lot of complexity to background process to deal with. Let me see what i can do to fulfill this video request
struct ImageRequest : Encodable
{
let user_id: String
let role_id: String
let type: String
let filetoupload:String
}
struct ImageResponse: Codable {
let status: Int
let response, imagename, type: String
let imageurl: String
}
these are my structures and i use debugger where the code reach . so i saw that it is not going inside this part(URLSession.shared.dataTask(with: urlRequest) { (data, httpUrlResponse, error) in) in debugger in next step the debugger goes to the end line of this code and do nothing. please help
Did you give a call to resume( )?
@@CodeCat15 yeah in debugger it first goes to urlsession.shared line and then to .resume line and then function end don't go inside url session
Can you send me a gist of the code? Or upload a sample on GitHub and send me the link please
where i can find the http utility files explanation?
Hello Mehedi Hasan, welcome to the channel, the http utility code is explained in two videos
Video 1: czcams.com/video/pnMip8Gpa0w/video.html
Video 2: czcams.com/video/VzvKt71fXC4/video.html
And the utility itself is available on my GitHub account.
Hi, is possible upload an image with parameters? Do you have an example doing this? Thanks!
Hello Fabian, welcome to the channel. I am guessing you want to add the images as query string? Plz do correct me if am wrong. I strongly suggest not doing that coz query string have a length limit there’s only limited amount of data that you can send using query string. The examples shown in the demo sends the image as parameter in the post body. Let me know if i answered your question or if i got your question itself wrong.
@@CodeCat15 Thanks for answer, in my particular case I need to upload an image via POST as you do in the video, but I need add parameters to upload the image.
let parameters: [String: String] = [
"ID_USUER": "Frank"
]
Do you have an idea how can achieve this? Thanks
What’s the content type of your service? Is it form data or application/json? Coz how you send data to the server depends on the content type of your service, to know the content type you may ask the api developer OR try the service out in postman and see which body type worked.
Usually what i have shown in the demo should work in majority of the cases but then sometimes the api developer uses the same service in web and mobile and makes the content type to form-data or form url encode.
@@CodeCat15 Hi I checked service via PostMan and is a form data
I see then my friend we have to do things in a different way coz u see form data was made specifically for HTMLS coz HTML has form tag, this is not how api should be done tbh, send me an email with the parameters you want to send i will send u an extension on this and soon release a video too
What if I want to upload a video on the server with some parameters ?
There are lot of things to watch out for here, like if the file is too big and the user kills the app or cancels the upload or pauses the upload and want to continue it later or deletes the source file which was getting uploaded.
So that being said the api in this case needs to have a resumable feature or some call it upload session if they can’t do that the other option we have is uploading the file in chunks I was reading about it few days back and implemented in our of our api coz the file size was not above 500 mb but this was done for a web app
If the file is above say 200mb or even 50mb and if its a mobile upload then resumable sessions are your best bet coz you cannot directly upload a 200mb file on a low internet connection.
I would have tried breaking down the large file in chunks and then create multiple operation queue which called the api, but here’s the issue with that and again its an api thing, your api devs when they get these chunks would need to figure out and know that this chunk they received is for file A, and for that they can use batch id and md5 hash there are many ways to know this depends what they choose.
The one drive api i worked with does this, so do ask your api devs to refer those.
@@CodeCat15 thanks for the detailed reply 🙏 😊
I guess im gonna have a meeting with my backend developers then 😁
@@ahsanminhas1441 I am sure that's going to be a lengthy conversation. All the best Ahsan
Not in english. can't understand what you're saying. I was looking for an explanation of how to upload a pic to a swagger function that my principal engineer is sending me but sometimes you swap from english to another language.
Everything cool and nice, just why do you switch from language to language in the middle of the speech?)
Ah, never mind I see you already answered this question) Cool bro)
sorry for the trouble, I will try to be consistent with the language it's kind of hard when you speak the Hindi + English combo for 30+ years but I understand the zing it must cause while understanding I will work on this.
Hello sir, its a very good tutorial, i need your support.can you please make video for multiple image uploading with some other parameters?
Need your guidence in two type of condition.
1. Send multiple images with array, with param or without param.
2. Send array of images one by one with param or without param.
Is there any way to connect with you?
Any whatsapp number?
You can email or upload your code on github for what you have tried so far and i will check it out. You can connect with me on email codecat15@gmail.com or on facebook @codecat15
Code Cat thank you so much sir
Hey no problem buddy, just send in what you have tried so far and we will make those multiple images post to the server 😊 btw do let me know if you have any questions on this topic and do share this with your iOS group
How to add array of int in parameters of multipart using moya?
Hello Jawed, welcome to the channel, if you don't mind I would like to ask a question Why are you even using Moya? Moya is a wrapper around Alamofire and Alamofire is a wrapper around URLSession? So is there any technical reason why you are using Moya and not URLSession directly?
Well i was asked to use it, i know moya is a wrapper around alamofire ,actually i want to upload an image with parameters, and there is also an array of int in the parameters
@@hudajawed4332 You know its very unfortunate when senior devs don't think before why they are selecting a third party and what the native framework offers, but if you are using Moya I would check out their example which mentions how you can do it, you should use the requestParameter option which they provide and dump the int array there, but still try to be the voice of reason because Moya is just a wrapper around a wrapper which I feel is just too much to do something as simple as making API requests.
github.com/Moya/Moya/blob/master/docs/Examples/Basic.md
Thank you so much for your help..It means alot :)
@@hudajawed4332 I am glad I could help you Jawed :) Let me know if you have any additional questions will be happy to help and do share this channel with your iOS group, and please do talk with your senior about not using third party to do something simple because its just unwanted dependency which does not provide any value for doing something which can be easily achieved by the native classes.
Why did you ignore “mime-type” ???
it depends on the api if mime type is needed or not, in my case as you can see it was not required but its a good practice to include mime type in the request header or you can also use content-type for the same, so the api developers can help you out if they have used those headers in their code and if they have then we should include them as well.
Hello, thanks to video. In my case I'm working on API, where I have to send image as a message in chat. SendMessageAPI returns [.chatId, .userFrom, .userTo, .message]. I already successfully sending txt message, but I have no idea how can I send image by using your this methods. No Firebase I'm using. I'll be thankful to any help. Thanks
the thing is you can send the image using the API but you have to write logic to display what image you have sent in the chat window just like messenger or whatsapp, I would suggest divide your solution in multiple steps, first create the UI to just attach the image and show it in the chat window, second is show some activity indicator which would mimic that its trying to upload the image or send the image in the chat window and third is where you talk to your API devs about which format or http headers are needed for the image i.e. is it byte array or multi-part form etc
@@CodeCat15 I'm sorry, I noticed your comment right now. Thank you for your reply. Last time we left an image sending functionality to later on. Now I did everything you said about displaying the fake images in chat. API dev says to me that I have to look at code inside the project that prior developers have already done for user avatar. They used Alamofire, and API is different
half Arab and half English what i'am supposed to understand?
Apologies Diego.
You may download the source code of the topic from the link given in the video description am sure it will help you out and if not please feel free to ask questions.
The language used in the video is Hindi which is the common language in India, I’ll try to add English subtitles to the video.
Thank you for your patience.
why would u speak 2 language in a video ???
The place where I grew up this is how most of the people spoke and the same grew up on me. I try to use one language but then unknowingly I start speaking the other which I know can be an issue to some so I apologize if the switch in the language has caused any inconvenience to you.
don't know much about this make video