''' <div className="col-lg-6 row-item"> <div className="file-upload-arrow"> <img src={FileArrowIcon} alt="File Upload Arrow Icon" /> </div> <div className="file-upload-text"> Drag and drop document here to upload </div> <div className="file-attach-instructions"> Please attach the file(s) below (use the Add button). We recommend using A4-size PDF, BMP, PNG, DOC, DOCX, JPG and JPEG files. File size cannot be more than 20 megabytes (MB). Your files will be uploaded when you submit your form. </div> <div className="file-add-button"> <button onClick={addFileHandler}>Add File</button> </div> </div> ''' Your are a senior react developer. I want you to implement a functionality to upload files on button click event and drag and drop. Contrainst: 1. function should be implemented on `addFileHandler` event given above. 2. File can also be uploaded by drag and drop into row-item div element. 3. instructions for file upload is given `file-attach-instructions` div element. 4. You can use packages like `react-uploader` to implement this. 5. Finally return the updated version of code. Current code is above for reference.
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter