Disable or Enable Button After Uploading Many Files Php
Fadi
Posted on • Updated on
Multiple file inputs with one submit push button with React Hooks
Recently, I was working on a project and I had to brand multiple file inputs. The thing is every input should accept but one file with sure type which in my case was pdf , jpeg just. After uploading the file, user should submit all the uploaded files together using only one submit button. In my instance, user doesn't have to upload all the files at once.
The first thing came to my heed is to use FormData; however, I had to submit an Array of objects each object should have file_Id and the file itself and permit's phone call information technology uploaded_file in our instance. With FormData I couldn't do that, so I had brand it in my own manner.
I presume in this instance that you are familiar with Reactjs and hooks.
Hither are the steps I followed to accomplish my goal:
1. Create React component with 3 input files, each input file accepts only pdf , jpeg with unique Id. Also, we want 1 submit button.
import React from ' react ' ; const MultipleFileInput = () => { return ( < form className = " upload--container " > < div className = " upload--button " > < input id = { one } accept = " .jpeg, .pdf " type = " file " /> < /div > < div className = " upload--button " > < input id = { 2 } accept = " .jpeg, .pdf " blazon = " file " /> < /div > < div className = " upload--button " > < input id = { 3 } accept = " .jpeg, .pdf " type = " file " /> < /div > < button type = " submit " > Submit < /button > < /form > ); }; export default MultipleFileInput ;
two. create state that will concord the Array of objects.
// country that will hold the Array of objects // initialized with empty array const [ files , setFiles ] = useState ([]);
3. Add onChageHandler for each input file. To read these files I have used FileReader Read More About FileReader Web API
// onChange part that reads files on uploading them // files read are encoded as Base64 part onFileUpload ( event ) { event . preventDefault (); // Get the file Id let id = event . target . id ; // Create an case of FileReader API let file_reader = new FileReader (); // Become the bodily file itself let file = event . target . files [ 0 ]; file_reader . onload = () => { // After uploading the file // appending the file to our state assortment // set the object keys and values accordingly setFiles ([... files , { file_id : id , uploaded_file : file_reader . consequence }]); }; // reading the bodily uploaded file file_reader . readAsDataURL ( file ); }
4. now let'southward implement our submit button, for this example we volition merely console log the results; notwithstanding, I had to send these files to the server.
// handle submit push for course function handleSubmit ( eastward ) { e . preventDefault (); console . log ( files ) }
v. Finally, Let'due south add some restrictions to our logic. For example, disable submit button if no file was uploaded.
// push land whether information technology's disabled or enabled const [ enabled , setEnabled ] = useState ( imitation ); // using useEffect nosotros can detect if user uploaded any file, // so enable submit push button useEffect (() => { if ( files . length === 0 ) { setEnabled ( false ); } else { setEnabled ( truthful ); } }, [ files ]); // return submit button based on its country. { enabled ? ( < button blazon = " submit " > Submit < /push button > ) : ( < button disabled type = " submit " > Submit < /push button > )}
This volition be the whole code after all.
codesandox Link
import React , { useState , useEffect } from ' react ' ; const MultipleFileInput = () => { // state that will agree the Array of objects // initialized with empty array const [ files , setFiles ] = useState ([]); // onChange part that reads files on uploading them // files read are encoded every bit Base64 function onFileUpload ( event ) { event . preventDefault (); // Get the file Id allow id = event . target . id ; // Create an instance of FileReader API let file_reader = new FileReader (); // Go the actual file itself permit file = consequence . target . files [ 0 ]; file_reader . onload = () => { // After uploading the file // appending the file to our state assortment // set up the object keys and values appropriately setFiles ([... files , { file_id : id , uploaded_file : file_reader . outcome }]); }; // reading the actual uploaded file file_reader . readAsDataURL ( file ); } // handle submit button for form function handleSubmit ( e ) { e . preventDefault (); console . log ( files ); } // button land whether it's disabled or enabled const [ enabled , setEnabled ] = useState ( false ); // using useEffect we can detect if user uploaded any file, // then enable submit button useEffect (() => { if ( files . length === 0 ) { setEnabled ( simulated ); } else { setEnabled ( true ); } }, [ files ]); render ( < class onSubmit = { handleSubmit } className = " upload--container " > < h1 > Multiple File Inputs with Signle Submit Push button < /h1 > < div className = " upload--button " > < input onChange = { onFileUpload } id = { ane } take = " .jpeg, .pdf " blazon = " file " /> < /div > < div className = " upload--button " > < input onChange = { onFileUpload } id = { 2 } accept = " .jpeg, .pdf " type = " file " /> < /div > < div className = " upload--button " > < input onChange = { onFileUpload } id = { three } have = " .jpeg, .pdf " blazon = " file " /> < /div > { enabled ? ( < push button type = " submit " > Submit < /button > ) : ( < button disabled type = " submit " > Submit < /push button > )} < /form > ); }; export default MultipleFileInput ;
Final Words,
I will exist glad if someone shared different approach, or any modifications to my current implementation. So, please don't hesitate to share your thoughts.
Source: https://dev.to/fadiamg/multiple-file-inputs-with-one-submit-button-with-react-hooks-kle
0 Response to "Disable or Enable Button After Uploading Many Files Php"
Post a Comment