You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
and [Cloudflare R2](https://www.cloudflare.com/products/r2/), till now) and export markdown with image urls to clipboard directly.
10
-
The origin markdown in vault is still using local images.
3
+
> Seamlessly upload and manage images for your Obsidian notes across multiple cloud platforms
11
4
12
-
It will be helpful for publishing to the static site such [GitHub pages](https://pages.github.com).
5
+
## 🚀 Overview
13
6
14
-
The idea of plugin comes from the powerful markdown editor [MWeb Pro](https://www.mweb.im) I have been used for years.
7
+
This plugin automatically uploads local images embedded in your markdown files to your preferred remote image storage service, then exports the markdown with updated image URLs to your clipboard. The original markdown files in your vault remain unchanged, preserving your local image references.
15
8
16
-
During plugin development, I also referred to plugins [obsidian-imgur-plugin](https://github.com/gavvvr/obsidian-imgur-plugin)
17
-
(**the imgur uploading codes is from it**) and [obsidian-image-auto-upload-plugin](https://github.com/renmu123/obsidian-image-auto-upload-plugin). Thanks both for providing such great plugins.
9
+
### Supported Image Stores
18
10
19
-
This plugin is listed in the [Obsidian community plugins](https://obsidian.md/plugins?id=image-upload-toolkit) now.
Each image store requires specific configuration in the plugin settings. Detailed setup guides are available in the [Appendix](#appendix) section below.
43
+
44
+
## 📋 Roadmap
29
45
30
46
-[ ] support uploading images to more storages
31
47
-[x] Imgur
@@ -39,41 +55,55 @@ and copy markdown with replaced image syntax to clipboard with notification.
39
55
-[ ] more...
40
56
-[x] setting for replacing images embedded in origin markdown directly
41
57
42
-
## Contributing
58
+
## 👥 Contributing
59
+
60
+
Contributions to enhance this plugin are welcome! Here's how to get started:
43
61
44
-
To make changes to this plugin, first ensure you have the dependencies installed.
62
+
### Prerequisites
63
+
64
+
-[Node.js](https://nodejs.org/) (v14 or newer recommended)
65
+
-[npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/)
66
+
67
+
### Setup
68
+
69
+
1. Clone the repository
70
+
2. Install dependencies:
45
71
46
72
```shell
47
73
npm install
48
74
```
49
75
50
-
### Development
76
+
### Development Workflow
51
77
52
-
To start building the plugin with what mode enabled run the following command:
78
+
Start a development build with hot-reload enabled:
53
79
54
80
```shell
55
81
npm run dev
56
82
```
57
83
58
-
_Note: If you haven't already installed the hot-reload-plugin you'll be prompted to. You need to enable that plugin in your obsidian vault
59
-
before hot-reloading will start. You might need to refresh your plugin list for it to show up._
84
+
> **Note**: If you haven't already installed the hot-reload-plugin, you'll be prompted to. Enable that plugin in your Obsidian vault before hot-reloading will start. You might need to refresh your plugin list for it to show up.
60
85
61
-
### Releasing
86
+
### Building for Release
62
87
63
-
To start a release build run the following command:
88
+
Generate a production build:
64
89
65
90
```shell
66
91
npm run build
67
92
```
68
93
94
+
### Testing
95
+
96
+
Before submitting a pull request, please test your changes thoroughly and ensure they work across different platforms if possible.
97
+
69
98
---
70
99
71
-
## Thanks
100
+
## 🙏 Acknowledgements
101
+
102
+
This plugin was inspired by the powerful markdown editor [MWeb Pro](https://www.mweb.im) and builds upon the work of several exceptional projects:
-[obsidian-imgur-plugin](https://github.com/gavvvr/obsidian-imgur-plugin) - Reference implementation for Imgur upload functionality
105
+
-[obsidian-image-auto-upload-plugin](https://github.com/renmu123/obsidian-image-auto-upload-plugin) - Inspiration for additional features
106
+
-[create-obsidian-plugin](https://www.npmjs.com/package/create-obsidian-plugin) - Tooling for plugin development
77
107
78
108
---
79
109
@@ -91,25 +121,129 @@ Imgur service usually has a daily [upload limits](https://apidocs.imgur.com/#rat
91
121
- choose "OAuth 2 authorization without a callback URL" (**important**)
92
122
- Add your E-Mail
93
123
94
-
3. Copy the Client ID. (Note: You only need**Client ID**. The Client secret is a private info that is not required by this plugin. Keep it safe with you)
95
-
4. Paste this Client ID in plugin settings
124
+
3. Copy the Client ID. (Note: You only need the **Client ID**. The Client secret is confidential information not required by this plugin. Keep it secure.)
125
+
4. Paste this Client ID in the plugin settings.
96
126
97
-
### Cloudflare R2 Setup
127
+
### 🌩️ Cloudflare R2 Setup Guide
98
128
99
-
To use Cloudflare R2 for image uploads:
129
+
To configure Cloudflare R2 as your image storage solution:
100
130
101
-
1. Sign up for a [Cloudflare account](https://dash.cloudflare.com/sign-up) if you don't have one.
131
+
1. Sign up for a [Cloudflare account](https://dash.cloudflare.com/sign-up) if you don't already have one.
102
132
2. Enable R2 storage in your Cloudflare dashboard.
103
133
3. Create an R2 bucket to store your images.
104
-
4.Create an API token with permission to access your R2 bucket:
105
-
- Navigate to R2 > Overview > Manage R2 API Tokens
134
+
4.Generate API credentials for your R2 bucket:
135
+
- Navigate to `R2 > Overview > Manage R2 API Tokens`
106
136
- Create a new API token with read and write permissions
107
137
- Copy your Access Key ID and Secret Access Key
108
-
5. In the plugin settings, select "Cloudflare R2" as your image store and fill in:
109
-
- Access Key ID and Secret Access Key from step 4
110
-
- Endpoint: Your R2 endpoint URL (typically `https://<account-id>.r2.cloudflarestorage.com`)
111
-
- Bucket Name: The name of your bucket from step 3
112
-
- Target Path: Optional path template for organizing your images
113
-
- Custom Domain Name: You can use either:
114
-
- Your own custom domain if you've configured one for your bucket
115
-
- The free R2.dev URL (like `https://<random-id>.<account-id>.r2.dev`) that Cloudflare provides for public assets
138
+
5. In the plugin settings, select "Cloudflare R2" as your image store and configure:
139
+
-**Access Key ID and Secret Access Key** from step 4
140
+
-**Endpoint**: Your R2 endpoint URL (typically `https://<account-id>.r2.cloudflarestorage.com`)
141
+
-**Bucket Name**: The name of your bucket created in step 3
142
+
-**Target Path**: Optional path template for organizing your uploaded images
143
+
-**Custom Domain Name**: Choose either:
144
+
- Your own custom domain (if configured for your bucket)
145
+
- The free R2.dev URL (format: `https://<random-id>.<account-id>.r2.dev`) provided by Cloudflare for public assets
146
+
147
+
### 🐙 GitHub Repository Setup
148
+
149
+
To use GitHub as your image hosting solution:
150
+
151
+
1. Create a personal access token:
152
+
- Go to [GitHub Settings > Developer Settings > Personal Access Tokens](https://github.com/settings/tokens)
153
+
- Create a new token with `repo` scope
154
+
- Copy your token
155
+
2. In the plugin settings, select "GitHub Repository" as your image store and configure:
156
+
-**GitHub Token**: The personal access token from step 1
157
+
-**Repository Owner**: Your GitHub username or organization name
158
+
-**Repository Name**: Name of the repository to store images
159
+
-**Branch Name**: Branch to upload images to (default is `main`)
160
+
-**Target Path**: Path within the repository for storing images
161
+
-**Custom Domain**: Optional custom domain if you're using GitHub Pages with a custom domain
162
+
163
+
### ☁️ Amazon S3 Setup
164
+
165
+
To configure Amazon S3 for image hosting:
166
+
167
+
1. Create an [AWS account](https://aws.amazon.com) if you don't have one
168
+
2. Create an S3 bucket with appropriate permissions:
169
+
- Go to [S3 Console](https://console.aws.amazon.com/s3/)
170
+
- Create a new bucket with public read access (if you want images to be publicly accessible)
171
+
3. Create IAM credentials:
172
+
- Navigate to [IAM Console](https://console.aws.amazon.com/iam/)
173
+
- Create a new user with programmatic access
174
+
- Attach S3 permissions policies
175
+
- Copy the Access Key ID and Secret Access Key
176
+
4. In the plugin settings, select "Amazon S3" as your image store and configure:
177
+
-**Access Key ID and Secret Access Key**: Credentials from step 3
178
+
-**Region**: AWS region where your bucket is located
179
+
-**Bucket Name**: Name of your S3 bucket
180
+
-**Target Path**: Optional folder path for your images
181
+
-**Custom Domain**: Optional CDN domain if you've set one up for your bucket
182
+
183
+
### 🌐 AliYun OSS Setup
184
+
185
+
To use Alibaba Cloud Object Storage Service:
186
+
187
+
1. Create an [Alibaba Cloud account](https://www.alibabacloud.com) if needed
188
+
2. Create an OSS bucket:
189
+
- Go to the [OSS console](https://oss.console.aliyun.com)
190
+
- Create a new bucket with appropriate access settings
191
+
3. Generate access credentials:
192
+
- Go to [AccessKey Management](https://ram.console.aliyun.com/manage/ak)
193
+
- Create a new access key pair
194
+
- Copy your AccessKey ID and AccessKey Secret
195
+
4. In the plugin settings, select "Aliyun OSS" as your image store and configure:
196
+
-**Access Key ID and Secret**: From step 3
197
+
-**Region**: OSS region (e.g., `oss-cn-hangzhou`)
198
+
-**Bucket Name**: Your OSS bucket name
199
+
-**Target Path**: Optional directory for images
200
+
-**Custom Domain**: Optional CDN domain if configured
201
+
202
+
### 🖼️ ImageKit Setup
203
+
204
+
To use ImageKit for optimization and delivery:
205
+
206
+
1. Create an [ImageKit account](https://imagekit.io/registration/) if needed
207
+
2. From your ImageKit dashboard:
208
+
- Get your private API key from Account > Developer Options
209
+
- Note your ImageKit URL endpoint
210
+
3. In the plugin settings, select "ImageKit" as your image store and configure:
211
+
-**Public Key**: Your ImageKit public key
212
+
-**Private Key**: Your ImageKit private API key
213
+
-**URL Endpoint**: Your ImageKit URL endpoint (e.g., `https://ik.imagekit.io/yourusername`)
214
+
-**Target Path**: Optional folder structure for organizing uploads
215
+
216
+
### ☁️ TencentCloud COS Setup
217
+
218
+
To use Tencent Cloud Object Storage:
219
+
220
+
1. Create a [Tencent Cloud account](https://cloud.tencent.com) if needed
221
+
2. Create a COS bucket:
222
+
- Go to the [COS console](https://console.cloud.tencent.com/cos)
223
+
- Create a new bucket with appropriate permissions
224
+
3. Generate API credentials:
225
+
- Go to [CAM console](https://console.cloud.tencent.com/cam/capi)
226
+
- Create a new SecretId and SecretKey
227
+
4. In the plugin settings, select "TencentCloud COS" as your image store and configure:
228
+
-**Secret ID and Secret Key**: From step 3
229
+
-**Region**: COS region (e.g., `ap-guangzhou`)
230
+
-**Bucket Name**: Your COS bucket name
231
+
-**Target Path**: Optional folder for organizing images
232
+
-**Custom Domain**: Optional CDN domain if configured
233
+
234
+
### 🗄️ Qiniu Kodo Setup
235
+
236
+
To use Qiniu Kodo object storage:
237
+
238
+
1. Create a [Qiniu Cloud account](https://www.qiniu.com) if needed
239
+
2. Create a Kodo bucket:
240
+
- Go to the Kodo console
241
+
- Create a new bucket
242
+
3. Generate access credentials:
243
+
- Go to Key Management and create a new key pair
244
+
- Copy your Access Key and Secret Key
245
+
4. In the plugin settings, select "Qiniu Kodo" as your image store and configure:
246
+
-**Access Key and Secret Key**: From step 3
247
+
-**Bucket Name**: Your Kodo bucket name
248
+
-**Domain Name**: The domain bound to your bucket for access
249
+
-**Target Path**: Optional folder for organizing images
0 commit comments