Blog
Plugin: Upload Note Images to ImgBB
author avatar image
Published by Jordan Handy June 26, 2024
Last changed 3 months ago
   views

name

Upload to imgBB Photo Storage

icon

file_upload

setting

API Key

setting

Image Expiration (true or false. Default: false)

setting

Expiration Time

description

Allow uploading images to the imgBB service

instructions

This plugin allows you to upload images from your notes to the imgBB service. If you would like to store your images somewhere other than Amplenote, and store them in a central location (perhaps you store images from multiple different apps or multiple different purposes in imgBB) then this plugin serves to help.


To configure:
1. Start by adding your API key to ensure that images can be uploaded
2. Should the images expire? Default is false
2. If image expiration is true, optionally, configure image expiration (in seconds, minimum 60). This will purge the upload from imgBB after the specified time. It may be of use. Note: After delete, the image will not be visible via your imgBB account, but there is some caching done on the ImgBB CDN. This means that the images will remain accessible and viewable via Amplenote until the CDN cache expires.


To use:
1. Open the image options menu
2. If the image has not yet been uploaded to imgBB, an "Upload Image to ImgBB" option will appear. A success message will follow if the upload was successful

Note:
ImgBB CDN looks to have a cache time of around 72 hours. This means that even after an automatic expiry, the URL leading to your uploaded image will still be accessible for approximately 3 days

Video:

Showcased in video is also the Markdown plugin by David Trapp to verify source markdown was in-fact changed.

open_in_new


Screenshot:
open_in_new



linkChangelog

June 26, 2024

v1.1

Added ability to mass upload all images in note to imgBB

v1.0

Initial version

Upload single files to ImgBB

What's Next

Uploading all images in single note to imgBB

linkCode block

// Javascript updated 2024-06-26, 5:23:49 p.m. by Amplenote Plugin Builder from source code within "https://github.com/jordanhandy/amplenote-imgbb-plugin"
{
// Settings
constants:{
settingAPIKey: "API Key",
settingImageExpiration: "Image Expiration (true or false. Default: false)",
settingExpirationTime: "Expiration Time"
},
 
// Actions
noteOption:{
"Upload all note images to ImgBB":{
run: async function(app,noteUUID){
if(app.settings[this.constants.settingAPIKey] == ''){
await app.alert("No API key specified. Uploads will fail. Please specify a key");
return;
}
try{
let noteContent = await app.getNoteContent({ uuid: noteUUID });
const matches = [...noteContent.matchAll(/!\[[^\]]*\]\((.*?)\)/g)];
if(matches && matches.length > 0){
for(let match of matches){
noteContent = noteContent.replace(match[1], await this._uploadFile(app, match[1]));
}
}
const replacement = await app.replaceNoteContent({ uuid: app.context.noteUUID }, noteContent);
await app.alert("All note image content replaced successfully.");
 
}catch(err){
await app.alert('Unable to replace some image content. Please validate your settings, or contact plugin developer for support');
console.log('plugin error',err);
}
}
}
},
 
imageOption: {
"Upload Image to ImgBB": {
run: async function (app, image) {
if(app.settings[this.constants.settingAPIKey] == ''){
await app.alert('No API key specified. Uploads will fail. Please specify a key');
return;
}
try {
const src = image.src;
const noteContent = await app.getNoteContent({ uuid: app.context.noteUUID });
// Replace src original URL with changed URL
const newContent = noteContent.replace(src, await this._uploadFile(app, src));
// Replace content with embed URL
const replacement = await app.replaceNoteContent({ uuid: app.context.noteUUID }, newContent)
await app.alert("Content replaced successfully.");
 
} catch (err) {
await app.alert('Unable to replace image content. Please validate your settings, or contact plugin developer for support');
console.log('plugin error',err);
}
},
// Check function whether to show the image option or not
// If already uploaded to imgBB, don't show option
check: async function (app, image) {
const src = image.src;
if (src.startsWith("https://i.ibb.co")){
return false;
}
return true;
}
}
},
// Append to form for upload
async _uploadFile(app, src) {
let formData = new FormData();
formData.append('image', src);
formData.append('key', app.settings[this.constants.settingAPIKey]);
// If expiration was specified
if (app.settings[this.constants.settingImageExpiration] == 'true') {
formData.append("expiration", app.settings[this.constants.settingExpirationTime]);
}
const options = {
method: "POST",
body: formData
};
let result = await fetch('https://api.imgbb.com/1/upload', options);
let data = await result.json();
// Return imgBB embed URL
return data.data.display_url;
},
}