Integrating Google Drive Image/Vedios into Your React App

Step 1: Uploading a File/Image to Google Drive

The first step in integrating Google Drive into your React app is uploading a file or image to your Google Drive. To do this, follow these simple instructions:

Log in to your Google Drive account.

Click the "+ New" button and select "File upload" or "Folder upload" to upload your file or image.

Once the upload is complete, your file will be available in your Google Drive.

Step 2: Making a Public URL/Shareable Link

To make the uploaded file or image accessible via a public URL, you'll need to generate a shareable link:

Right-click on the uploaded file in Google Drive.

Select "Get shareable link."

In the sharing settings, set the link sharing to "Anyone with the link" or "Public."

Copy the generated shareable link.

Step 3: Copy the Image ID

The shareable link you copied in Step 2 contains the file's unique ID, which you'll need to extract. Here's how:

Examine the copied link; it will look something like:

"https://drive.google.com/file/d/
1BE-WrnRJGeXzDSHQuGVIO7d6Xw3dz1Wq/view."

The file ID is the long string between /d/ and /view, in this case, 1BEWrnRJGeXzDSHQuGVIO7d6Xw3dz1Wq.

Copy this file ID as you'll use it in the next step.

Step 4: Embed the File/Image in Your React App

Now that you have the file ID, you can embed the file or image into your React application. Here's the syntax to use in this case i use image same step follows for videos also :

<img src="https://drive.google.com/thumbnail?id={Enter Your ID}&sz=w1000" alt=""/>

Replace YOUR_FILE_ID with the file ID you copied in Step 3.

Remove the Curly Brackets also so Final url something look like :-

Step 5: Using the Embedded File in React (2024 Updated )

You can now use the provided syntax to display the file or image in your React application. Simply insert the code wherever you want the file or image to appear in your app:

<img src="https://drive.google.com/thumbnail?id=1BE-WrnRJGeXzDSQuGVIO7d6Xw3dz1Wq&sz=w1000" alt="None"/>

Make sure to replace YOUR_FILE_ID with the actual file ID you obtained in Step 3.

Conclusion

By following these six steps, you can seamlessly integrate Google Drive into your React app. This allows you to upload, share, and display files and images from your Google Drive in your application, enhancing its functionality and user experience. Enjoy the benefits of cloud-based file management within your React app!