ImgBB Image Example
ImgBB Website
ImgBB API Documentation
{ if (!key) { alert('Please enter your API Key.'); return; } if (!filename) { alert('Please enter a filename.'); return; } if (!image) { alert('Please select an image file.'); return; } isLoading = true; try { const formData = new FormData(); formData.append('key', key); formData.append('name', filename + '.jpeg'); formData.append('image', image); /** * @typedef {Object} ImgbbResponse * @property {Object} data * @property {string} data.id * @property {string} data.title * @property {string} data.url_viewer * @property {string} data.url * @property {string} data.display_url * @property {number} data.width * @property {number} data.height * @property {number} data.size * @property {number} data.time * @property {number} data.expiration * @property {Object} data.image * @property {string} data.image.filename * @property {string} data.image.name * @property {string} data.image.mime * @property {string} data.image.extension * @property {string} data.image.url * @property {Object} data.thumb * @property {string} data.thumb.filename * @property {string} data.thumb.name * @property {string} data.thumb.mime * @property {string} data.thumb.extension * @property {string} data.thumb.url * @property {Object} data.medium * @property {string} data.medium.filename * @property {string} data.medium.name * @property {string} data.medium.mime * @property {string} data.medium.extension * @property {string} data.medium.url * @property {string} data.delete_url * @property {boolean} success * @property {number} status */ /** * @type {ImgbbResponse} */ const result = await fetch('https://api.imgbb.com/1/upload', { method: 'POST', body: formData, }).then(response => response.json()); if (!result.success) { throw new Error('Invalid API Key or Upload Error'); } filename = ''; image = null; $refs.imageFileInput.value = ''; await db.images.add(result.data); // alert('Upload successful!'); isOpenedSuccessModal = true; } catch (error) { console.log(error); alert('Upload failed: ' + error.message); } finally { isLoading = false; } }">
FileName
Upload to ImgBB
Upload Successful!
Your image has been uploaded successfully.
Close
{ const allImages = await db.images.toArray(); images = allImages; }">load
Size:
View Image