Import CSV Form

GitHub Repository

Find the Import CSV Form repository on GitHub.

Overview

The Import CSV Form component simplifies the process of importing CSV files into your web application. It provides an easy-to-use interface for uploading CSV files and customizing their handling, including options for delimiters, qualifiers, and date formats.

Output

After submitting the form, the Import CSV Form component allows your frontend to send the data to your backend server. The backend can then manage the uploaded CSV file, along with specified parameters like delimiters and date formats. This facilitates smooth processing of CSV data, such as insertion into a database or other necessary manipulations on the server side.

Installation

To install the package, use npm:

npm install import-csv-form

Usage

Here's an example of how to use the ImportCsvDialog component in your React application:

import ImportCsvDialog from "import-csv-form";
import { useState } from "react";

function YourComponent() {
  const [openUploadFile, setOpenUploadFile] = useState(false);

  const handleCloseDialog = () => {
    setOpenUploadFile(false);
  };

  const handleImport = (data) => {
    // Your logic to send data to the backend
    // Example: Send data using fetch or axios
    fetch("your-backend-url", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    })
      .then((response) => response.json())
      .then((result) => {
        // Handle response from the server
      })
      .catch((error) => {
        // Handle errors
      });
  };

  return (
    <div>
      <button onClick={() => setOpenUploadFile(true)}>
        Open Upload File Dialog
      </button>
      {/* here the implementation */}
      <ImportCsvDialog
        open={openUploadFile}
        onSubmit={handleImport}
        onClose={handleCloseDialog}
        fieldsToBeOrder={[
          { label: "Operation Date", value: "operationDate" },
          { label: "Value Date", value: "valueDate" },
          { label: "Description", value: "description" },
        ]}
      />
    </div>
  );
}

Props

Name	Default Value	Type	Description
open	-	boolean	Determines whether the dialog is open or closed.
existDate	true	boolean	Indicates whether date-related fields will be displayed.
existAmount	true	boolean	Indicates whether amount-related fields will be displayed.
existOrderFields	true	boolean	Indicates whether fields order-related options will be displayed.
firstAmountColumn	'Credit'	string	The label for the first amount column.
secondAmountColumn	'Debit'	string	The label for the second amount column.
onClose	-	function	Callback function to handle the closing of the dialog.
onSubmit	-	function	Callback function to handle the submission of form data.
fieldsToBeOrder	[]	string[]	An array of field labels specifying the order of fields.
delimiters	See example below	object[]	An array of objects representing delimiter options with 'label' and 'value' properties.
qualifiers	See example below	object[]	An array of objects representing qualifier options with 'label' and 'value' properties.
datesFormats	See example below	string[]	An array of string representing date format options.
exampleFile	See example below	any[][]	A 2-dimensional array representing an example CSV file structure with data and headers.

Default Delimiters

[
  { label: "Comma", value: "," },
  { label: "Semicolon", value: ";" },
  { label: "Pipe", value: "|" },
  { label: "Colon", value: ":" },
  { label: "Space", value: " " },
  { label: "Period", value: "." },
  { label: "Hyphen", value: "-" },
  { label: "Underscore", value: "_" },
  { label: "Slash", value: "/" },
];

Default Qualifiers

[
  { label: "Double Quote", value: '"' },
  { label: "Single Quote", value: "'" },
  { label: "Backtick", value: "`" },
];

Default Date Formats

[
  "YYYY-MM-DD",
  "DD/MM/YYYY",
  "MM/DD/YYYY",
  "MMMM DD, YYYY",
  "DD MMMM, YYYY",
  "YYYY-MM-DD HH:mm:ss",
  "DD/MM/YYYY HH:mm:ss",
  "MM/DD/YYYY HH:mm:ss",
  "YYYY-MM-DDTHH:mm:ssZ",
  "dddd, MMMM DD, YYYY",
];

Default Example File

[
  [
    "first_column",
    "second_column",
    "third_column",
    "fourth_column",
    "fifth_column",
  ],
  ["DD-MM-YYYY", "DD-MM-YYYY", 120, undefined, "text"],
  ["DD-MM-YYYY", "DD-MM-YYYY", undefined, 500, "text"],
  ["DD-MM-YYYY", "DD-MM-YYYY", 790, undefined, "text"],
];

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

mhamed-monastiri/input-csv-form-package