'''
<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