A React component that allows dropping image files into the browser for automatic upload to IPFS
Installation
npm install ipfs-image-drop
Usage
;;; ReactDOM;
Please see the examples
folder for a more detailed example.
The following props are available:
ipfsHost
The host name of the IPFS node
ipfsPort
The port number of the IPFS node
resizeWidth/resizeHeight
If specified, the image will be resized to have this width/height, retaining the original aspect ratio. Note that only one resize attribute may be specified; resizeHeight or resizeWidth. If both are specified, one will be ignored.
onUpload
Function to call when the file has been uploaded to IPFS. The function will be called with an object of the following structure as the parameter:
ipfsData: hash: String //IPFS hash of stored file path: String //IPFS path of stored file dataURL: String //Data URL of stored file
Styling
The component contains almost no styling. However, the drop zone element changes its class to reflect the current state. The following CSS selectors may be used to change the style of the drop zone depending on the state: