CSV Files are files in plain text form, which makes them straightforward for developers to create. Knowing how to upload CSV file in React JS is very important. Having this knowledge helps you understand how to create tabular forms of objects from CSV files in react file upload.
Knowing how to upload CSV file in React JS is a good way of improving your React file upload feature. Before we learn how to upload a CSV file in React JS, we need to understand some basics.
What is a CSV file?
A CSV file is a comma-isolated file that allows a tabular form of saved data. CSV files are similar to a regular spreadsheet because it has a .csv extension rather than a .xls. Developers can use CSV files with any spreadsheet – like Google Sheets or Microsoft Excel. The basic difference between CSV files and other spreadsheets is that they cannot save columns, formulas, rows, and cells.
Why are CSV files used?
CSV files help organizations send out a large amount of data to a more focused data set. Developers can easily import CSV files into new storage or spreadsheet, no matter their software. Some reasons for the usage of CSV files in React JS file upload include:
- Many users broadly accept its usage
- Simple to sort out and alter
- Software organizations utilize it for their business
- Leading spreadsheet applications use it
How to upload CSV file in React JS?
Developers can upload files in React JS in different ways. We will use the drag and drop method to upload our CSV File.
1. Know which library to use for your CSV file upload in the upload file React
Developers can use various kinds of libraries to upload CSV files in React JS. In this section, we will use the latest version of React File Drop library 3.0.7 to upload the CSV Files. The code for it is as follows:
npm i react-file-drop2. Does the browser accept the React upload file feature?
Before you start working on creating an upload feature, you need to determine if a browser supports the feature. Developers often make this mistake, and most users will not use the interface because of their browsers. Browsers like Safari, IE Edge, and Chrome support React JS file uploads.
-
File Component Call
You have to add a name for the file drop component and render it to call a file. The code is as follows:
<FileDrop >
</FileDrop>After you have done that, add another event in the components with the codes below:
<FileDrop
onFrameDragEnter={(event) =>
console.log('onFrameDragEvent',event)
}
onFrameDragLeave={(event) =>
console.log('onFrameDragEvent',event)
}
onFrameDrop={(event) =>
console.log('onFrameDropEvent',
event)}
onDragOver={(event) =>
console.log('onDragOverEvent', event)}
onDragLeave={(event) =>
console.log('onDragLeaveEvent', event)}
onDrop={(files, event) =>
console.log('onDropEvent', event)}
>
</FileDrop>By doing this, you have created several events.
-
Knowing how to handle several events
After creating these events, the next thing to add is information about the events. You can do the following:
- onFrameDragEnter – Start dragging files over the frame you are using
- onFrameDragLeave – Stop dragging files over the frame you are using
- onFrameDrop – Drop your files in any location
- onDragOver – Stop dragging the file over the spot
- onDragLeave – This event helps you to abscond from the spot
- onDrop – Drop your files on the spot
-
Implementation of the function for the onDrop tag
Handling the onDrop event is the next thing to do. The following codes will help you call work on the drop event:
<FileDrop
onFrameDragEnter={(event) => console.log('
onFrameDragEvent',event)} onFrameDragLeave={(event) => console.log('
onFrameDragEvent',event)} onFrameDrop={(event) => console.log('onFrameDropEvent', event)}
onDragOver={(event) => console.log('onDragOverEvent', event)}
onDragLeave={(event) => console.log('onDragLeaveEvent', event)}
onDrop={(files, event) => this.onDropFunction(files) }After that, implement the function by calling the onDropFunction and passage of files as a framework. So write the following codes to do this:
drag_and_dropFile ( files) {
for(var i in files){
var file_type=files[i].type
var file_size=files[i].size
if( file_type === “text/CSV”){
console.log(“CSV file”)
}
else{
console.log(“provide valid file type”)
} }}
You can now check the type and size of the file with the result of the above code. After that, implement authentications with the following codes;
for (i in files){
var file_size=files[i].size
var file_size_in_unit
if (file_size < 1024) {
console.log(file_size + " Bytes");
file_size_in_unit=file_size
}
else if (file_size < 1048576) {
console.log("KB:" + (file_size / 1024).toFixed(3) + " KB");
file_size_in_unit=(file_size / 1024).toFixed(3)
}
else if (file_size < 1073741824) {
console.log("MB:" + (file_size / 1048576).toFixed(2) + " MB");
file_size_in_unit= (file_size / 1048576).toFixed(2)
If(file_size_in_unit > 25){
console.log("File size is greater than 25MB")
}
}
}The results of the codes will show the authentication.
-
Import CSV File into react
After you have done the above steps, the next thing is to import the CSV files into the react JS file.
import React, { Component } from 'react'
import { FileDrop } from 'react-file-drop
export class AddCSVFile extends Component {
constructor(props) {
super(props);
this.state = { }
}
drag_and_dropFile ( files) {
for (i in files){
var file_type=files[i].type
var file_size=files[i].size
if( file_type === “text/CSV”){
console.log("CSV file")
}
else{
console.log("provide valid file type")
} }
}
render() {
return (
<div>
<FileDropAfter writing these codes, you have successfully uploaded your CSV files into the react JS.
How to upload CSV files into react JS with FileReader?
If you cannot use the react file drop library, file reader is another suitable library to use and the following steps will help you upload your CSV files.
-
Create a form to enable the upload of CSV File
Use the following codes to create a form:
function App(){ return ( <div style={{ textAlign: “center” }}> <h1>REACTJS CSV IMPORT EXAMPLE </h1> <form> <input type={“file”} accept={“.csv”} /> <button>IMPORT CSV</button> </form> </div> ); }
-
Use FileReader to load the upload the CSV file with the form
After creating a form, use the following codes to upload the CSV files:
import React, { useState } from "react";
function App() {
const [file, setFile] = useState();
const fileReader = new FileReader();
const handleOnChange = (e) => {
setFile(e.target.files[0]);
};
const handleOnSubmit = (e) => { e.preventDefault(); if (file) {
fileReader.onload = function (event) {
const csvOutput = event.target.result;
};
fileReader.readAsText(file);
}
};
return (
<div style={{ textAlign: "center" }}>
<h1>REACTJS CSV IMPORT EXAMPLE </h1>
<form>
<input
type={"file"}
id={"csvFileInput"}
accept={".csv"}
onChange={handleOnChange}
/>
<button
onClick={(e) => {
handleOnSubmit(e);
}}
>
IMPORT CSV
</button>
</form>
</div>
);
}The code results will show the uploaded CSV files in your React js.
Are you tired of not getting the right results when uploading your CSV file and want to get started with a fresh challenge? You can visit Filestack for more on how to upload CSV file in react JS.
Filestack is a dynamic team dedicated to revolutionizing file uploads and management for web and mobile applications. Our user-friendly API seamlessly integrates with major cloud services, offering developers a reliable and efficient file handling experience.