Merge pull request Smart Naming for Files and Modular code by anshika-guleria · Pull Request #176 · Durgeshwar-AI/pdfToPng

anshika-guleria · 2026-05-31T04:14:02Z

feat: add reusable utilities for file naming and download handling in frontend

🔀 Pull Request

📌 Issue Reference

Closes #158

📝 Summary

This PR improves the frontend code structure by introducing reusable utilities and removing repeated logic across different conversion pages (PDF to PNG, image to PDF, SVG, etc.).

Earlier, every page had its own separate implementation for file naming and download functionality.
This led to code duplication and inconsistent behavior across pages.

Changes made:

Created a reusable file naming utility with improved and smarter naming logic (without AI), so file names are more consistent and structured across all pages.
Created a reusable download button utility to handle download logic in one place.
Refactored all conversion pages to use these shared utilities instead of individual implementations.

✅ Checklist

My code follows the project's coding conventions
I have tested all impacted features

🏅 Open Source Program Participation

Program Name: GSSoC 2026

💬 Additional Notes

I tried my best to keep the changes minimal, clean, and consistent with the existing codebase. This is mainly a refactor to improve structure and reusability, not a UI change.

I have also made file names editable

Please let me know if any improvements are required.

…ixing feat: add Back to Home navigation button in sidebar Signed-off-by: Anshika Guleria <anshikaguleria532@gmail.com>

vercel · 2026-05-31T04:14:07Z

@Durgeshwar-AI is attempting to deploy a commit to the Durgeshwar's projects Team on Vercel.

A member of the Team first needs to authorize it.

Durgeshwar-AI · 2026-05-31T10:37:05Z

@anshika-guleria please fix the merge conflicts.

anshika-guleria · 2026-05-31T12:43:54Z

I hope i did correctly please check @Durgeshwar-AI

Copilot

Pull request overview

Refactors the frontend conversion tools to centralize download handling and provide consistent, “smart” suggested output filenames that users can edit before downloading.

Changes:

Added reusable filename utilities (buildDownloadName, sanitizers) and a shared download helper (triggerDownload).
Introduced useDownloadFilename hook + OutputFilenameInput component and wired many tool pages to use them (via ToolPageTemplate and/or page-specific UI).
Updated multiple pages to use toolName / outputExtension / filenameDetail instead of per-page getDownloadFilename logic.

Reviewed changes

Copilot reviewed 29 out of 30 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
frontend/src/utils/fileNames.js	New shared filename building + sanitization utilities.
frontend/src/utils/downloadFile.js	New shared download helper to consolidate anchor/objectURL logic.
frontend/src/hooks/useDownloadFilename.js	New hook to manage suggested + user-edited filenames and resolution logic.
frontend/src/components/OutputFilenameInput.jsx	New reusable “output filename” input UI with basic sanitization.
frontend/src/components/FileUploadArea.jsx	Adds optional `OutputFilenameInput` rendering in the upload area.
frontend/src/components/ToolPageTemplate.jsx	Integrates filename hook + download helper; exposes filename context to callers.
frontend/src/pages/RotateFlip.jsx	Uses template filename context to name transformed image downloads.
frontend/src/pages/RemoveBg.jsx	Migrates to `toolName`/`outputExtension` for naming consistency.
frontend/src/pages/PDFWatermark.jsx	Uses `useDownloadFilename` + `triggerDownload`; adds filename input.
frontend/src/pages/PdfSplit.jsx	Uses `useDownloadFilename` + `triggerDownload`; adds filename input.
frontend/src/pages/PdfSign.jsx	Migrates to `toolName`/`outputExtension` for naming consistency.
frontend/src/pages/PdfRotateFlip.jsx	Uses `useDownloadFilename`; sets suggested detail based on action; updates download name.
frontend/src/pages/PdfPng.jsx	Adds smarter per-page/zip naming based on extracted page text + shared naming utility.
frontend/src/pages/PdfMerge.jsx	Attempts to refactor merge flow to shared filename/download utilities (currently inconsistent).
frontend/src/pages/PdfDocx.jsx	Uses `useDownloadFilename` + `triggerDownload`; adds filename input.
frontend/src/pages/ImageWbp.jsx	Migrates to `toolName`/`outputExtension` for naming consistency.
frontend/src/pages/ImageWatermark.jsx	Uses `useDownloadFilename` + `triggerDownload`; adds filename input.
frontend/src/pages/ImageUpscale.jsx	Migrates to `toolName`/`filenameDetail`/`outputExtension` for naming consistency.
frontend/src/pages/ImageToSVG.jsx	Uses `triggerDownload` and template filename context for SVG downloads.
frontend/src/pages/ImageResize.jsx	Uses `triggerDownload` and template filename context; adds filenameDetail.
frontend/src/pages/ImagePdf.jsx	Attempts to migrate to `ToolPageTemplate` (currently incomplete/broken).
frontend/src/pages/ImageOCR.jsx	Uses `triggerDownload` and template filename context for text downloads.
frontend/src/pages/ImageMetadata.jsx	Uses `triggerDownload` and template filename context for stripped/clean downloads.
frontend/src/pages/ImageJpg.jsx	Migrates to `toolName`/`outputExtension` for naming consistency.
frontend/src/pages/ImageGrayScale.jsx	Migrates to `toolName`/`outputExtension` for naming consistency.
frontend/src/pages/ImageDpi.jsx	Uses `triggerDownload` and template filename context; adds filenameDetail.
frontend/src/pages/ImageCompress.jsx	Switches to shared naming utility for compressed output names.
frontend/src/pages/ImageBase64.jsx	Uses `triggerDownload` and template filename context for base64 text downloads.
frontend/src/pages/DocxPdf.jsx	Uses `useDownloadFilename` + `triggerDownload`; adds filename input.
frontend/package-lock.json	Lockfile update (adds `peer: true` flags in multiple entries).

