More

    React File Uploading: Everything Defined Here!

    Introduction About React File Uploading

    As a web developer, you would always want to develop a certain application that allows you to upload images. So uploading images is one of the major components which have to be taken into account. React File Uploading is an essential requirement in order to create a complete application. From uploading files we actually mean that we want a user from the client’s machine who wants to upload the files on the client’s server. For example, it’ll allow the users to upload files from their devices like images, videos, etc. on various social media platforms like Instagram, Facebook, and many more.

    As far as the programming problem is concerned, there are many ways through which we can actually achieve file uploading features. In this article, we’ll explain to you the simplest way you can implement the approach to upload a single file by using React.  

    On submitting a file for upload, the upload page reloads. If you’re a fresher for React then you must be using this generic style to upload files on the lab. How about we tell you there’s a better way to achieve that? Today the way you upload a file will change forever if you go through this article as well as you can implement it in your site. 

    Broadly speaking, the process by which we can upload an image can be divided into two basic steps:

    • User input (select a file):

    In order to allow the user to pick a file, the very first step that we have to do would be to add the tag to our App component. Do not forget to set the type of this tag as “file”.  So, after this, we will be needing an event handler in order to observe any changes that have been brought into the file.  This event handler will get functional whenever the user will select a new file and after that, the event manager will update the state.

    • Sending the requests to the server:

    After we have stored the file that we have selected already (in the state), now we are required to send that to a server. We can use fetch or Axios. After that, the file is sent to the service that is wrapped in the object called FormData. 


    Bootstrapping an App:

    For a relatively new developer, the feature of file upload may feel like a topic that is quite complex but for an application that is not so complex such as situations where there will be no handling of heavy image or video and without any file optimization, uploading a file is nothing different from the concept of copying the files from one place and pasting it to another. The Express framework for a node also helps us in adding the feature of file upload to our application. We can do it by creating the front end very easily using the create-react-app and we can handle the backend using the express-generator.

    We will be starting by building a server where we can upload the files to using the very same nodejs and express. Now let us walk through the whole process so that we are sure to end up with a fully functional working system. 

     

    Creating the Express Server for Uploading:

    So creating a server where we can upload to is very important before we can have our React app upload anything to it. So the first job would be to implement a file upload server with the use of node.js and express that allows us to upload the file in a multipart format. 

    Setting Up the Project:

    For setting up a new project, what we need to do is create a whole new project directory that will contain two folders and the two folders would be app and server. The next step would be to open the command line that points to the server directory and it initializes a new npm-project with the use of npm init command. What it does is ask you for some information that you can pass in it or you can even just hit the enter button and it will work. For the server too, we will need two JavaScript files that are: server.js and upload.js inside the server directory.

     

    External Dependencies:

    There will be a total of three external dependencies in our server. The first one obviously being expressive. Express is a framework that makes it very easy for us to create an API. It can be installed using the command: npm install express. 

    And because of the reason that we need to access the API from each application which might be from a different origin, it is necessary for the server to allow cross-origin requests, thus a simple module called CORS is needed. For installing it, we can use the command: npm install cors.

    It is a fact that express itself is not very efficient in understanding the forms and for this, the library “formidable” does the trick and is also very easy to use. It can be installed by using the command: npm install formidable.

    Setting Up a Basic Express Server:

    We need to have a basic express server.js file created and it is very simple:

     

    Enabling CORS:

    For being able to access the API we are using from an application in React that has a different origin, Cors are needed to be enabled. We need to configure it for allowing any domain by the creation of an options object. After we are done, we need to let express know to use the cors-middleware in combination with the configuration that we have.

     

    Registering Upload Route:

    After we are done with the previous steps, configuring a route for uploading our file is required and for that purpose, we need our upload.js file and then register a router with the method of HTTP post.

     

    react-upload-file:

    React Upload File is a structure only modern file upload component that has a customizable user interface and is compatible with React. It also supports IE10+ and it also supports the IE( with the additional requirement of node4+. The installation is also pretty simple and just requires the command npm install react-upload-file -S.Some important things that we need to keep in mind are that it is highly recommended that we use the arrow function and the fact that the queries in baseURL will be ignored if the query is being set.

    For using the react-upload-file there are certain basic options ( an attribute of ReactUpladFile) and the properties of the options are as following:

     

    • baseUrl: It is of the type string and it is the base url for our upload.
    • query: it is a type of object or function and it represents the queries that are appended after the baseUrl. When it is in the form of a function, the return value given by it is used.
    • body: Body primarily consists of the key values that are needed to be added to formData besides the files and when it is in the form of a function, we should use its return values.
    • dataType: It accepts the type of response for example it can either be json or text format.
    • timeout: It signifies exactly what the name suggests and that is the timeout of a request. The callback function, uploadError will be triggered and as a result of that, an object of the type TIMEOUTERROR with the message of “timeout” will be returned to us as the argument. If the default is 0 it means that there is no limit.
    • numberLimit: It limits the number of files that we can upload at a time and here 0 means that there exists no limit to the number of files that can be uploaded. 
    • userAgent: This is used for the purpose of setting the userAgent string with the server side applications that require isomorphic rendering.

    Conclusion:

    In this article, we have learned how important the feature of file uploading is in React and we have also seen how this is achievable even from scratch. React is very versatile and popular, which is why we have lots of different solutions for one problem. This is proven by the presence of so many pre-existing files uploading APIs for React and one such example that we have seen here is that of the react-upload-file which is excellent for the purpose that it is used for.

    Although it is very nice for developers to make their own APIs, using the pre-existing ones helps one a lot when it comes to saving time and getting the job done fast. So for uploading files in React, you can use the APIs that are already available in the community for saving time or you can even build your own API from scratch as per your personal preference. 

     

    Recent Articles

    React Fragment: Find out what we encountered.!

      React Fragment: Hello Devs, in my journey of learning react I came across some frontend conditions where I had to render multiple react components,...

    React Admin: Documentation | Features | Dahboard | Templates

      React Admin is a framework for the front-end development of data-driven applications. That is operating in a browser over the top of REST or...

    React Hooks

      A hook is a component that allows us to use the features of React and state without defining a class. This feature is added...

    React Animation: A definitive guide

    React Animations Add-ons The ReactTransitionGroup add-on is a lower-level Applications Program Interface (API) component for creating react animations. And the ReactCSSTransitionGroup, is a component used...

    Create React App: A Complete guide for Beginners

      Create React App is the modern way of building an official Single Page React Application. It sets up a comfortable environment for building react...

    Related Stories

    Leave A Reply

    Please enter your comment!
    Please enter your name here