React Image Upload Only Sending String and Not File
How to Use a Simple Course Submit with Files in React
Introduction
Uploading images or files is a major function of any app. It is an essential requirement for creating a truly total-stack app. For example, Facebook, Instagram, and Snapchat all have the functionality to upload images and videos.
In traditional HTML sites, the file upload class forces a page refresh, which might be disruptive to users. Also, you might want to customize the look of the file input in the grade to make it resonate with your overall app blueprint. When it comes to both of these bug, React can aid y'all provide a ameliorate user experience.
This guide will go you upwards and running with file uploads in React.
Creating a Basic Form
In your App.js file, create a basic grade that with a proper noun field and a file input.
1 import React from "react" ; 2 3 const App = ( ) => { 4 return ( 5 < div className = " App " > 6 < form > vii < input type = " text " /> 8 9 < input type = " file " /> 10 </ form > 11 </ div > 12 ) ; 13 } ; jsx
At present, add together state in the component to store the name and the file data.
1 import React , { useState } from "react" ; ii three const App = ( ) => { 4 const [ name , setName ] = useState ( "" ) ; 5 const [ selectedFile , setSelectedFile ] = useState ( null ) ; half-dozen return ( seven < div className = " App " > 8 < form > nine < input x type = " text " 11 value = { name } 12 onChange = { ( east ) => setName ( e . target . value ) } 13 /> 14 xv < input sixteen blazon = " file " 17 value = { selectedFile } 18 onChange = { ( e ) => setSelectedFile ( e . target . files [ 0 ] ) } 19 /> 20 </ form > 21 </ div > 22 ) ; 23 } ; jsx
Creating a Custom File Uploader Component
Now that the basic form is gear up, create a custom file uploader component that can be reused beyond multiple forms in the app.
If you check the output of the current grade, y'all will notice that the file input doesn't have a great look; that's because the browser defines its default styling. In this section, you will learn how to create a file upload component with custom styling.
ane const FileUploader = ( ) => { two const handleFileInput = ( ) => { } 3 4 render ( v < div className = " file-uploader " > 6 < input type = " file " onChange = { handleFileInput } > 7 </ div > viii ) 9} jsx
To create a custom file uploader, the first footstep is to hibernate the default input and trigger the change event using a ref .
i import React , { useRef } from 'react' ii 3 const FileUploader = ( { onFileSelect } ) => { 4 const fileInput = useRef ( null ) five six const handleFileInput = ( e ) => { 7 // handle validations viii onFileSelect ( due east . target . files [ 0 ] ) 9 } ten 11 return ( 12 < div className = " file-uploader " > 13 < input type = " file " onChange = { handleFileInput } > 14 < button onClick = { eastward => fileInput . current && fileInput . current . click ( ) } className = " btn btn-primary " > 15 </ div > xvi ) 17} jsx
Y'all can style the upload button to match the theme of your overall application. Send the uploaded file dorsum to the parent component using a callback prop; in this case, information technology is onFileSelect . Inside the handleFileInput method, you can do validations like checking for filesize, file extensions, etc., and based on that, ship feedback to the parent component using callback props similar onFileSelectSuccess and onFileSelectError .
1 const handleFileInput = ( e ) => { 2 // handle validations 3 const file = e . target . files [ 0 ] ; iv if ( file . size > 1024 ) 5 onFileSelectError ( { fault : "File size cannot exceed more than than 1MB" } ) ; vi else onFileSelectSuccess ( file ) ; 7 } ; jsx
Calculation the File Uploader Component to the Form
Add together the file uploader component as follows :
1 import React , { useState } from "react" ; 2 3 const App = ( ) => { four const [ name , setName ] = useState ( "" ) ; 5 const [ selectedFile , setSelectedFile ] = useState ( cipher ) ; 6 seven const submitForm = ( ) => { } ; 8 9 render ( 10 < div className = " App " > eleven < form > 12 < input xiii blazon = " text " xiv value = { name } 15 onChange = { ( eastward ) => setName ( due east . target . value ) } sixteen /> 17 18 < FileUploaded 19 onFileSelectSuccess = { ( file ) => setSelectedFile ( file ) } xx onFileSelectError = { ( { error } ) => alert ( error ) } 21 /> 22 23 < button onClick = { submitForm } > Submit </ button > 24 </ form > 25 </ div > 26 ) ; 27 } ; jsx
Uploading Files Using FormData
Upload a selected file using the FormData object. Append the name and file using the append method of the formData object.
i const submitForm = ( ) => { two const formData = new FormData ( ) ; three formData . append ( "name" , proper noun ) ; four formData . append ( "file" , selectedFile ) ; 5 6 axios 7 . mail ( UPLOAD_URL , formData ) eight . then ( ( res ) => { 9 alert ( "File Upload success" ) ; 10 } ) 11 . catch ( ( err ) => alert ( "File Upload Error" ) ) ; 12 } ; jsx
That'south pretty much it. You have successfully created and added a custom file upload component.
Conclusion
File uploading is an essential office of any web app. Y'all tin can utilise other third-party libraries to create custom file upload inputs, just yous should accept a off-white idea of how they are implemented nether the hood.
At that place are several instances where file uploads are required, just with some customization. Third-political party libraries may not always help yous out in such cases, however, your custom file upload utility tin.
Source: https://www.pluralsight.com/guides/how-to-use-a-simple-form-submit-with-files-in-react
0 Response to "React Image Upload Only Sending String and Not File"
Post a Comment