Files not reviewed (1)

frontend/package-lock.json: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

-
-  return blob.arrayBuffer();
-};
+import { useCallback } from "react";


  return (
-    <div className="w-full max-w-[760px] mx-auto p-10 text-center flex flex-col justify-center items-center bg-linear-to-br from-[#f6f8fa] to-white rounded-2xl shadow-[0_10px_30px_rgba(0,0,0,0.08)] overflow-hidden">
-      <h1 className="mb-10 text-[#1a1a2e] text-5xl font-bold tracking-tight relative inline-block after:content-[''] after:absolute after:w-15 after:h-1 after:bg-linear-to-r after:from-[#4361ee] after:to-[#7209b7] after:-bottom-2.5 after:left-1/2 after:-translate-x-1/2 after:rounded-sm">
-        Image to PDF
-      </h1>
-      <p className="text-gray-500 mb-8">
-        Convert multiple images into a single PDF and arrange them in the exact
-        order you want.
-      </p>
-
-      <form onSubmit={createPdf} className="w-full flex flex-col items-center">
-        <div
-          ref={dropAreaRef}
-          className={`w-full border-2 border-dashed rounded-2xl p-8 mb-6 cursor-pointer transition-all duration-300 flex flex-col items-center select-none ${
-            isDragging
-              ? "border-[#3b82f6] bg-[#ebf5ff] scale-[1.02]"
-              : "border-[#c7d2fe] bg-[rgba(239,246,255,0.6)] hover:border-[#4361ee] hover:-translate-y-1 hover:shadow-[0_8px_15px_rgba(67,97,238,0.1)] hover:bg-[rgba(229,240,255,0.8)] active:translate-y-0 active:shadow-[0_4px_8px_rgba(67,97,238,0.08)] active:bg-[rgba(219,234,254,0.9)]"
-          }`}
-          onDragEnter={handleDragEnter}
-          onDragOver={handleDragOver}
-          onDragLeave={handleDragLeave}
-          onDrop={handleDrop}
-          onClick={handleAreaClick}
+    <ToolPageTemplate
+      title="Image to PDF"
+      description="Convert an image into a PDF file, right in your browser."
+      accept="image/*"
+      validateFile={validateFile}
+      onSubmit={createPdf}
+      toolName="pdf"
+      outputExtension="pdf"


+function MergePdf() {
+  const [files, setFiles] = useState([]);
+  const { downloadFilename, setDownloadFilename, resetDownloadFilename, resolveFilename } =
+    useDownloadFilename({
+      originalName: files[0]?.name,
+      tool: "merged",
+      detail: files.length > 1 ? `${files.length} files` : undefined,
+      extension: "pdf",
+      enabled: files.length > 0,
+    });


+      const blob = await res.blob();
+      triggerDownload(blob, resolveFilename("merged.pdf"));
+      setStatusMessage("PDFs merged successfully! File downloaded.");
+      setStatusType("success");


      const blob = await response.blob();
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement("a");
-      a.href = url;
-
-      const extension = file.name.includes(".")
-        ? file.name.slice(file.name.lastIndexOf("."))
-        : ".png";
-      const baseName = file.name.includes(".")
-        ? file.name.replace(/\.[^.]+$/, "")
-        : file.name;
-      a.download = `${baseName}_stripped${extension}`;
-
-      document.body.appendChild(a);
-      a.click();
-      document.body.removeChild(a);
-      URL.revokeObjectURL(url);
+      triggerDownload(
+        blob,
+        resolveFilename?.(`${file.name.replace(/\.[^.]+$/, "")}_stripped.png`, nameOverrides),
+      );


    const blob = await response.blob();
-    const url = URL.createObjectURL(blob);
-
-    const a = document.createElement("a");
-    a.href = url;
-
-    const baseName = file.name.replace(/\.[^.]+$/, "");
-    const extension = file.name.includes(".") ? file.name.split(".").pop() : "png";
-
-    a.download = `${baseName}_privacy_cleaned.${extension}`;
-
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-
-    URL.revokeObjectURL(url);
+    triggerDownload(
+      blob,
+      resolveFilename?.(`${file.name.replace(/\.[^.]+$/, "")}_privacy_cleaned.png`, nameOverrides),
+    );


Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Durgeshwar-AI · 2026-06-01T06:31:45Z

@anshika-guleria It has multiple problems please fix them.

anshika-guleria · 2026-06-01T06:32:55Z

I am on it

Merge pull request Durgeshwar-AI#153 from Jwngma-basumatary/feature-f…

e5afb05

…ixing feat: add Back to Home navigation button in sidebar Signed-off-by: Anshika Guleria <anshikaguleria532@gmail.com>

anshika-guleria changed the title ~~Merge pull request #153 from Jwngma-basumatary/feature-fixing~~ Merge pull request May 31, 2026

anshika-guleria changed the title ~~Merge pull request~~ Merge pull request Smart Naming for Files and Modular code May 31, 2026

Merge branch 'main' into add-smart-naming

68c7d0e

Durgeshwar-AI requested a review from Copilot May 31, 2026 15:12

Copilot started reviewing on behalf of Durgeshwar-AI May 31, 2026 15:12 View session

Copilot AI reviewed May 31, 2026

View reviewed changes

Potential fix for pull request finding

dcf3cd1

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Merge pull request Smart Naming for Files and Modular code#176

Merge pull request Smart Naming for Files and Modular code#176
anshika-guleria wants to merge 3 commits into
Durgeshwar-AI:mainfrom
anshika-guleria:add-smart-naming

anshika-guleria commented May 31, 2026 •

edited

Loading

Uh oh!

vercel Bot commented May 31, 2026

Uh oh!

Durgeshwar-AI commented May 31, 2026

Uh oh!

anshika-guleria commented May 31, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Durgeshwar-AI commented Jun 1, 2026

Uh oh!

anshika-guleria commented Jun 1, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

anshika-guleria commented May 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔀 Pull Request

📌 Issue Reference

📝 Summary

Changes made:

✅ Checklist

🏅 Open Source Program Participation

💬 Additional Notes

Uh oh!

vercel Bot commented May 31, 2026

Uh oh!

Durgeshwar-AI commented May 31, 2026

Uh oh!

anshika-guleria commented May 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Durgeshwar-AI commented Jun 1, 2026

Uh oh!

anshika-guleria commented Jun 1, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

anshika-guleria commented May 31, 2026 •

edited

Loading

anshika-guleria commented May 31, 2026 •

edited

Loading