Uploading Images & Videos in React with the Cloudinary Upload Widget - Dev Hints

there's a lot of features and advanced capabilities that we can take advantage of in the cloudinary ecosystem but first we need to get those images and videos into cloudinary while we can manually do this with the extensive apis and sdks available we can instead use the cloudery upload widget which provides a drop-in solution to build a full upload experience to see how this works I'm going to start off in an empty react application we're looking at the code we're going to learn how we can drop in this widget right inside of the main part of the page so to start off the first thing we're going to need is to load the script inside of our application in order to get the widget code inside the widget documentation which you can find the link to inside the description we're going to head over to the sidebar where we're going to navigate to how to set up and integrate the upload widget where if we scroll down we can see our script include here which we're going to copy and inside of our react application we're going to head to the location where we can modify the template and in particular with create react app we're going to head over to the public directory where inside the index.html we're going to go to the head of the document and we're going to paste in that script right at the bottom of the head so now anytime the application loads we're going to be loading our upload widget script next instead of including all of our code inside of the primary app file we're going to create a component where we're going to include all of our upload widget code so under the components directory I'm going to create a new file called upload widget.js and inside I'm going to Define my new upload widget code where I'm going to create my new component and ultimately export it as a default of upload widget now whenever we load our upload script inside of our template file we need a way to save a reference to the code that's actually loaded so what we can do is we can use a react reference and the use effect hook so that we can say when this component renders we want to go off and find that reference and save it so at the top of my component file I'm going to import use effect and use ref from react and at the top of the component itself I'm going to create a new constant called cloudinary ref and set that equal to use ref next we want to use the use effect so that it runs when the component renders and then we can store that reference so I'm going to run use effect and inside I'm going to run a function and I'm only going to do this once so I'm going to specify an empty array but inside I'm going to say cloudinary ref.current because I need to save the current value and set that equal to window.cloudinary now to see that this is working properly we first need to import this component into our project inside of my app.js file I'm going to import my upload widget from my components upload widget and then I'm going to Simply copy that and I'm going to scroll down and paste in that new component into my project at this point if we reload the page we shouldn't see anything but inside of our component let's copy that cloudinary ref current value and let's log it out where now once the page reloads we can see that we now now have these objects logged out where we can see we have access to the upload widget API so the first thing we're going to do is we're going to actually create our upload widget so right after we set that current value we're going to say cloudnary ref.current create upload widget now this is going to be a function that we're invoking and it's going to first take in an argument where we're going to pass in our configuration where we're going to want to pass in our Cloud name and because we're doing an unsigned upload we want to also pass in our upload preset to find our cloudinary Cloud name we can head over to our dashboard we're under our Account Details we can see our Cloud name where we can click the copy button right next to it then back inside of our code we can paste in that cloud name right inside of the cloud name field in order to create an upload preset we can head over to the settings where we can then navigate over to the upload Tab and scroll down until we can see upload presets next we can click the add upload preset link where at the top we can first see that we have our upload preset name which we can change or copy and paste that right into the upload preset field but then we want to make sure that we change the signing mode to unsigned and then we can change any additional options that we want for our upload preset finally once you're happy with your configuration you can go ahead and click save now back inside of our code our create upload widget is going to take a second argument and that's going to be a new function that function is going to have two arguments an error and a result for now let's just console log out the results so that whenever we have it set up we can see the actual result now finally we need a way to open our widget so that we can actually upload something to do this we're going to return a simple Button as part of our upload widget or for the text let's just call this our upload button but whenever somebody clicks this button we want to make sure that we trigger our widget to open to do this we're going to save the reference that we're creating for our upload widget so we're going to duplicate our cloudinary refline and we're going to call this our widget ref when we use the create upload widget method it's going to actually return learn that reference to the widget so we're going to say widget ref dot current is equal to that invocation of create upload widget back inside of our button on click Handler we're going to pass in a new function and we're going to say widget ref dot current and we're going to say dot open and invoke that function and now back inside of our react application if we click that upload button we can see that we immediately get our upload modal where now if I browse my file directory and I select this picture of a jellyfish we can see with this green check mark at the top that it was successfully uploaded and we can click done to close our modal we can even confirm that this worked by heading over to our media library where now I can see this great picture of jellyfish well this was a simpler example of using the upload widget we can see more advanced examples such as being able to abstract the logic and use things like props so that we can control and manage State outside of the widget code if you want to check out the code for this more advanced example check out the link inside of the description so in review in order to take advantage of cloudery we needed a way to be able to easily upload images and videos to our media library to do this we can use the cloudinery upload widget which is an easy drop-in solution to get the full experience inside of our react application we were able to create and import a new upload widget component where after loading our upload widget script in the HTML template we were able to save a reference of our cloudnary widget SDK where we could then create a new instance of a widget and open that widget anytime a button was clicked

Channel: Cloudinary

Views: 20,187

Keywords: cloudinary, react, cloudinary upload widget react, cloudinary upload widget, upload image in react js, upload image javascript, upload images cloudinary react, upload image in react, upload video, upload video react js, upload video react, cloudinary video upload react, react image upload, react video upload, react video upload component, upload widget, upload widget cloudinary react, cloudinary react, cloudinary react upload, cloudinary react tutorial, cloudinary react widget

Id: paiO6M2wBqE

Length: 6min 55sec (415 seconds)

Published: Tue Oct 18 2022