CSV  File Upload on Drag and Drop in Reactjs

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 CSVupload 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:
  1. Library required to CSV file upload to your project 
  2. Browser supports
  3. Calling the file drop component.
  4. Handling different events.
  5. Calling and implementing ondrop function
  6. Advantages
  7. Conclusion

Library required to CSV file upload to your project

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

Browser supports

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.
  • Chrome
  • Firefox
  • Safari
  • IE 11
  • IE Edge

Calling file drop component

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>

Handling different events

As we added  different events, we will be adding details about different events in this step as given below:
  • onFrameDragEnter:

                          Call the event when the user begins dragging over the frame.

  • onFrameDragLeave:

                         Call the event when the user stops dragging over the frame.    

  • onFrameDrop :        

                          Call the event when the user drops files anywhere over the frame.

  • onDragOver:

                          Call the event when the user is dragging over the target. Also adds the 

  • onDragLeave:       

                          Call the event when the user leaves the target. Removes the

  • onDrop:

                          Call the event when the user drops files onto the target

Calling and implementing ondrop function

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 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 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")

                                              }

                                                   }

                       }

Advantages of this approach

  •  Multiple browser support.
  •  Drag and drop multiple files at a time.
  •  Can allow restrictions for file type and size.

Conclusion

File drop library is helpful to upload CSV files in an efficient way and also we can upload different types of file with different sizes on different browsers. Also this is helpful to upload files on different events.

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 

         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)

}

       >

</div>





                   )}

subscribe to our newsletter

   
   
Related Posts

Leave a Comment