There are are multiple ways to upload file, we can upload file directly choosing from files or also upload files by drag and drop method, so in this this blog I will be covering how to upload CSV file by drag and drop method using Reactjs and also I will be covering about how to apply size restrictions and which browser supports CSV upload and also how to install library and call that component.
I will explain the CSV file upload implementation in a simple way, I will mention the points below to use CSV file upload;
We can use different types of libraries to use CSV file upload drag but we will be using React-file-drop library with the latest version of 3.0.7 for uploading CSV files by drag and drop.
npm i react-file-drop
Most important thing before implementing any functionality we need to check is browser support which means whether the functionality is working on the respective browsers and whether it is feasible or not. The browser which supports the react file drop are given below.
Calling a file drop component is an important step in this blog. We have to add a file drop component name in reader so that we can call it,also we have to handle some event in that component.
– add component in render
<FileDrop > </FileDrop>
and also need to add different event in File drop component so that we have can handle events as shown 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>
Call the event when the user begins dragging over the frame.
Call the event when the user stops dragging over the frame.
Call the event when the user drops files anywhere over the frame.
Call the event when the user is dragging over the target. Also adds the
Call the event when the user leaves the target. Removes the
Call the event when the user drops files onto the target
We have to handle ondrop event so we will calling a function on drop event as shown 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) => this.onDropFunction(files) }
We call the onDropFunction and pass files as a parameter.
Implementation on the function is given below
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”) } }}
We can also check the file type as shown above, and we can also check the file size and also apply validations on it as shown below
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") } } }
Code Snippet
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> <FileDrop
This blog is from Mindbowser‘s content team – a group of individuals coming together to create pieces that you may like. If you have feedback, please drop us a message on contact@mindbowser.com
Get the latest updates by sharing your email.
Flexible Engagement Model | Secure & Scalable Apps | First Time Right Process
Mindbowser helped us build an awesome iOS app to bring balance to people’s lives.
We had very close go live timeline and MindBowser team got us live a month before.
They were a very responsive team! Extremely easy to communicate and work with!
We’ve had very little-to-no hiccups at all—it’s been a really pleasurable experience.
Mindbowser is one of the reasons that our app is successful. These guys have been a great team.
Mindbowser was very helpful with explaining the development process and started quickly on the project.
The greatest benefit we got from Mindbowser is the expertise. Their team has developed apps in all different industries with all types of social proofs.
Mindbowser is professional, efficient and thorough.
Very committed, they create beautiful apps and are very benevolent. They have brilliant Ideas.
MindBowser was great; they listened to us a lot and helped us hone in on the actual idea of the app.” “They had put together fantastic wireframes for us.
They're very tech-savvy, yet humble.
Ayush was responsive and paired me with the best team member possible, to complete my complex vision and project. Could not be happier.
As a founder of a budding start-up, it has been a great experience working with Mindbower Inc under Ayush's leadership for our online digital platform design and development activity.
The team from Mindbowser stayed on task, asked the right questions, and completed the required tasks in a timely fashion! Strong work team!
They are focused, patient and; they are innovative. Please give them a shot if you are looking for someone to partner with, you can go along with Mindbowser.
We are a small non-profit on a budget and they were able to deliver their work at our prescribed budgets. Their team always met their objectives and I'm very happy with the end result. Thank you, Mindbowser team!!