{"id":135274,"date":"2025-11-10T07:49:28","date_gmt":"2025-11-10T07:49:28","guid":{"rendered":"https:\/\/phppot.com\/?p=24562"},"modified":"2025-11-10T07:49:28","modified_gmt":"2025-11-10T07:49:28","slug":"react-file-upload-with-preview-and-drag-and-drop-support","status":"publish","type":"post","link":"https:\/\/sickgaming.net\/blog\/2025\/11\/10\/react-file-upload-with-preview-and-drag-and-drop-support\/","title":{"rendered":"React File Upload with Preview and Drag-and-Drop Support"},"content":{"rendered":"
by Vincy<\/a>. Last modified on November 20th, 2025.<\/div>\n

This example contains a React drag-and-drop file upload with file type and size validation. It connects backend to upload files to the server via Axios.<\/p>\n

The workflow allows users to drop files to upload and shows file preview below the drop area. This file upload example includes the following featured functionalities.<\/p>\n

    \n
  1. Drag and drop<\/a><\/li>\n
  2. File validation<\/li>\n
  3. Uploading to backend<\/li>\n
  4. Saving file path to database<\/li>\n
  5. Preview after upload<\/li>\n
  6. Error handling<\/li>\n<\/ol>\n

    It is easy to integrate into any React application, since it is structured with separate components for the upload and preview UI.<\/p>\n

    \"React<\/p>\n

    React UI with file upload interface<\/h2>\n

    Two React components created for this file upload UI. Those are UploadBox and FilePreview.<\/p>\n

    The UploadBox is the drop area for dragged files to be uploaded. Once upload completed, file thumbnails are shown in a preview box by using the FilePreview component.<\/p>\n

    The FileUpload JSX handles the following processes before uploading a file.<\/p>\n

      \n
    1. File validation<\/a> about its extension and size.<\/li>\n
    2. Handling errors or success acknowledgement for UI.<\/li>\n
    3. Preparing form data with the file binaries.<\/li>\n<\/ol>\n

      \"react<\/p>\n

      src\/components\/FileUpload.jsx<\/code><\/p>\n

      import { useState } from \"react\";\nimport axios from \"axios\";\nimport SERVER_SIDE_API_ROOT from \"..\/..\/config\";\nimport FilePreview from \".\/FilePreview\";\nimport UploadBox from \".\/UploadBox\";\nimport \"..\/..\/public\/assets\/css\/style.css\";\nconst FileUpload = () => { const [files, setFiles] = useState([]); const [dragActive, setDragActive] = useState(false); const [uploading, setUploading] = useState(false); const [errorMsg, setErrorMsg] = useState(\"\"); const allowedExtensions = [\"jpg\", \"jpeg\", \"png\", \"gif\", \"pdf\", \"doc\", \"docx\", \"txt\"]; const MAX_FILE_SIZE = 2 * 1024 * 1024; const uploadFiles = async (fileList) => { setErrorMsg(\"\"); const safeFiles = []; const rejectedFiles = []; fileList.forEach((file) => { const ext = file.name.split(\".\").pop().toLowerCase(); if (!allowedExtensions.includes(ext)) return rejectedFiles.push(\"Invalid file type\"); if (file.size > MAX_FILE_SIZE) return rejectedFiles.push(\"Maximum file size is 2MB.\"); if (file.size <= 0) return rejectedFiles.push(\"Empty file\"); safeFiles.push(file); }); if (rejectedFiles.length > 0) { setErrorMsg(rejectedFiles[0]); setUploading(false); return; } if (!safeFiles.length) return; const formData = new FormData(); safeFiles.forEach((file) => formData.append(\"files[]\", file)); setUploading(true); const delay = new Promise((resolve) => setTimeout(resolve, 800)); try { const res = await Promise.all([ axios.post(`${SERVER_SIDE_API_ROOT}\/file-upload.php`, formData, { headers: { \"Content-Type\": \"multipart\/form-data\" }, }), delay, ]); const uploadedFiles = res[0].data.files.filter((f) => f.status === \"uploaded\"); setFiles((prev) => [...prev, ...uploadedFiles.map(f => safeFiles.find(sf => sf.name === f.name))]); } catch { setErrorMsg(\"Server error \u2014 please try again later.\"); } setUploading(false); }; const handleDrop = async (e) => { e.preventDefault(); setDragActive(false); await uploadFiles(Array.from(e.dataTransfer.files)); }; return ( <div className=\"upload-wrapper\"> <UploadBox dragActive={dragActive} uploading={uploading} errorMsg={errorMsg} handleDrop={handleDrop} setDragActive={setDragActive} > <\/UploadBox> <FilePreview files={files} uploading={uploading} \/> <\/div> );\n};\nexport default FileUpload;\n<\/code><\/pre>\n
      PHP file upload endpoint<\/h2>\n
      The PHP script validates the received file binary before uploading to the server directory. If the validation passes, this script give name to the file with a unique random id<\/a>.<\/p>\n
      Once the PHP move_uploaded_file() saves the files to the directory, this code inserts the target path to the database<\/a>.<\/p>\n
      drag-drop-file-upload-api\/file-upload.php<\/code><\/p>\n
      <?php\nheader(\"Access-Control-Allow-Origin: *\");\nheader(\"Access-Control-Allow-Methods: POST, GET, OPTIONS\");\nheader(\"Access-Control-Allow-Headers: Content-Type\");\ninclude \"db.php\";\n$uploadDir = \"uploads\/\";\n$response = [];\nif (!file_exists($uploadDir)) { mkdir($uploadDir, 0777, true);\n}\n$allowedExtensions = ['jpg', 'jpeg', 'png', 'gif', 'pdf', 'txt', 'doc', 'docx'];\n$maxFileSize = 2 * 1024 * 1024; foreach ($_FILES['files']['name'] as $key => $name) { $tmpName = $_FILES['files']['tmp_name'][$key]; $extension = strtolower(pathinfo($name, PATHINFO_EXTENSION)); $size = $_FILES['files']['size'][$key]; if (!in_array($extension, $allowedExtensions)) { $response[] = [ \"name\" => $name, \"status\" => \"blocked\", \"message\" => \"File type not allowed (.{$extension})\" ]; continue; } if ($size > $maxFileSize) { $response[] = [ \"name\" => $name, \"status\" => \"blocked\", \"message\" => \"Maximum file size is 2M.\" ]; continue; } if ($size <= 0) { $response[] = [ \"name\" => $name, \"status\" => \"blocked\", \"message\" => \"Empty file\" ]; continue; } $uniqueName = uniqid() . \"_\" . basename($name); $targetPath = $uploadDir . $uniqueName; if (move_uploaded_file($tmpName, $targetPath)) { $stmt = $conn->prepare(\"INSERT INTO uploaded_files (file_name, file_path) VALUES (?, ?)\"); $stmt->bind_param(\"ss\", $uniqueName, $targetPath); $stmt->execute(); $response[] = [ \"name\" => $name, \"path\" => $targetPath, \"status\" => \"uploaded\" ]; } else { $response[] = [ \"name\" => $name, \"status\" => \"failed\", \"message\" => \"Error moving uploaded file.\" ]; }\n}\necho json_encode([\"success\" => true, \"files\" => $response]);\n?>\n<\/code><\/pre>\n
      Drop area to place the dragged files<\/h2>\n
      It contains UI elements to define the file drop area. The drop box uses onDragOver callback to highlight the drop area on hover.<\/p>\n
      And, the onDrop callback prepares the form data to post the dropped file binary to the server.<\/p>\n
      \"react<\/p>\n
      src\/components\/UploadBox.jsx<\/code><\/p>\n
      const UploadBox = ({ dragActive, uploading, errorMsg, handleDrop, setDragActive }) => ( <> <div className={`upload-box ${dragActive ? \"active\" : \"\"}`} onDragOver={(e) => { e.preventDefault(); setDragActive(true); }} onDragLeave={() => setDragActive(false)} onDrop={handleDrop} > <h3 className=\"upload-title\">Drag & Drop Files Here<\/h3> <p className=\"upload-text\">Files will upload automatically<\/p> <\/div> {uploading && <p className=\"uploading-text\">Uploading...<\/p>} {errorMsg && <p className=\"error-text\">{errorMsg}<\/p>} <\/>\n); export default UploadBox;\n<\/code><\/pre>\n
      Showing file preview with thumbnails<\/h2>\n
      The FilePreview component displays the uploaded files in a list format. It will show its thumbnail, name and size.<\/p>\n
      If an image upload, the preview will show the image thumbnail. It a document type file is uploaded, the default icon is shown to the preview screen.
      \"React<\/p>\n
      src\/components\/FilePreview.jsx<\/code><\/p>\n
      const FilePreview = ({ files, uploading }) => { if (!files.length) return null; return ( <div className=\"preview-list\"> {files.map((file, i) => ( <div key={i} className=\"preview-row\"> {file.type?.startsWith(\"image\/\") ? ( <div className=\"preview-thumb-wrapper\"> <img src={URL.createObjectURL(file)} alt={file.name} className={`preview-thumb ${uploading ? \"blurred\" : \"\"}`} \/> {uploading && ( <div className=\"preview-loader\"> <img src=\"\/assets\/image\/loader.svg\" alt=\"Loading...\" \/> <\/div> )} <\/div> ) : ( <div className=\"file-icon\"><\/div> )} <div className=\"file-info\"> <p className=\"file-name\">{file.name}<\/p> <p className=\"file-size\">{Math.round(file.size \/ 1024)} KB<\/p> <\/div> <\/div> ))} <\/div> );\n};\nexport default FilePreview;\n<\/code><\/pre>\n
      How to set up this application<\/h2>\n
      The below steps help to set up this example to run in your environment. After these steps, start the npm dev server and run the React drag and drop app.<\/p>\n
        \n
      1. Download the source and unzip into your computer.<\/li>\n
      2. Copy the drag-drop-file-upload-api<\/code> into the PHP web root.<\/li>\n
      3. Create a database file_upload_db<\/code> and import the SQL script in the drag-drop-file-upload-api\/sql<\/code><\/li>\n
      4. Configure database details with db.php<\/code><\/li>\n
      5. Configure the PHP endpoint URL in React in src\/config.js<\/code><\/li>\n<\/ol>\n
        Conclusion<\/h2>\n
        I hope the React code provides a modern file upload interface. The drag-and-drop, file validation, preview rendering and database insert is a stack of features enriches the example code. This code well-structured and ready to integrate with an application easily. If you want any add-on feature to this example, please let me know.<\/p>\n
        References:<\/strong><\/p>\n
          \n
        1. HTML drag and drop UI<\/a><\/li>\n
        2. Axios API request config option<\/a><\/li>\n<\/ol>\n
          Download<\/a><\/p>\n
          \n
           \"Vincy\" <\/div>\n
           Written by Vincy<\/a>, a web developer with 15+ years of experience and a Masters degree in Computer Science. She specializes in building modern, lightweight websites using PHP, JavaScript, React, and related technologies. Phppot helps you in mastering web development through over a decade of publishing quality tutorials. <\/div>\n<\/p><\/div>\n
            <\/p>\n
          \n
          Related Tutorials<\/h2>\n<\/p><\/div>\n
           \u2191 Back to Top<\/a> <\/p>\n","protected":false},"excerpt":{"rendered":"
          by Vincy. Last modified on November 20th, 2025. This example contains a React drag-and-drop file upload with file type and size validation. It connects backend to upload files to the server via Axios. The workflow allows users to drop files to upload and shows file preview below the drop area. This file upload example includes […]<\/p>\n","protected":false},"author":2,"featured_media":135275,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[65],"tags":[],"class_list":["post-135274","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-php-updates"],"_links":{"self":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts\/135274","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/comments?post=135274"}],"version-history":[{"count":0,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts\/135274\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/media\/135275"}],"wp:attachment":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/media?parent=135274"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/categories?post=135274"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/tags?post=135274"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}