{file.name}
{bytesToMB(file.size)} MB{file.error}
) : (${__( 'Drag and drop files or folders', 'easy-dropbox-integration' )}
${__('or', 'easy-dropbox-integration')}
`, enableUploadBtn = true, uploaderButtonText = __('Upload', 'easy-dropbox-integration'), allowFolderUpload = true, isFormUploader = '', isRequired = false, maxFiles = '', minFileSize = '', maxFileSize = '', isWooCommerceUploader = false, overwrite = false, shortCodeID = '', showUploadConfirmation = false, uploadConfirmMsg = `${__('File(s) uploaded successfully!', 'easy-dropbox-integration')}
`, fileUploadButtonLabel = __('Select Files', 'easy-dropbox-integration'), folderUploadButtonLabel = __('Select Folder', 'easy-dropbox-integration'), uploadFileName = '', uploadImmediately = true, onUpload = () => {}, isMainUploader = false, accountId = '', } = props; const { setShowUploader, setRefresh, setIsLoading, refresh, currentPath } = useContext(ThemeContext); let { activeAccount } = EDBIData; activeAccount = JSON.parse(decode(activeAccount)); let accIdToUpload = '' !== accountId ? accountId : activeAccount['id']; const cPath = path ? path : currentPath; // Simple state - like the reference const filesRef = useRef([]); const [uploadedFiles, setUploadedFiles] = useState([]); const [inProgress, setInProgress] = useState([]); const [queue, setQueue] = useState([]); const [percentage, setPercentage] = useState(0); const [isComplete, setIsComplete] = useState(false); const [pausedItems, setPausedItems] = useState([]); const [allFilesUploaded, setAllFilesUploaded] = useState(false); const [pendingPostUploads, setPendingPostUploads] = useState(0); // Refs const uploaderRef = useRef(null); const uploaderElementRef = useRef(null); const submitBtnRef = useRef(null); const submitBtnTextRef = useRef(null); const dragCounterRef = useRef(0); // Handle isComplete state change for browser mode (close uploader, refresh) useEffect(() => { if (isComplete && !isFormUploader && !showUploadConfirmation) { setShowUploader(false); setRefresh((prev) => !prev); setIsLoading(true); } }, [isComplete, isFormUploader, showUploadConfirmation]); useEffect(() => { if (isComplete && pendingPostUploads === 0) { syncStorageUsage(); } }, [isComplete, pendingPostUploads]); // Get relative path const getRelativePath = (file) => { if (!file?.getSource) return ''; return file?.getSource?.()?.relativePath?.replace(/^\//, '') || ''; }; // Convert bytes to MB const bytesToMB = (bytes) => { return ((bytes || 0) / (1024 * 1024)).toFixed(2); }; // Upload next file const mayUploadNext = (file) => { if (!file) return; const files = filesRef.current; const currentFileIndex = files.findIndex(item => item.id === file.id); const nextFileIndex = currentFileIndex + 1; if (nextFileIndex < files.length) { processUpload(files[nextFileIndex]); } }; // Add custom file filters const pluploadAddFilters = () => { plupload.buildUrl = url => url; plupload.addFileFilter('file_ext', handleFileExtension); plupload.addFileFilter('min_file_size', handleFileSize); plupload.addFileFilter('max_files', handleMaxFiles); }; const handleFileExtension = (extensions, file, cb) => { if (!extensions) return cb(true); const ext = file.name.split('.').pop().toLowerCase(); const shouldUpload = filters.allowAllExtension ? !extensions.split(',').map(item => item.trim().toLowerCase()).includes(ext) : extensions.split(',').map(item => item.trim().toLowerCase()).includes(ext); if (!shouldUpload) { uploaderRef.current.trigger('Error', { code: 'EXT_ERROR', file }); cb(false); } else { cb(true); } }; const handleFileSize = (minSize, file, cb) => { minSize = minSize * 1024 * 1024; if (!minSize) return cb(true); if (file.size < minSize) { uploaderRef.current.trigger('Error', { code: 'SIZE_MIN_ERROR', file }); cb(false); } else { cb(true); } }; const handleMaxFiles = (maxFiles, file, cb) => { if (!maxFiles) return cb(true); let uploadedFilesLength = uploaderRef.current.files.length; if (uploadedFiles.length) { uploadedFilesLength = uploaderElementRef.current.querySelectorAll('.edbi-file-upload-list__item.edbi-file-upload-list__item--uploaded').length; } if (uploadedFilesLength >= maxFiles) { uploaderRef.current.trigger('Error', { code: 'MAX_FILE_ERROR', file }); cb(false); } else { cb(true); } }; // Handle errors const handleError = (code, file) => { let msg; switch (code) { case -600: msg = __('File size exceeds the maximum upload size.', 'easy-dropbox-integration') + `(${maxFileSize ? `${parseInt(maxFileSize)}MB` : 0})`; break; case 'SIZE_MIN_ERROR': msg = __('File size is less than the minimum upload size.', 'easy-dropbox-integration') + `(${minFileSize}MB)`; break; case 'EXT_ERROR': msg = __('This file type is not allowed', 'easy-dropbox-integration'); break; case 'MAX_FILE_ERROR': msg = __('You can not upload more than', 'easy-dropbox-integration') + ` ${maxFiles} ${__('files', 'easy-dropbox-integration')}`; break; default: // file.error could be an object, extract message msg = typeof file.error === 'object' ? file.error?.message || file.error?.error || String(file.error) : file.error; break; } file.error = msg; // Update filesRef if (filesRef.current.find(item => item.id === file.id)) { const fileIndex = filesRef.current.findIndex(item => item.id === file.id); filesRef.current[fileIndex] = file; } else { filesRef.current = [...filesRef.current, file]; } setInProgress([...inProgress]); }; // Handle file uploaded const handleFileUploaded = (file, result) => { // Remove from inProgress setInProgress(prev => prev.filter(item => item.id !== file.id)); let uploadedFile = JSON.parse(result.response); if (!uploadedFile) return; // WordPress AJAX wraps response as { success: true, data: {...} } // So we need to get uploadedFile.data.file or uploadedFile.file const fileData = uploadedFile.data?.file || uploadedFile.file; uploadedFile = { id: fileData.id || uploadedFile.id, name: fileData.name, size: fileData.size, type: fileData.type, link: fileData.link, account_id: accIdToUpload, pluploadId: file.id, path: allowFolderUpload && getRelativePath(file), }; let postData = { file: uploadedFile, account_id: accIdToUpload, }; if (isWooCommerceUploader) { postData.wcItemId = ''; postData.wcProductId = ''; } // Remove from queue setQueue(prev => prev.filter(item => item.id !== file.id)); // Increment pending post-uploads counter setPendingPostUploads(prev => prev + 1); // Post process uploaded file wp.ajax.post('edbi_post_upload', { shortcode_id: shortCodeID, ...postData, nonce: EDBIData.ajaxNonce, }).done((response) => { // Add to uploadedFiles AFTER post-upload is complete setUploadedFiles(prev => [...prev, uploadedFile]); // Decrement pending post-uploads counter setPendingPostUploads(prev => { const newCount = prev - 1; return newCount; }); if (onUpload) { onUpload(uploadedFile, response); } }).fail((error) => { // Decrement on error too setPendingPostUploads(prev => prev - 1); console.error('Post-upload failed:', error); }); // Check for next file mayUploadNext(file); }; // Process upload const processUpload = (file) => { if (!file) return; uploaderRef.current.stop(); setPercentage(0); setInProgress(prev => { return prev.find(item => item.id === file.id) ? prev : [...prev, file]; }); const filePath = getRelativePath(file); wp.ajax.post('edbi_pre_upload', { file: { name: file.name, size: file.size, type: file.type, }, path: cPath, folder: filePath && filePath.substring(0, filePath.lastIndexOf('/') + 1), account_id: accIdToUpload, shortcode_id: shortCodeID, nonce: EDBIData.ajaxNonce, }).done((response) => { uploaderRef.current.setOption('url', response.uploadUrl); uploaderRef.current.setOption('multipart_params', { nonce: EDBIData.ajaxNonce, path: response.path, account_id: response.account_id, }); uploaderRef.current.start(); }).fail((error) => { console.log(error); mayUploadNext(file); setQueue(queue.filter(item => item.id !== file.id)); setInProgress(queue.filter(item => item.id !== file.id)); setPercentage(0); // Set error to filesRef - error could be an object const errorMsg = typeof error === 'object' ? error?.error || error?.message || String(error) : error; filesRef.current = filesRef.current.map(item => { if (item.id === file.id) { item.error = errorMsg; } return item; }); if (isFormUploader) { if (queue.length === 1) { if (submitBtnRef.current?.length) { if (submitBtnRef.current.is('input')) { submitBtnRef.current.val(submitBtnTextRef.current); } else { submitBtnRef.current.text(submitBtnTextRef.current); } } } } }); }; // Get uploader options const getUploaderOptions = () => { const options = { browse_button: uploaderElementRef.current.querySelector('.edbi-browse-files'), drop_element: uploaderElementRef.current, multipart: true, multi_selection: !maxFiles || maxFiles > 1, filters: { max_files: maxFiles, file_ext: filters.allowAllExtension ? filters.allowedExceptExtensions : filters.allowedExtensions, max_file_size: maxFileSize ? `${parseInt(maxFileSize)}mb` : 0, min_file_size: minFileSize, }, init: { FilesAdded: (uploader, files) => { setIsComplete(false); setQueue(prev => [...prev, ...files]); // Update filesRef filesRef.current = [...filesRef.current, ...files]; setInProgress(prev => { let newInProgress = [...prev]; if (uploadImmediately && !prev.length) { processUpload(files[0]); newInProgress = [...prev, files[0]]; } return newInProgress; }); }, FilesRemoved: (uploader, removed) => { setQueue(prev => prev.filter(item => !removed.find(removedItem => removedItem.id === item.id))); filesRef.current = filesRef.current.filter(item => !removed.find(removedItem => removedItem.id === item.id)); }, FileUploaded: (uploader, file, result) => { handleFileUploaded(file, result); }, UploadProgress: (uploader, file) => { setPercentage(file.percent); }, UploadComplete: () => { setInProgress([]); setQueue([]); // Mark all files as uploaded - this will trigger form update setAllFilesUploaded(true); setIsComplete(true); }, Error: (uploader, error) => handleError(error.code, error.file), }, }; if (!filters.allowAllExtension && filters.allowedExtensions) { options.filters.mime_types = [ { title: __('Allowed Files', 'easy-dropbox-integration'), extensions: filters.allowedExtensions.split(',').map(ext => ext.trim()).join(',') } ]; } return options; }; // Init plupload const pluploadInit = () => { pluploadAddFilters(); uploaderRef.current = new plupload.Uploader(getUploaderOptions()); uploaderRef.current.init(); if (filters?.showFolders && allowFolderUpload) { const folderUpload = new mOxie.FileInput({ browse_button: uploaderElementRef.current.querySelector('.edbi-browse-folder'), directory: true }); folderUpload.init(); folderUpload.onchange = () => { uploaderRef.current.addFile(folderUpload.files); }; } }; // Handle Form Files const mapFiles = (files) => { return files.map(item => ({ id: item.id, account_id: item.account_id, name: item.name, size: item.size, link: item.link, path: allowFolderUpload && item.path, })); }; const updateFormFiles = () => { // ALWAYS search for the element in DOM - don't rely on ref const uploaderEl = document.querySelector('.edbi-file-browser__upload'); if (!uploaderEl) { console.error('updateFormFiles: Could not find .edbi-uploader-container element in DOM'); return; } // Find the parent wrapper (like wpcf7-form-control-wrap) that contains both uploader and hidden input const parentWrapper = uploaderEl.parentElement; const form = uploaderEl.closest('form'); if (!form) { console.error('updateFormFiles: Could not find form element'); return; } // Search for .edbi-uploaded-file-list in multiple locations: // 1. Within the parent wrapper (CF7 style - inside same wrapper) // 2. As a next element sibling (some integrations) // 3. Within the form (fallback) let uploadList = parentWrapper?.querySelector('.edbi-uploaded-file-list'); if (!uploadList) { // Check if parent wrapper itself has the class if (parentWrapper?.classList?.contains('edbi-uploaded-file-list')) { uploadList = parentWrapper; } } if (!uploadList && parentWrapper) { // Try next element sibling const nextSibling = parentWrapper.nextElementSibling; if (nextSibling?.classList?.contains('edbi-uploaded-file-list')) { uploadList = nextSibling; } } if (!uploadList) { uploadList = form.querySelector('.edbi-uploaded-file-list'); } const files = mapFiles(uploadedFiles); // If no hidden input exists, create one dynamically if (!uploadList) { uploadList = document.createElement('input'); uploadList.type = 'hidden'; uploadList.className = 'edbi-uploaded-file-list edbi-hidden'; uploadList.name = uploadFileName || 'edbi_uploaded_files'; // Insert after the uploader's parent wrapper if (parentWrapper) { parentWrapper.parentNode.insertBefore(uploadList, parentWrapper.nextSibling); } else { form.appendChild(uploadList); } } if (['fluentforms', 'formidableforms', 'gravityforms'].includes(isFormUploader)) { uploadList.value = JSON.stringify(files); } else { const formattedValue = files.map(file => { return `${file.name} - (${bytesToMB(file.size)} MB - ${file.path || ''} - ${file.link || ''})`; }).join(", \n\n"); uploadList.value = formattedValue; } // Trigger events uploadList.dispatchEvent(new Event('input', { bubbles: true })); uploadList.dispatchEvent(new Event('change', { bubbles: true })); form.dispatchEvent(new Event('input', { bubbles: true })); form.dispatchEvent(new Event('change', { bubbles: true })); // Restore button text and submit const submitBtn = form.querySelector('[type=submit]'); if (submitBtn) { if (submitBtnTextRef.current) { if (submitBtn.tagName === 'INPUT') { submitBtn.value = submitBtnTextRef.current; } else { submitBtn.textContent = submitBtnTextRef.current; } } submitBtn.classList.remove('edbi-disabled'); submitBtn.click(); } else { form.submit(); } }; // Init plupload useEffect(() => { const timer = setTimeout(() => { if (!uploaderElementRef.current) { console.warn('Uploader element ref not set, retrying...'); // Fallback to querySelector if ref is not set uploaderElementRef.current = document.querySelector('.edbi-uploader-container'); } if (!uploaderElementRef.current) { console.error('Could not find uploader element'); return; } pluploadInit(); }, 100); return () => { clearTimeout(timer); if (uploaderRef.current) { uploaderRef.current.destroy(); } }; }, []); // Handle complete - update form files and submit for form modules useEffect(() => { // Only proceed when: // 1. All files are uploaded (UploadComplete fired) // 2. Queue is empty (no more files to process) // 3. No files in progress // 4. ALL post-upload AJAX calls are complete (pendingPostUploads === 0) if (!allFilesUploaded || queue.length > 0 || inProgress.length > 0 || pendingPostUploads > 0) { return; } if (!uploadedFiles.length) return; if (isFormUploader) { // Wait a bit to ensure DOM is ready before syncing files into the form setTimeout(() => { updateFormFiles(); }, 300); } }, [allFilesUploaded, uploadedFiles, queue, inProgress, pendingPostUploads]); // Upload Processor for manual upload (when uploadImmediately is false) useEffect(() => { // Only for form uploaders with manual upload (not uploadImmediately) if (!isFormUploader || uploadImmediately) return; if (!queue.length || inProgress.length) return; if (!uploaderElementRef.current) return; const form = jQuery(uploaderElementRef.current).closest('form'); if (!form.length) { return; } submitBtnRef.current = jQuery(form).find(':submit'); if (!submitBtnRef.current.length) return; const submitBtnParent = submitBtnRef.current.parent(); submitBtnRef.current.addClass('edbi-disabled'); const handleSubmitClick = function (e) { e.preventDefault(); const isInput = submitBtnRef.current.is('input'); submitBtnTextRef.current = isInput ? submitBtnRef.current.val() : submitBtnRef.current.text(); if (isInput) { submitBtnRef.current.val(__('Uploading Files...', 'easy-dropbox-integration')); } else { submitBtnRef.current.text(__('Uploading Files...', 'easy-dropbox-integration')); } processUpload(queue[0]); }; submitBtnParent.on('click', handleSubmitClick); return () => { if (submitBtnRef.current) { submitBtnParent.off('click', handleSubmitClick); submitBtnRef.current.removeClass('edbi-disabled'); } }; }, [queue, isFormUploader, uploadImmediately]); // For uploadImmediately mode, capture the submit button reference and text useEffect(() => { // Only for form uploaders with immediate upload if (!isFormUploader || !uploadImmediately) return; if (!uploaderElementRef.current) return; const form = jQuery(uploaderElementRef.current).closest('form'); if (!form.length) { return; } submitBtnRef.current = jQuery(form).find(':submit'); if (!submitBtnRef.current.length) return; const isInput = submitBtnRef.current.is('input'); submitBtnTextRef.current = isInput ? submitBtnRef.current.val() : submitBtnRef.current.text(); }, [isFormUploader, uploadImmediately]); // Handle Form Reset useEffect(() => { if (!isFormUploader) return; const form = jQuery(uploaderElementRef.current).closest('form'); const resetForm = function (e) { filesRef.current = []; setQueue([]); setInProgress([]); setUploadedFiles([]); setAllFilesUploaded(false); setIsComplete(false); setPendingPostUploads(0); }; form.on('reset', resetForm); return () => form.off('reset', resetForm); }, [isFormUploader]); const RenderUploaderContainer = () => { return ({file.error}
) : (