npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

picgo-plugin-gdrive-clone

v1.0.0

Published

Upload to Google Drive and get shared link

Downloads

7

Readme

PicGo Google Drive Plugin

中文文档|En

This plugin implements the upload of clipboard images to a specified folder on Google Drive via OAuth2 authorization and retrieves the shareable link.

Usage

Configuration and Authorization

OAuth Configuration and Authorization

Currently, this plugin uses OAuth authorization with the following process:

  1. Create a Project in Google Cloud.
  2. Enable the Google Drive API.
  3. Create an OAuth consent screen.
  4. Create Credentials: Client ID and Client Secret.

In simple terms, the authorization process follows a standard OAuth flow. We configure the OAuth ClientId and Client Secret associated with Google Cloud project. Under this configuration, users need to log into their Google account and grant authorization to the project to access their Google resources.

You can directly refer to the Google documentation: Node.js quickstart. The document details how to obtain OAuth Client Id and Client Secret on the Google Cloud platform.

OAuth Configuration After configuring the OAuth ClientId and Client Secret, we can start the authorization process.

Initiate Authentication

After clicking the "Login and Authenticate" button, a webpage will open. Ensure that your webpage is logged into the Google account you want to authorize (the target user for image uploads).

OAuth Login OAuth Permission Authentication Successful

When you see this last page, it means the authorization was successful: Authentication successful!

After successful authorization, a gdrive_token.json file will be created in PicGo's configuration folder. This way, you only need to authorize once, and in the future, you can directly access Google Drive permissions through this file. Here's a feature to check the path of this token file and whether it exists:

Token File Check This is the token file's path on Mac.

Token File Path

With this, the OAuth configuration and authorization are completed.

Folder ID

We need to specify a folder as the target destination for uploading images. This folder supports both shared and team-shared folders.

Open your target folder in the browser and view the URL. The last ID in the URL is the folder's ID.

Folder ID

Copy this ID and fill it in the configuration.

Configuration with Folder ID

Other Configurations

Other Configurations

  1. Image File Prefix: Here you can add an additional prefix to all uploaded images.
  2. Append Google User Information to File Name: TODO
  3. Copy Link to Clipboard Directly: This option is to not affect the global configuration. Only copy the shareable link. For example, if our global configuration is GitHub + Markdown link, but for Google Drive, I only want to copy the link, I can enable this option.

Trigger with Keyboard Shortcut

Keyboard Shortcut

This plugin registers a keyboard shortcut for directly uploading to Google Drive. This shortcut temporarily switches the current configuration to Google Drive, uploads the image, and then switches back to the default configuration.

The purpose is to support quick uploads to two image beds. The default configuration is GitHub, and only special images are uploaded to Google Drive, such as images intended for internal sharing.

Use Cases

Why develop this plugin? It's mainly based on a need - internal image sharing and support for Google Drive Embed third-party applications. For example, we currently use ClickUp as our task management system. Since the free version of ClickUp has limited storage space, but we have a sufficiently large paid version of Google Drive, we need to upload screenshots to Google Drive and then get their shareable links to paste into ClickUp. The pasted link can directly embed the content into the page. The main advantages are:

  1. Image sharing is private, accessible only to Google accounts with the appropriate permissions.
  2. Image location changes do not affect shared links.

Future Plans

  1. Support generating external links: Reference.
  2. Support Service Account authorization method.
  3. Automation control over image names enhance.