imgbb-webp-uploader
Version:
A utility for converting images to WebP format and uploading them to ImgBB
121 lines (120 loc) • 10.5 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useImgBBUploader } from '../hooks/useImgBBUploader';
/**
* ImgBB Uploader Component with WebP conversion
*/
export var ImgBBUploader = function (_a) {
var apiKey = _a.apiKey, webpQuality = _a.webpQuality, maxWidth = _a.maxWidth, _b = _a.convertToWebP, convertToWebP = _b === void 0 ? true : _b, onSuccess = _a.onSuccess, onError = _a.onError, _c = _a.className, className = _c === void 0 ? '' : _c, _d = _a.buttonClassName, buttonClassName = _d === void 0 ? '' : _d, _e = _a.progressClassName, progressClassName = _e === void 0 ? '' : _e, _f = _a.progressBarClassName, progressBarClassName = _f === void 0 ? '' : _f, _g = _a.buttonText, buttonText = _g === void 0 ? 'Upload to ImgBB' : _g, _h = _a.processingText, processingText = _h === void 0 ? 'Processing...' : _h, _j = _a.showPreview, showPreview = _j === void 0 ? true : _j, _k = _a.showFileInfo, showFileInfo = _k === void 0 ? true : _k, renderCustomButton = _a.renderCustomButton, renderCustomUploadedResult = _a.renderCustomUploadedResult;
var _l = useImgBBUploader({
apiKey: apiKey,
webpQuality: webpQuality,
maxWidth: maxWidth,
convertToWebP: convertToWebP,
onSuccess: onSuccess,
onError: onError
}), selectedFile = _l.selectedFile, previewUrl = _l.previewUrl, isUploading = _l.isUploading, uploadedImage = _l.uploadedImage, error = _l.error, progress = _l.progress, originalSize = _l.originalSize, webpSize = _l.webpSize, sizeReduction = _l.sizeReduction, handleFileChange = _l.handleFileChange, uploadImage = _l.uploadImage, resetUpload = _l.resetUpload;
return (_jsxs("div", __assign({ className: className }, { children: [error && (_jsx("div", __assign({ className: "imgbb-uploader-error", style: {
margin: '0 0 16px 0',
padding: '12px',
backgroundColor: '#FEE2E2',
border: '1px solid #FECACA',
borderRadius: '4px',
color: '#B91C1C'
} }, { children: error }))), _jsxs("div", __assign({ className: "imgbb-uploader-input", style: { marginBottom: '16px' } }, { children: [_jsx("input", { type: "file", accept: "image/*", onChange: handleFileChange, style: {
display: 'block',
width: '100%',
padding: '8px 0',
marginBottom: '8px'
} }), showFileInfo && selectedFile && originalSize && (_jsxs("div", __assign({ className: "imgbb-uploader-file-info", style: {
fontSize: '14px',
color: '#6B7280',
marginTop: '4px'
} }, { children: ["Original size: ", originalSize] })))] })), showPreview && previewUrl && (_jsxs("div", __assign({ className: "imgbb-uploader-preview", style: {
marginBottom: '16px',
border: '1px solid #E5E7EB',
borderRadius: '4px',
padding: '8px',
overflow: 'hidden'
} }, { children: [_jsx("div", __assign({ style: { fontSize: '14px', fontWeight: 500, marginBottom: '8px' } }, { children: "Preview:" })), _jsx("img", { src: previewUrl, alt: "Preview", style: { maxHeight: '200px', maxWidth: '100%', display: 'block', margin: '0 auto' } })] }))), isUploading && (_jsxs("div", __assign({ className: "imgbb-uploader-progress ".concat(progressClassName), style: { marginBottom: '16px' } }, { children: [_jsx("div", __assign({ style: { fontSize: '14px', fontWeight: 500, marginBottom: '4px' } }, { children: progress < 80
? "Converting to WebP: ".concat(progress, "%")
: "Uploading to ImgBB: ".concat(progress, "%") })), _jsx("div", __assign({ style: {
width: '100%',
backgroundColor: '#E5E7EB',
borderRadius: '9999px',
height: '8px',
overflow: 'hidden'
} }, { children: _jsx("div", { className: progressBarClassName, style: {
backgroundColor: '#3B82F6',
height: '100%',
borderRadius: '9999px',
width: "".concat(progress, "%"),
transition: 'width 0.3s ease'
} }) })), webpSize && (_jsxs("div", __assign({ style: { fontSize: '14px', color: '#6B7280', marginTop: '4px' } }, { children: ["WebP size: ", webpSize] })))] }))), uploadedImage ? (renderCustomUploadedResult ? (renderCustomUploadedResult(uploadedImage)) : (_jsxs("div", __assign({ className: "imgbb-uploader-result", style: {
margin: '16px 0',
padding: '16px',
backgroundColor: '#F0FDF4',
border: '1px solid #DCFCE7',
borderRadius: '4px'
} }, { children: [_jsx("h3", __assign({ style: { margin: '0 0 12px 0', fontSize: '16px', fontWeight: 600, color: '#166534' } }, { children: "Image Uploaded Successfully!" })), _jsxs("div", __assign({ style: { display: 'grid', gap: '8px' } }, { children: [_jsxs("div", { children: [_jsx("span", __assign({ style: { fontSize: '14px', fontWeight: 500 } }, { children: "Direct URL:" })), _jsx("a", __assign({ href: uploadedImage.url, target: "_blank", rel: "noopener noreferrer", style: {
marginLeft: '8px',
fontSize: '14px',
color: '#2563EB',
textDecoration: 'none',
wordBreak: 'break-all'
} }, { children: uploadedImage.url }))] }), _jsxs("div", { children: [_jsx("span", __assign({ style: { fontSize: '14px', fontWeight: 500 } }, { children: "Display URL:" })), _jsx("a", __assign({ href: uploadedImage.display_url, target: "_blank", rel: "noopener noreferrer", style: {
marginLeft: '8px',
fontSize: '14px',
color: '#2563EB',
textDecoration: 'none',
wordBreak: 'break-all'
} }, { children: uploadedImage.display_url }))] }), _jsxs("div", { children: [_jsx("span", __assign({ style: { fontSize: '14px', fontWeight: 500 } }, { children: "Delete URL:" })), _jsx("a", __assign({ href: uploadedImage.delete_url, target: "_blank", rel: "noopener noreferrer", style: {
marginLeft: '8px',
fontSize: '14px',
color: '#2563EB',
textDecoration: 'none',
wordBreak: 'break-all'
} }, { children: uploadedImage.delete_url }))] }), showPreview && (_jsx("div", __assign({ style: { marginTop: '12px' } }, { children: _jsx("img", { src: uploadedImage.display_url, alt: uploadedImage.title, style: {
maxHeight: '200px',
maxWidth: '100%',
display: 'block',
margin: '0 auto',
border: '1px solid #E5E7EB',
borderRadius: '4px'
} }) }))), showFileInfo && webpSize && originalSize && (_jsxs("div", __assign({ style: {
marginTop: '8px',
fontSize: '14px',
color: '#166534'
} }, { children: [_jsxs("p", __assign({ style: { margin: '4px 0' } }, { children: ["Original size: ", originalSize] })), _jsxs("p", __assign({ style: { margin: '4px 0' } }, { children: ["WebP size: ", webpSize] })), _jsxs("p", __assign({ style: { margin: '4px 0' } }, { children: ["Size reduction: ", sizeReduction, "%"] }))] })))] })), _jsx("div", __assign({ style: { marginTop: '16px' } }, { children: _jsx("button", __assign({ onClick: resetUpload, style: {
backgroundColor: 'transparent',
border: '1px solid #D1D5DB',
borderRadius: '4px',
padding: '8px 16px',
fontSize: '14px',
cursor: 'pointer'
} }, { children: "Upload Another Image" })) }))] })))) : (_jsx("div", __assign({ className: "imgbb-uploader-actions" }, { children: renderCustomButton ? (renderCustomButton({
onClick: uploadImage,
disabled: !selectedFile || isUploading,
isUploading: isUploading
})) : (_jsx("button", __assign({ className: buttonClassName, onClick: uploadImage, disabled: !selectedFile || isUploading, style: {
backgroundColor: '#3B82F6',
color: 'white',
border: 'none',
borderRadius: '4px',
padding: '8px 16px',
fontSize: '14px',
cursor: !selectedFile || isUploading ? 'not-allowed' : 'pointer',
opacity: !selectedFile || isUploading ? 0.7 : 1
} }, { children: isUploading ? processingText : buttonText }))) })))] })));
};
export default ImgBBUploader;