File Upload Click to Send Something Javascript

In this tutorial, nosotros will larn how to upload images or files from a React Js app with Leap MVC Remainder. We volition take a React app with and without Axios integrated with it to button selected files in the browser to the server via Remainder. In the customer-side, nosotros will be using HTML5 FormData and in the server, nosotros volition be using Multipart file to accept those uploaded files. To ease our Bound configuration, we volition be using Spring Kick. We will take examples to upload a unmarried file as well as multiple files from React app.

At the cease, we will also take a look into adding file validations in the client-side equally well as in the server such as the max size of the file, file format, etc. Apart from this, we will also look into methods to download those uploaded files in Spring.

React Js App Setup

We will apply CLI tool chosen create-react-app for creating react app which creates a sample app using react that can be used as a starting point to create a full-fledged react app. It has a dev server bundled by default for development. To setup react from scratch, you can follow this article.

Traverse to the binder location where you want to generate the projection and execute below commands:

npx create-react-app react-js-file-upload cd my-app npm starting time        

For the sake of this example, nosotros will have our file upload implementations in App.js itself.

Let us add bootstrap dependencies for some styling in index.html

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/three.four.ane/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/three.4.0/js/bootstrap.min.js"></script>        

Bound Kicking Residual Setup

Caput over to get-go.spring.io to generate your spring kicking project. Nosotros require spring web for this project. Below is the maven dependecy.

pom.xml

<dependency> 	<groupId>org.springframework.boot</groupId> 	<artifactId>jump-boot-starter-spider web</artifactId> </dependency>        

React Js File Upload Without Axios

Allow us get-go add our jsx implementation for file upload.

I thing to notice here is the onChange() event which will trigger the onFileChangeHandler function which we will be implementing next.

return(){     return(         <div className="container">             <div className="row">                 <div className="col-md-six">                         <div className="grade-grouping files colour">                             <label>Upload Your File </label>                             <input type="file" className="form-control" name="file" onChange={this.onFileChangeHandler}/>                         </div>                 </div>             </div>         </div>     )   }        

Beneath is the implementation of onFileChangeHandler. Nosotros will be using FormData interface to push our file and metadata if any.

As we are allowing to select a unmarried file, e.target.files will have only one element in it.

We are using fetch API for now. In the below section we volition exist using Axios instead.

onFileChangeHandler = (eastward) => {         e.preventDefault();         this.setState({             selectedFile: east.target.files[0]         });         const formData = new FormData();         formData.suspend('file', this.state.selectedFile);         fetch('http://localhost:8080/upload', {             method: 'post',             body: formData         }).then(res => {             if(res.ok) {                 console.log(res.data);                 alert("File uploaded successfully.")             }         });     };        

Here, in the Residue call, we are not setting the Content-Type as multipart/form-data. The browser will do it for us along with setting upwards the multipart purlieus. Else, we volition get the error as org.apache.tomcat.util.http.fileupload.FileUploadException: the asking was rejected considering no multipart boundary was found at the server-side.

Jump Boot Remainder Multipart File Implementation

Allow us create our controller to expose the REST endpoint that volition accept the file as a Multipart file.

As we are sending the file with Formdata interface, the aforementioned can be extracted in spring equally a request param and the key used in the formData to append the file is file, we are using the same key at server side.

Below API is a Mail service mapping that accepts MULTIPART_FORM_DATA_VALUE.

FileController.java

@CrossOrigin("*") @RestController public class FileController {      private static final Logger logger = LoggerFactory.getLogger(FileController.course);      @PostMapping(value = "/upload", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)     public ResponseEntity uploadFile(@RequestParam MultipartFile file) {         logger.info(String.format("File name '%s' uploaded successfully.", file.getOriginalFilename()));         return ResponseEntity.ok().build();     } }        

In existent-time, either yous can save information technology to DB or in a local file system and in the response, you tin can send a custom URL from where the user can download the uploaded image. To salve this image in DB, you tin can follow this article.

React Js File Upload With Axios

