Application Frameworks Project - Review

 

 

For the Application frameworks module, we were assigned a project of developing a 'Conference Management Tool'. It is to be named as 'International Conference on Application Frameworks' (ICAF). When developing this tool, there should be a login and user levels should be maintained as admin, editor, reviewer and user.  

In this tool there should be options for researchers to upload their research papers and workshop presenters to upload their presentations. I was assigned with the development of the component of uploading and managing research papers. The templates for the research papers would be available separately in the application.

For this project we were asked to build the front end using react and when using react we were asked to build from scratch and not to use npx create-react-app. This requirement led me to research on the difference of creating and maintaining a react application in these two different ways. Both ways may have their own advantages and disadvantages. I also did a detailed review about this matter here. 

For the part that was assigned for me it is required to perform a file upload (and possibly a file download at some point). Here what I learnt was in the classical way we can use a file type input in an html form. For html form to work with file type inputs it is required to have enctype='multipart/form-data' . Since I was using react bootstrap to style the elements a <Form.File> tag within a <Form.Group> tag pair was required for the file upload. A common mistake I make when setting data with react forms  is to forget to give the prevntDefault() command in the methods where the form data is assigned to state variables when they are changed. Forgetting this option leads react to treat the form as a traditional form an expect enctype='multipart/form-data' if a file type input is present (it may produce other instabilities as well).

For the back-end API we decided to use spring boot. The spring boot controller expects the uploaded file as a multipart file. Multipart request combines several types of data (ex: JSON and file) into one. This type of request is accepted at the back-end. The back-end can receive requests using request parameters. To set the request parameters we can use FormData interface available in java-script. This allows us to set a set of key value pairs and use them as we were using a form with the enctype:'multipart/form-data'. Remember, here we are preventing the default behavior of the form.

Once the file is received at the back-end, we can store it. We can store the file directly on the system storage, but since we are using MongoDB as our database and file can be stored in MongoDB as BSON Binary file, we directly stored the file (after converting to BSON binary file) in MongoDB collection in a document. Here, when storing files directly in MongoDB there is a size limitation of 16MB. This can be mitigated by using GridFS. What GridFS does on a basic level is to store the file as chunks separately so that large files can be stored in small parts. Since most pdf files will not exceed 16MB I decided to directly store the pdf file in MongoDB collection.

What Have I learnt ?

• File type input can be used to give file upload fields.
• File type inputs require the encryption type to be set to 'multipart/form-data' in the form.
• FormData interface van be used to create key value pairs that represent above encryption type.
• BSON binary files of sizes upto 16MB can be stored in MongoDB directly.
• GridFS can be used to break large files into chunks to store them in MongoDB.

 

So, it is clear that in the first phase of the project itself we have many things to learn.