How to POST & SAVE Files using SvelteKit in 5 minutes

all right so in this video I'm going to show you guys how to upload images in spel kit so the first thing we're going to do is open up the terminal inside your code editor and then we're going to run npm in its SP and then we're just going to press enter and just we're just going to choose the skeleton project and we're going to choose typescript syntax and then no additional options then we're going to choose npm install so then we're going to also install some of the types packages for node so we're going to do npm install dve Dev at types SL node so then once everything is done installing we're just going to run npm rev and then close the terminal so then right here in the source folder or actually we're going to create a folder inside the route called files so then what we're going to do is go to the source folder and go to the routes folder and create a new file called Plus page. server. Ts so then the first thing we're going to do is import everything that we need especially the fs package and also the path package from nodejs and then we're going to create an object that's going to contain the actions and then we're just going to create one function called upload file this is going to contain the logic for the actual uploading of the file and saving of the file inside our file system so then we're just going to get access to the form data that we get from the form and then we're just going to get file name right here so then we can get out of the C the catch block and redirect the user so they can actually see the file that they uploaded and then we're just going to get access to the file that we get from the form data and then we're going to verify to see if it's an actual image and not empty and then we're going to get the current directory name using process. CWD so then we're actually going to get the file name of the file in our local file system so that we can actually upload it and then we're just going to upload data like this and then we're just going to say we're going to write file sync so we're just going to write the file to our file system which is going to be to this directory and the file folder the files folder you can see right here and then it's going to append the file's name so if it's going to be image.png it's going to be file image.png G and then right here all we're just doing is converting this array buffer into a u array so that it can actually be uploaded then we're going to catch any errors that pops up and then once we're done catching errors we check to see if the file name has any is actually valid or set we just say that if it's not set we just throw an error and if it is set we're just going to redirect them to where the actual file is placed at so then we can close this file and then we can open the plus page. spelt file so then what we're going to do is create a script tag with the Lang property set to TS and you can see that we're importing the forms from our action data this form just points to the return data that we get from this form action so then we could close the file system and then if you want you could even hover over it and you can see that message is equal to string as we have specified in our page. server. TS so then we're just going to create a header and a form action pointing to the actual form action that we have on the server you can check out my video on form action so you can see more so you can learn more about this so we obviously whenever we post images we have to say ank type multiart and form data this is just spel Kip convention and also for web security and then we're going to say an input with a type of field but we're not going to specify what file types they can actually upload so then we're just going to have a button called submit file so we can actually submit the file then if there is any error from the form you can see that message string or it's null so you can see it's possibly null we're just going to say we're just going to display the message if it's not null so then we're going to actually style the page right here we're saying that the error message is going to be color of red so then we can actually close these files and then in the routes folder we create a files folder and then inside of here we could also create a file called dot dot dot and no we could do bracket dot dot dot file and then closing bracket so then in here we're going to just have Plus server. Ts and this is going to take care of actually sending the file to the server or actually sending the file to the client so then we import everything that we need and then we export an asynchronous function called get so whenever the user sends a get request here we're just going to send back the data or the image and then we're just going to get uh access to the directory name using the CWD function and then we're going to create a tri catch block and inside here we're just going to return a new response with the reading we're going to read the file from where we got access to it so if the user said uploaded is/ image.png and they wanted to get access to it using this and it's up here and uploaded in our files we could they could actually have access to it over here so you see that their name is just having access to this but the par the pam. file is actually having access to the file that's inside of the files folder so then we're going to catch any errors that take place and then we're just going to throw errors right here once that's done we can save the file and then we can open up the terminal and go to Local Host so then once we're going to do that we're going to choose file so once we have something uploaded we can actually submit the file we can actually submit file and then boom once we have access to it we can actually see it in our browser and then you could even see if you go to your file system inside your code editor you can see that it's uploaded inside our files folder you can even refresh this page and you can see that we get access to it again let me know if you guys have any requests for anything specifically that I'm willing to do thank you guys for watching I hope you have I hope you guys have a great day

Channel: Daniel Gorra

Views: 503

Keywords: Coding, Programming, JavaScript, React, Svelte, How to code, How to, Learning

Id: XJPr2ha-Jy8

Length: 5min 26sec (326 seconds)

Published: Fri Apr 05 2024