Angular Drag and Drop File Upload to Cloudinary Using ngx-dropzone Library in TypeScript

uh Hello friends today in this tutorial I will be showing you that how basically you can use angular in order to upload files to cloudnary cloudinary is basically a cloud storage system like Google Drive and Google Dropbox but it offers a lot of features it offers compression transformation of images so we will have this drag and drop interface and we have developed this using this Library called as ngx Drop Zone this is the library which allows you to basically build this drop drag and drop interface and we will basically select files here if I select the files here if file picker will open and we have this button right here which will upload the files so after it upload the files to cloud Dairy it will basically return a Json response to us and let me also show you the demo of this application so this is my cloudery console right here media library it contains all the images that I uploaded so let's suppose I select a image right here let's suppose I select this image this image that I select here and click on upload files so if I click upload files guys you will see that this basically it returns some information about the uploaded file this is the secure URL it returns to me and all such information which is in which folder it has uploaded this the format of the file jpg height original extension and if I basically refresh my media library you will also see this image appearing right here so the image you can see guys we have uploaded this image the image is successfully uploaded inside cloudberry and you Cloud Dairy offers various options here you will see in various shapes the images are saved here so whenever you upload images to Cloud Mary it's a basic system which allows you to get files in various formats in various shapes so Cloud area offers this support inbuilt so all these things are there so we will basically look how to do this in angular so let's start the video if you are watching it for the very first time please hit that like button subscribe the channel and all the source code I have given in the description of the videos so you can get the source code by visiting the link in the description so now let's get started so for building the drag and drop interface guys we are using this slide today which is ngx Drop Zone this Library makes sure that we in it basically offers the drag and drop interface which allows the direct upload of files you can select files from your file system it will show the live preview so the command is very simple npm I and GX drop zone so what I will do is that I will basically start from scratch let me delete all the code from all the files and start from scratch let me just delete all this stuff here foreign from scratch so let me just delete all this stuff here so now basically guys this is our application and let me just run this application hello world so this is a basic angular application if you see hello world is printed out we are opening it on localhost 4200 so first of all what we need to do if you are starting this application just invoke this command npmi ngx Drop Zone just install this Library we will need this library for this applications for the drag and drop interface so I have already installed this Library this will hardly Take 5 to 10 seconds and then basically you can start your application at NG serve which will start your application at localhost 4200. so right here guys basically go to app.component.html file here and instead of hello world we need to basically this interface ngx Drop Zone this is basically a directive inside this directive guys basically it takes a option here which is change this is a actual event which will automatically trigger whenever you whenever the files are changed inside this drag and drop so this event will automatically fire this function we will write it inside our typescript code so inside this we have another ngx Drop Zone label tag this is there inside the documentation and here you can give any text here which is a drag or drop files we can say that drag and drop files like this this is actual label which will be given so if you see right here it will say that ngx drop zone is not a known element so first of all guys for that you need to go to app.module.ts file and right here register this module so what we will say is that we will say ngx Drop Zone module which will be imported from ngx drop zone and here we need to add it to the Imports array this is really important you do need to do this before you add the code inside this if you refresh now it is saying that on select is not defined so now we just need to Define just go to on app.component Dot TS file so just Define this function so just Define this function guys and now this will be your drag and drop files feature if you select automatically your file picker will open and nothing will happen because we haven't written the function yet so how we can do that process here you can change the text to any text here as I already told you here this is actual label which is appearing right here so after this we have ngx if you want to see live preview as well you can also see uh See live preview and GX drops on preview and basically we can say mg for which is we'll use a for Loop here which is let F of files and basically we will also be having this attribute of removable here we can even remove the files as well so this is set to true there will be a cross button and this removed also has the event guys so we can define a function which will pass here on remove so inside this we will Define this NG Drop Zone label and here guys basically what we will do we will show the name of the file here inside double query bracket so we will say F dot name followed by the type of the file so F DOT type so what it will do guys basically whichever file that you select right here let me Define the functions here which we haven't defined which is on remove let me Define that function as well so which is on remove so what will it will do guys basically if you see it is saying property files doesn't exist on time okay okay so we also need to define a function sorry if files array files of file is equal to empty array by default so whatever files that you select right here guys you're gonna select multiple files here so nothing will be displayed right here for that you need to basically push this so right here this function will invoke whenever files are changed this on select function so now we need to write function this one type script code right here so what we will say we can say console log event and then we can say this Dot files.push and we can push this to this empty array which is dot dot dot we will use the spread operator event dot edit files so what it will do guys basically it will show this now if you see so now it will show you the first second third and fourth file so all the files that we selected right here it also has the cross button if you click cross the files is not deleting so for that deletion process we need to write this code right here on remove so we can say here this dot files dot splice we can use a splice method and here we can say this dot files dot index of and inside this we can say we can pass the actual event and put a comma 1 we will need to remove that file which is selected so now what will happen basically the drag and drop functionality will work here if you select the files if you remove it the files will remove also so this is a drag and drop feature is completed guys we have built it using ngx Drop Zone Library this is a very simple Library allows you to basically drag and drop files and now we after this we will have a simple button which will say that upload files and whenever you click this button what should happen so all the files that you select you will create a function which will upload files with basically we will call this function guys so now we need to Define this function which is upload files so this is the actual function guys which will get invoked and here we will first of all check inside this if condition that if this dot files zero the very first file we will upload if the file is not selected then we will simply say no file selected and then basically guys what we'll say we will say this Dot files dot we can also do it for multiple files as well guys so we can basically run here a for Loop let I is equal to 0 I less than this Dot files.length I plus plus so inside this for Loop what we can do we can make basically make a data object form data we will use we can basically append here we need to append two values guys data dot append these values are the actual file the actual file that we need to upload which will be contained inside file data so we need to capture this so what I I can do is that const foreign actual file here so file data disc dot file I that's all so here you will pass the actual file and then we also need to pass basically our upload preset so in cloudinary dashboard you will get this information guys I already created preset if you go to cloudnary console guys basically uh let me show you where you will get this information go to settings here and after you go to settings you will get your Cloud name after you created your Cloud name my cloud name is coding siksha I have already created one and here if you go to upload option you just need to create a upload preset I have already created two preset here I will put this preset name which is new insta you can also create your own preset and Cloud name so I have given the name here and then we will give our Cloud name so Cloud underscore name so this will be coding section that's all so now we will basically basically write a service guys uh this is a good practice in angular you can create a service we can say ngx generate service and the service name will be cloudery upload sorry I think this needs to be Ng generate service and we can say upload service or we can directly say upload so now it will create two files guys which will be this files the actual service file so inside this file guys first of all go to app.module.ts file and here we just need to import our HTTP client module this will be needed for making HTTP request guys so add the rate angular slash common slash HTTP so this is required whenever you are making HTTP request inside your angular application so just add this and now we can basically write this service so right here at the top we can import our HTTP client from at the rate angular slash common slash http and also we will need to import observable observable obser from RX JS RX Js and basically inside the service guys we will basically pass the Constructor here which will be private HTTP which is of the client HTTP client and here we will Define a function inside the service which will upload the image and this is of the type observable so here we will basically get our data and we will return a result basically this post request HTTP dot post and the URL will be https API dot Cloud Nary c-l-o-d-r cloudberry I think the spelling is this one dot com version one underscore one slash or Cloud name which is coding siksha slash image slash upload so this is actually the end point guys and here we need to pass our data that's all here we are passing our data the actual image that we need to upload that's all this is the actual function that we defined inside the service guys now we need to inject this service inside our app.component.ts file so how we can do that we can basically make a Constructor here and you can define a variable which will basically upload upload of the type upload service so this will be imported you will see that the service will be imported and now we can use this object you can directly call this this dot upload and it contains this upload image method that we defined inside the service we are calling this method and here we need to pass our data and then we need to subscribe to this observable and now this response will come here we can simply console log the response that's all so this completes the application guys so now I can directly check inside my console here okay in the browser let me select multiple files here one two three four four files let me select I think okay we need to start the server NG serve so the application of angular is starting here so just wait it is compiled successfully so just I select here these files five files I select click upload files so what should happen here one by one you will see that guys all the files will get uploaded this is the first file second file third file fourth file and fifth file so all the files that you selected right here one by one is uploaded guys you will get this Json response and if I also check my media library you will see that these files will get uploaded so you can see that this is the first second third fourth fifth so in this easy way guys you can upload files to cloudberry inside latest version of angular I have showed you step by step if you still have some problem you can download or you can go to the description of the video to get all the source code and thank you very much for watching this video foreign

Channel: Coding Shiksha

Views: 1,357

Keywords: coding shiksha

Id: Ffof2Kws6i8

Length: 18min 57sec (1137 seconds)

Published: Sat Jul 01 2023