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 Ecommerce Templates

      React is the most popular library for the development of e-commerce applications. React eCommerce templates for building eCommerce apps are a combination of several...

    What is React Yarn? How to Install It?

    Introduction to React Yarn The technical community shares hundreds and thousands of pieces of code every day in the community of JavaScript. As a result,...

    React Editor: Features, Installation and Limitations

    Why do we need the react editor?  There is a large range of code-based editors like CodeMirror, Monaco, Ace, etc., that provide us with the...

    React Babel: Everything You Need to Know About It

    Introduction About React Babel: React Babel is a very well known and well-implemented open-source transcompiler of JavaScript. We use it mainly to convert the ECMA...

    React Websocket: Usage, Installation and much more

    Introduction About React Websocket:  If you want to create a long-running connection between a client and a server then use React Websocket. Let's take an...

    Related Stories

    Leave A Reply

    Please enter your comment!
    Please enter your name here