upload images to public folder rails atom
Client-side image upload ⬆️ in React
Image upload is ane of the important and most used features in your web application. Let'southward take an case of facebook when you take to update your profile picture show, you need to upload an paradigm so that facebook can utilize information technology as your profile moving picture.
Today we will learn to build a unproblematic image uploader which enables the user to select the epitome and display it in the browser. I hope it will be fun going through the tutorial and getting something out of it 😁. Let's go.
Setting upwardly the project
For setting up your project, you lot tin utilise either create-react-app or likewise you can become to CodeSandBox.
Later on creating your project, at first, permit'southward create a simple file input which accepts images for upload
import React from " react " ; import ReactDOM from " react-dom " ; import " ./styles.css " ; function App () { return ( < div className = "App" > < input type = "file" take = "paradigm/*" multiple = "fake" /> </ div > ); }
Here nosotros are creating a file input that accepts only images and will allow uploading but i file at a time.
Now, allow'south create a container where the uploaded image will exist displayed.
function App () { return ( < div className = "App" > < input type = "file" accept = "image/*" multiple = "faux" /> < div fashion = { { acme : " 60px " , width : " 60px " , border : " 2px dashed black " } } > < img manner = { { width : " 100% " , height : " 100% " , position : " absolute " } } /> </ div > </ div > ); }
Here, nosotros created a container where the paradigm that is uploaded will exist shown and as well in the future, will exist used equally the image upload button.
**I wrote the inline styles for tutorial purposes.
Now the fun part let'south add an onChange handler in the image input and so access the image file in the handleImageUpload method.
function App () { const handleImageUpload = east => { const [ file ] = due east . target . files ; if ( file ) { console . log ( file ); } }; return ( < div className = "App" > < input type = "file" accept = "image/*" onChange = { handleImageUpload } multiple = "false" /> < div mode = { { height : " 60px " , width : " 60px " , border : " 1px dashed black " } } > < img mode = { { width : " 100% " , height : " 100% " , position : " absolute " } } /> </ div > </ div > ); }
Nosotros attach an handleImageUpload method to the onChange upshot in the file input nosotros created. In the handleImageUpload method nosotros become an e(event) object which gives admission to the list of files uploaded via the file input nosotros created. Nosotros are uploading only one image so we will be accessing the outset file from the FileList and display the file for at present.
Now we volition adhere a ref to the img we created where nosotros can display the uploaded image using the useRef() claw.
office App () { const uploadedImage = React . useRef ( null ); const handleImageUpload = e => { const [ file ] = e . target . files ; if ( file ) { panel . log ( file ); } }; render ( < div className = "App" > < input type = "file" accept = "image/*" onChange = { handleImageUpload } /> < div style = { { summit : " 60px " , width : " 60px " , border : " 1px dashed black " } } > < img ref = { uploadedImage } style = { { width : " 100% " , height : " 100% " , position : " absolute " } } /> </ div > </ div > ); }
Now we volition be using the FileReader constructor in order to read the content of the file and will adhere the content to the img we attached the ref to.
role App () { const uploadedImage = React . useRef ( null ); const handleImageUpload = e => { const [ file ] = eastward . target . files ; if ( file ) { const reader = new FileReader (); const { current } = uploadedImage ; current . file = file ; reader . onload = ( e ) => { current . src = e . target . result ; } reader . readAsDataURL ( file ); } }; return ( < div className = "App" > < input type = "file" have = "epitome/*" onChange = { handleImageUpload } /> < div manner = { { height : " 60px " , width : " 60px " , edge : " 1px dashed black " } } > < img ref = { uploadedImage } style = { { width : " 100% " , height : " 100% " , position : " absolute " } } /> </ div > </ div > ); }
In the handleImageUpload method we create a reader using FileReader constructor and then select the current from the uploadedImage ref which represents the img element. Nosotros then attach an onload event listener to the reader nosotros created which when loaded will attach the file url it will read to the img chemical element. Nosotros and so read the file as URL using the reader.readAsDataURL() method and pass the file selected into it.
And then permit'south see our progress till now
Now lets remove that ugly input push and use the box created every bit the prototype uploader
function App () { const uploadedImage = React . useRef ( naught ); const imageUploader = React . useRef ( null ); const handleImageUpload = east => { const [ file ] = e . target . files ; if ( file ) { const reader = new FileReader (); const { current } = uploadedImage ; electric current . file = file ; reader . onload = east => { current . src = e . target . result ; }; reader . readAsDataURL ( file ); } }; render ( < div style = { { display : " flex " , flexDirection : " column " , alignItems : " center " , justifyContent : " middle " } } > < input type = "file" accept = "image/*" onChange = { handleImageUpload } ref = { imageUploader } fashion = { { brandish : " none " } } /> < div mode = { { height : " 60px " , width : " 60px " , border : " 1px dashed blackness " } } onClick = { () => imageUploader . current . click () } > < img ref = { uploadedImage } style = { { width : " 100% " , height : " 100% " , position : " absolute " } } /> </ div > Click to upload Epitome </ div > ); }
Here we create a imageUploader ref and assign it to the file input, we and then hide the ugly file input element using the css display:none. After that we volition adhere an onClick listener to the div which clicks the file input when the div is clicked, then that means the image tin can be uploaded when the div is clicked. We use some styling to our parent container and so that everything appears in the center, at present lets see how our output looks like.
Yous can find the completed code here
Thankyou.
You tin too follow me on Twitter.
Source: https://dev.to/asimdahall/client-side-image-upload-in-react-5ffc
0 Response to "upload images to public folder rails atom"
Post a Comment