osaguild / ipfs-uploader Goto Github PK

• click button, show file selector
• select file, status of button change loading
• after uploading status of button change disabled

• https://github.com/osaguild/ipfs-uploader/blob/main/src/components/UploadButton/index.tsx#L28-L34

• should add json upload event and failed event

• this update is for music token economy
• metadata image is here

• add optional value to uploadFile method and add ui component to specify it.

• uploadFile: send file to ipfs, and return file path.
• uploadMetaData: send metadata to ipfs

• we don't have a validation error event, it's including failed event.

• sample test code

• sample metadata

{
    "name": "Patient Token",
    "description": "erc721 token for medical data.",
    "image": "https://gateway.pinata.cloud/ipfs/QmYU1CwEXQaX7yah4Ast7mVuG7M8p52hPWZHYAYDh9evY2"
}

• delete ./src/lib/pinata because it's thin code

targets are below

• enableMetadata: boolean
• enableChangeName: boolean
• imageSize: Size
• pattern: Pattern

• disable all formd during loading
• show loading image until finished loading

• add check icon with uploaded message

• I have to delete ipfs every test. It's cost so want axios be mock

• add callback method to IpfsUploaderProps
• events are file selected / file uploaded / error

• when I text on "name" error is occurred

Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. 

• add axios
• remove @emotion/react @emotion/styled framer-motion react-dom react-scripts

• move the select button beside of upload button
• make uploading images optional -> no! need
• make change image name optional

• after selecting image show image on the component.

• If you use this package, you must add the specified chakra-ui even though chakra-ui is already installed

• file extension lists
• JPG, PNG, GIF, SVG, MP4, WEBM, MP3, WAV, OGG, GLB, GLTF

• after select file, submit component become active
• click submit, call component to send file to ipfs

• allow adding files by drag and drop

• these are optional input form to specify ipfs file name.
• default values are below
• file: file name, metadata: token name

• sample is axios
• add repository and homepage

• form lists are name / discription / image
• key / value is optional and can be set by props of component

• file is injected as props, but should be injected as context. because file is global context on ifps uploader

• less dependencies is good to npm package, I should remove chakraui and style native css.
• If remove chakraui, I can delete these packages
• @chakra-ui/react @emotion/react @emotion/styled framer-motion

• current EventTypes are FILE_SELECTED / UPLOADED / UPLOAD_FAILED
• tobe is SELECTED, UPLOADING, SUCCESS, FAILED

• link to form control
• add labels
• mark field required
• add error messages