Now, permit u.s. add Axios in our React app starting time with NPM command line.

npm add axios        

At present, the in a higher place method will be changed as below:

onFileChangeHandler = (eastward) => {         due east.preventDefault();         this.setState({             selectedFile: e.target.files[0]         });         const formData = new FormData();         formData.append('file', this.state.selectedFile);         ApiService.upload(formData)             .so(res => {                     console.log(res.data);                     alarm("File uploaded successfully.")             })     };        

Below is the service implementation with Axios.

import axios from 'axios';  course ApiService {      upload(data) {         return axios.post("http://localhost:8080/upload", data);     } }  consign default new ApiService();        

React Js Multiple File Upload

To upload multiple files, we demand to modify our html to allow multiple file selection.

          <input type="file" className="form-control" name="file" multiple onChange={this.onFileChangeHandler}/>        

Now, the onFileChangeHandler() volition be modified as:

onFileChangeHandler = (e) => {         const formData = new FormData();         for(permit i = 0; i< e.target.files.length; i++) {             formData.append('file', due east.target.files[i])         }         ApiService.upload(formData)             .then(res => {                     console.log(res.data);                     warning("File uploaded successfully.")             })     };        

These changes demand to be accomodatd in the Residuum controller besides. Now, it accepts an array of multipart file.

          @PostMapping(value = "/upload", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)     public ResponseEntity uploadFile(@RequestParam MultipartFile[] files) {         for (int i = 0; i < files.length; i++) {             logger.info(String.format("File proper name '%s' uploaded successfully.", files[i].getOriginalFilename()));         }         render ResponseEntity.ok().build();     }        

Sending Extra Metadata with File Upload to Server

To transport some extra metatadata along with file upload, you can append information technology in the exisitng FormData as below:

formData.append("extra", "estra metadata");        

At present, the same tin can be retrieved in the server-side as

public ResponseEntity uploadFile(@RequestParam MultipartFile[] files, @RequestParam Cord extra) {  }        

File Upload Validations

The unlike validations that can be added are to restrict user to upload some specific number of files at a time. This tin can be done at the client side by adding condition at e.target.files.length. Similarly, we tin can add validation of the file size at the client-side with file size API in Javascript.

At present, coming to server side validations, nosotros can restrict the file size with a edible bean definition. Past default, the permitted size for tomcat is 1048576 bytes and this can be overriden with below configuration. If the file size exceeds, below error is thrown:

org.apache.tomcat.util.http.fileupload.FileUploadBase$FileSizeLimitExceededException: The field file exceeds its maximum permitted size of 1048576 bytes.        

@Bean(name = "multipartResolver") public CommonsMultipartResolver multipartResolver() { 	CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(); 	multipartResolver.setMaxUploadSize(-1); 	return multipartResolver; }        

Here, -1 ways no restriction at all.

Nosotros need to add together below maven dependency to avoid exception while deploying the app after calculation higher up divers app. The error would be similar to

java.lang.NoClassDefFoundError: org/apache/commons/fileupload/disk/DiskFileItemFactory        

Remainder API File Download

In this example, we are non persistently saving the file and hence I will demonstrate it in the next article. Merely if you are saving the file persistently and then below is the controller method implementation to download information technology. The only difference is the content-type.

@RequestMapping("/download")     public ResponseEntity            downloadFile1(@RequestParam String fileName) throws IOException {                  File file = new File(fileName);         InputStreamResource resource = new InputStreamResource(new FileInputStream(file));          render ResponseEntity.ok()                 .header(HttpHeaders.CONTENT_DISPOSITION, "attachment;filename=" + file.getName())                 .contentType(MediaType.APPLICATION_OCTET_STREAM)                 .contentLength(file.length())                  .torso(resource);     }                  

Conclusion

In this article, nosotros learned well-nigh uploading and downloading files and images with React Js and Spring app.

hamiltonfainceir.blogspot.com

Source: https://www.devglan.com/react-js/file-upload-react-spring-rest

Share this post