File Transfer App for Windows - Part 3 - Basic GUI

hi there this is a series of videos where i go through the creation of a simple file sharing application for windows i'm building the application in parts to make it easy to test as i go so in part one i created a udp service and part two i created the tcp service and in this part i'm going to create the gui and rework some of the existing code for the the broadcast and for the transfer of the files to better fit an event-driven platform such as winforms so without further a further ado let's get started the previous video i made a little bit of a mistake uh and i um i'll go into what happened afterwards but uh the way that i rectified it was the get header size uh i returned position plus i made that position plus three so i changed the position plus four i'm actually going to change that to length and then i'm going to rename that to length and so return length like this so that's a little bit more understandable so that's the first change that i'm going to do in this one it's already made in the i already made the the plus 4 change in the video 2 branch in github but i'm just changing that to length there um and then the other thing i did was inside the program here i added this little buffer here to to wait until the the transfer is finished what i'm going to do though is i'm going to go in here and then begin right uh at the very end there it's got complete i'm going to have an event here i'm going to say public event event handler um transfer complete um and then uh when it gets to here i'm gonna say that dot invoke this event args dot empty and so what that's going to do is that's going to signal that the the the file transfer is complete and then when we do our graphic thing which we're going to do in this video here we're going to make that happen so that's that there um this one uh i think i want to add another thing to here so i want to actually add um a a header on here so this is where we need to come up with our transfer program and i really don't know what to call it so i'm going to call it right string ms and then it's going to be um transfer program name i don't know what it's going to be and then we're just going to call this 1.0 okay and then transfer program name actually let's let me just call that header for me um version header or version info let's call it version info keep it simple and then we'll have private static read only version info equals um [Music] uh network share in 1.1 1.0 sorry and that's going to be our need to be that string and so that's going to be our version number at the very top there so when we um so that's gonna be version info so now that we have that uh we're now gonna have to do the exact thing in the receive file to check to see if we've got the the right version number so oh that's going to be public as well public so in here we're splitting that off there so instead of the first one being zero and that one being there it's going to be the header version header equals split zero one two um and we're not gonna do anything about it just now we're just gonna have that there to do check version number um and then to do process header properly because right now we're not we're not processing the header properly all we're doing is we are just taking for granted that the first line is going to be the version header the second line's gonna be the file name and then third line is gonna be a long um integer that represents the length of the actual data and then uh we'll get client connected here uh is completed and then we want to begin read um we want to also have that as when the file has completed so uh i also want to have a public public event event handler transfer completed so transfer complete and that happens way down here so we do transfer complete invoke this actually should we do begin invoke uh oh it's object sender ah it's not good no i don't want to begin invoke invoke this event empty so this is gonna ha this is gonna run across there when it's uh when that file is completed uh and maybe we want to expose the file name as well we'll see what happens when we get to the ui because we might have to like do a kind of wrapper around this for the ui so that we can know various things about it so i haven't really planned out the ui for this um but i know that i want a list and i want to see in the list the the [Music] the other computers in the network that are registered to this so um what i'm gonna do is uh i'm going to uh create that now so that's what i'm gonna do in this video so i'm gonna add new project and then this one is gonna be a uh where are we when form forms up forms that dot net framework uh this is gonna choose the dot net framework one and then i'm gonna click on next and then for this one here we're going to call this uh what are we going to call this we are going to call this the network share gui for lack of a better phrasing so i'm going to create that and that will create our gui okay what i also want to do is i want to copy so i've got my git ignore here i want to copy that to this new folder as well so that we're not copying across any files that we don't need or we're not um attaching the files to source control and then for this one here i'm just going to call this main form and it's going to ask me a bunch of questions i'm going to say yep and that's going to do that and here i want just a list right now all i want is just a list so that we can transfer files easily so i'm going to go in here and then do list box uh and then list box okay and that's about right actually for this one i'm going to change the properties of that to b uh where's anchor no it's not anchor is it it's dock dock the thing i'm looking for oh i really don't like it as in that thing there there you go doc and i want this to be fill so i just want it to just fill the entire thing there so that no matter what i do when i run this i'll set this up as oops let me set this up for just a sec so if i go to here um right now receive file is the is the default application so i'm going to set this as the startup startup project so now when i run it it's going to be here so you can see that we have our our list and it resizes depending on what we have in the list um so i need to know what um what files there are s uh what um what computers are out there so we'll get the broadcaster and we get broadcast payload so um i don't want to do this i want to [Music] broadcast this out and i want to re turn this on here i'm not making any sense what am i talking about okay so if i go to view code i want to have private broad caster and this is in here um and then broadcaster equals mu broadcaster and it's port 54000 udp and tcp can exist on the same port so we don't have a problem with that we want to do broadcaster dot say hello and then the port is whatever the port is um so for this one here we can get rid of this port because the port is to be whatever you specify because remember we did that for uh we did that for our send it program down here or say hello so this is now going to be invalid which is fine because this is just a test program so i don't really care about that anymore because we're now building the the right application the building the the full application here and i kind of wanted to break it down so that we can do like a minimum viable product for each one of these parts so that's okay so we're sending it to uh we're sending a broadcast message out to there uh we're then going to listen um to receive the client but we want to keep listening once we have received uh a message because we're constantly going to be getting messages in here so listen is only going to work once but we want it to work multiple times so we want to set this off again so that's going to be inside here and instead of client we're going to specify client line i mean it doesn't really matter because it's you're passing it in as the as the state so i mean you know you can use it whatever um and that will just continually receive those messages there so when um when we receive something we want to confirm it we want to send the sender back to the client so on message received goes to message received and then we get that information there okay so uh listen uh let's send it back to the the message received so if we send a what's the hello so if we send a hello we should send back an acknowledgement um so if we do case uh hell oh no we've done that that's okay yeah we're sending that out there so the the default is hello um so when it's received we're gonna be returning that back up to there so in our main form we want to say so we want to say say hello but we also want to listen listen so that's going to go ahead and listen in there but maybe we want to have that as a separate function so extract method and we'll call this net broadcaster like that and then we'll have broadcaster. message received plus equals um broadcaster received and then we'll create this method here generate method and then we'll say switch e message case uh hello i will send back a hello message [Music] um uh case broadcast meshes dot um add client to list send back knowledge message case uh with the confirm okay i can't remember what confirmed this for but i'm just oh i think it was confirmed for the file i don't think we're probably going to use that because it was i had an idea that we're going to use the udp for confirmation but i think we'll will not bother we'll just accept the incoming incoming file transfer for now anyway um all right okay uh so to send that back we need to send that back to the sender so that's gonna be uh the broadcaster so we're gonna say var broadcaster equals sender as broadcaster um and then we want to send a message back to the broadcast to the client that sent that to say i'm also on the network so i want to do broadcaster broadcaster.exe which we don't have just yet but we are going to have in just a sec uh and then the acknowledges we want to add that to the list so we'll leave that for just a sec so back inside our broadcaster i'm going to add a uh public void pack no and then we're going to pass in a udp sorry not a udp client sender ip endpoint uh which is going to be the client and then we're going to send that back to them so we're going to say client dot um oh right okay clients duh dot begin send uh and then we want to specify the datagram and then the bit then so that's going to be message uh message.length and then it is oh wait hang on a minute no i need to create another udp client for this so i need to say var sender equals new udp client and then the port which is going to be port sender dot send begin send and then it's going to be am i missing something no it is that one what am i doing okay is this it's this again that's all i need to do is just send this but i need to send um the receive string so the receive string is one of these um so it's an acknowledgement so i need to send back uh acknowledge okay so it's just going to be ack um encoding ascii dot get plates ack and then it's going gonna be three and then i'm gonna specify the end point which is this and i could probably put that all in one line um and that's it so we need to do that for that instead of ack though i think we should use the the ack there um and then we should do ack dot length just to be on the safe side because if we change the the the message then maybe we run into problems at least this way uh if we change the length of that we're not going to run into any problems okay so that's that done um and then on the main file here we have our list box so i'm going to call this nodes let's call it nodes so i'm going to click on this and then i'm going to change the name of it which is currently list box to lst nodes uh and then inside here i'm going to do lst nodes dot items dot add e dot point dot to string well actually i think you can specify the data item [Music] the dot member display member let's just do that as e dot client and leave it at that because i think if you just add the the object it figures it does the two string anyway although you can specify the actual um name itself i think that'll be fine um so we run this now we shouldn't get any problems it's going to ask us again because this is it this is uh the first time we're running this application so we click on allow access um and it's it's brought back us so we want to prevent that that's good though at least we know it's working so if i run this um you'll see that that uh uh i run this and it says it's acknowledging this here and so this is gonna then acknowledge it and then it's gonna add that to there so it at least it's working however uh we don't want it to do that so i'm gonna flip this around and hopefully that'll stop this from happening um although i know fine well it wasn't gonna work that way because uh these things are buffered so when this gets created this bla this broadcaster gets created uh it's just gonna sit in the buffer and wait for it so we're gonna have to ignore it somehow um but for now we're just going to leave it as is we at least we know it's working uh and that's good enough for me just now oops i've lost everything um okay so now what we need to do is we need to be able to send a file across to the other machine so the way we do that is we will um we'll wait for a right click and then we'll give it a context menu so if we go to here we can add a context menu context menu strip um so that's that there uh click on context menu strip and then we can do send file and context menu strip is going to be um cmu uh we're gonna call it um node actions sounds good and then this one here is gonna be mnu send file and that is gonna have a click event associated with it so mnu click file is gonna have associated then you click with it um and we're gonna have lstnodes.comtext menu equals menu node actions dot items zero what's items tool strip menu item collection contacts menu don't do the wrong thing hmm i'm a bedded oh context menu strip like let me look it up uh context menu and forms content okay let's see what that says context menu strip replace the context menus okay so how do you how do you set it to be that um [Music] uh so context menu equals context menu strip so i guess context menu strip doesn't extend from context menu drop down menu well that's not good hmm so how do you sign it to that then well that's rather annoying isn't it uh context menu overview forms context make sure context confusion contacts me strip did i just set that directly then can i do that maybe i can why didn't i check it first context menu strip there you go well that was that that that was easy okay so run this now uh i can right click that and then click on send file which is awesome so send file um and then i want to say just to be sure if list nodes dot selected item equals null message box please select an item else um we want to do um bar open file dialog new file open file dialog [Music] if o f d dot show dialog equals ok we want to transfer the file across and that's really what we're doing here um so we want to say um transfer equals new transfer file and then the file name is going to be ofd dot file name the host name is going to be the client that we click on so that uh is uh we need to get that out here so we need to do far client equals uh list nodes dot selected i selected item as uh ip endpoint and then hostname equals client dot address dot to string so then we're going to do hostname and then the port which is going to be the port uh and transfer dot transfer complete plus equals transfer complete um object sender event okay um and then we're going to do transfer dot start um and should we we should probably uh fix that shouldn't we so the sender's going to be the transfer file so start and then uh do we need it no i don't think we do okay i think we can just get rid of that so we can see um message box show transfer complete so just to let people know that it is still working and that the file has been transferred across okay so let's test what we have so far so i'm gonna do that here right click send file selected item is null so please select an item should pop up it does so if i select that and do send file uh we should get a dialog here so i'm going to choose repos project network send tool readme.txt or readme.md and then the client is this here the host name is that um and we're gonna be sending it to here now here is actually if i go to um where are we uh open folder file location bin debug okay so this is actually probably gonna transfer this file across so it's taking it from one location on my desk transferring across the network and plopping it down uh i'm hoping in this folder here so i'm gonna hit transfer complete here and then hit f5 uh and that does not like it because it's trying to connect the same yeah it's trying to connect to the same machine so it's not going to like it so what we're going to do now is i'm going to do what i did before which is i'm going to copy it across to i'm going to use github to transfer this across to my other machine i'm going to then compile it on that machine and then run it there and then do the transfer let's see um how this works out so i'm going to do my get fetch and get pull and that's going to grab all those things there and then i'm going to go back to my app i'm going to reload and that should reload everything there i'm going to set that as my startup project and i'm going to save it and then i'm going to run it and this will run the file here once it compiles it okay running it so yeah i want to allow access okay uh it takes a bit of time in this machine here okay so this one here the 187 is my machine here um and i've noticed that the uh when i when i run it on here you can see that this hasn't changed so this should have actually added the other machine there so we can we can debug that in just a sec i just want to make sure that we can transfer files across so what i'm going to do is i'm going to transfer uh files and because this is the i think it's in this full it it will dump it in here because this is the working folder if not it might dump it um further up um in uh what would it be inside here maybe i've got a funny feeling i think it's in inside the working folders debug so i'm gonna send a file across so i'm gonna do send file and uh i'm gonna choose repositories um github repos network send tool uh and i'm gonna send the readme file across again now i'm going to click on open and it should transfer the file [Music] um this one here seems to have crashed and this one here seems to be okay so well there you go it didn't like it so it's trying to connect to 127 and then port 54 000 and it didn't like it because there's nothing listening on it that's why okay so let's stop that let's stop on here and then we'll we'll debug a little bit more or we'll code a little bit more i should say okay so the problem is that it's not um it's not it's not waiting for something so what i think we need to do is we need to send a message to it to say get into the ready state and the way we can do that is we can use the um acknowledge uh or that other mechanism um the udp one so i'm gonna i'm gonna use that i know i said i wasn't gonna but i'm gonna uh so if we go to broadcaster uh we've got our acknowledge and then we have our confirm so we're just going to send a confirmed message to say hey we're uh we're initiating a transfer so i'm going to say public void um initiate initiating transfer uh ip endpoint client uh and it's gonna be exactly the same as this except it's gonna be um oops uh instead of con i'm gonna change that to any because it's short for initiate and i quite like the fact it's a lowercase letter it's uppercase like that so and then we're going to change that from confirm to initiate um and that's going to cause problems for us inside our main form because we've got this here switch is gonna be initiate and initiate is gonna wait for the file so we're gonna do var receiver equals new um we call it receive file um port is only 54 000 receiver dot transfer complete plus equals um you can just call it transfer complete because it's going to use the same one it doesn't really matter because it only just spits out a message um and then we're going to do receiver dot listen actually um file received complete i want to have it slightly different because i want to i want to stop listening so we have private void object sender event ours uh and i'm gonna say var receive file equals sender as receive file so once once it's finished receiving the file i want to kill it so i want to do receive file dot stop and we don't have a stop on receive file but we will in just a second so inside there we get start listen blah blah blah blah so now we're going to have uh public void stop listener dots [Music] don't know how to stop here nope listener dot stop listener equals no uh listener dot can do cancel now uh okay that's fine um and that will kill everything in there so we're going to stop we're going to set it to null once it's completed and then we'll show that that message again there so we'll do that there um and then when we send the file across before we do that we want to um uh we want to we want to make sure that people know that we're sending it so we need to do broadcaster dot transfer initiating transfer and then the client is going to client so we need to have that under here oh so we need to initiate transfer and then transfer the file across okay and then what have we missed what have we missed so broadcaster say hello listen message received um and then when we do the initiate we do that if we go to main form no if we go to broadcaster acknowledge initiate transfer oh there you go see acknowledge and then we want to change that to any and then this could be any dot length as well uh because we're initiating that and then we do initiate and okay feeling confident i am gonna do that there and then i'm going to do git status make sure i'm not going to get add star dot cs um hit commit minus m uh using udp to indicate that um using udp to indicate that a transfer is incoming okay so that's that done now i need to go over to the other computer and do the same thing well i don't need to do the same thing i just need to go and get the get and pull from get so on the the monitor that's hiding me um and i'm going to press start in a second but i'm going to start this one first so i now have this one here i've got over here um at the top here is the where we go up here we've got the the directory of this running program which will receive the file i'm very confident to receive the file now over here in this other computer so down in the bottom here um i'm starting it just now so you can see it's just starting um i didn't like that okay i can fix that that's okay i can fix that um what i can do is um i can do begin invoke uh and then all of this i'll just put in here for now and i'll do this i'll make sure i do the same thing over here i could do it um in one uh oh i gotta do this again uh i think we need to do this as an action i think you need to cast as an action uh it's a bit of a faff um i think that works yeah okay so let me try that again i'll make sure to do the same thing in the other side there okay so here we go so our 187 and that we have uh here 187 is our other machine so i do send file and i'm going to specify the readme file and we transfer it transfer complete readme is over here the system works it's all good the crowd goes wild file transfer is complete so if i double click the readme file it should open up inside here and it should say exactly that which is what the readme file says um okay that is all i'm doing for we're going to end on a high there i think that's all we're going to do just now i'm going to add that begin in here um so i'm going to do that just now before i forget uh so if i go up to here so this is because your um your cross thread operations the um or it's happening on a cross thread operation uh when it adds to the client here so uh all i need to do is um invoke which is a method on on the win form and then i'm going to call everything inside here in action and put that there um and then it is that i don't know what in here uh yeah it's all of this inside that oh that's right yeah hold it in here there we go okay that's that there um and that's what i did on the the other monitor that you saw so that is it that is what we have so far i'm going to end this video on this high and then what we're going to do in the next video is tidy up the guy a little bit tidy everything up that we need to do make it presentable and that should be pretty much it um i don't think there's much else we can do we can sort of tidy up a little bit more by um by swapping out some of the user experience parts of it so are some of the user experience parts you know giddy now um it's the ui so that instead of having just those one lines oh yeah we need to fix the one as well because it's reporting the same machine as well and it's also not reporting the the broadcast when you join so we need to fix that as well so there's a few bits and pieces we need to tie up in the next video but um yeah that's it for this one thank you so much for taking the time to watch this video it's part of a series of videos where i create a simple file transfer application for the windows operating system so windows 10 so on if you like this video please give it a thumbs up and share really really does help the channel and if you want timely reminders of when another part of the series or anytime i post up a video up then please hit the subscribe button and notification bell and youtube will work its magic and give you a notification when one of those videos goes up but yeah thank you so much again for watching and i will catch you in the next one bye

Channel: Sloan Kelly

Views: 230

Keywords: networking, winsock, c-sharp, csharp, c#, coding, gamedev, file transfer, send files, share files, copy files, network copy, rcp, warpinator, warpinator for windows, windows file share, sharing files, programming, dev, developer, winforms

Id: ZlTJ-yzxCfw

Length: 47min 16sec (2836 seconds)

Published: Sun Jun 13 2021