Security News
pnpm 10.0.0 Blocks Lifecycle Scripts by Default
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.
react-file-uploader
Advanced tools
react-file-upload is a set of components written in React.js which helps you to upload file easily.
To install:
npm install --save react-file-upload
this module currently contains 4 major entities, which are
Receiver helps you to manage file upload triggered by Drag and Drop. Once you mounted the Receiver component, the Drag and Drop function will be enabled.
string | array
the class name(s) for the div
wrapper
object
the style for the div
wrapper
boolean
required
it enables you to control in the parent component whether the Receiver is opened.
function
required
this will be fired with the window event of onDragEnter
once only when isOpen
is false
.
function
this will be fired with the window event of onDragOver
.
function
required
this will be fired with the window event of onDragLeave
once only when the drag event entirely left the client (i.e. dragLevel
== 0).
function
required
this will be fired with the window event of drop
. You may execute any validation / checking process here i.e. size, file type, etc.
Upload Manager serves as a high order component which helps you to manage the upload related parameters and functions. It prepares the upload logic with superagent
for the UploadHandler
as its children, and helps you to update the lifecycle status of the uploading files.
string | array
the class name(s) for the div
wrapper
object
the style for the div
wrapper
array
the array of files object that are uploaded / going to be uploaded to be shown in the file list.
string
required
the url of the upload end point from your server.
function
this will be fired when the POST
request is just sent.
UPLOADING
status and 0%
progress.function
this will be fired when the POST
request returns progress.
UPLOADING
status and n%
progress.function
required
this will be fired upon the end of POST
request.
UPLOADED
status and 100%
progress or FAILED
status, 0%
progress and error reason.Upload Handler helps you to execute the upload lifecycle, which is start
, progress
and end
. It also acts as the presentation layer of a file, showing users the info of the uploading / uploaded file.
string | array
the class name(s) for the div
wrapper
object
the style for the div
wrapper
object
required
the file object that is uploaded / going to be uploaded.
function
the function that contains the upload logic, you may pass it directly when you are using UploadHandler
alone, or it could be prepared by UploadManager
.
boolean
When autoStart
is set to true
, upon the UploadHandler component did mount, it will detect if the file i.e. as props is with the PENDING
status and initialise a POST
request which is sent to the uploadUrl
you passed to the UploadManager
.
this module defines a set of status constants to represent the file status. The corresponding status will be assign to a file object throughout the uploading life cycle.
FAILED = -1
PEDNING = 0
UPLOADING = 1
UPLOADED = 2
MIT
FAQs
A set of file-upload-components with React.js.
The npm package react-file-uploader receives a total of 0 weekly downloads. As such, react-file-uploader popularity was classified as not popular.
We found that react-file-uploader demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.
Product
Socket now supports uv.lock files to ensure consistent, secure dependency resolution for Python projects and enhance supply chain security.
Research
Security News
Socket researchers have discovered multiple malicious npm packages targeting Solana private keys, abusing Gmail to exfiltrate the data and drain Solana wallets.