@gliff-ai/upload
v1.3.0
Published
gliff.ai UPLOAD - a React component for uploading multidimensional images
Downloads
79
Keywords
Readme
gliff.ai UPLOAD
👋 Welcome in! 👋
This repository contains the Open Source code for gliff.ai’s UPLOAD support library (gliff.ai’s component for uploading multidimensional images).
UPLOAD aims to allow users to easily upload a variety of image files, including multidimensional TIFFs, for the purposes of developing imaging AI products. When the full gliff.ai platform is used, UPLOAD provides just one step in developing high-quality and auditable datasets that satisfy any relevant regulatory frameworks which enables our users to build world-changing and trustworthy AI models and products.
✅ We welcome contributions on this repository! ✅
Table of Contents
Looking for something specific? 🔍
- Repository Introduction
- Table of Contents
- Installation
- Development
- Linting and Formatting
- Testing
- Examples of Use
- Contribute
- Contact
- License
Installation
Run npm install @gliff-ai/upload
in your command line to install the package from the npm registry.
Development
Frontend code should always be written in Typescript and transpiled using the options in tsconfig.json
in this repository. npm should always be used for package management.
npm run serve
will run a local webpack developer server for quick access.
To get started, run npm i
and npm run build
from the root directory.
Linting and Formatting
As a standard, all code contributions should be linted with ESLint using .eslintrc.js
and formatted with Prettier. Note: HTML + CSS, mark-up and mark-down code are exemptions and should be formatted using Prettier but do not need to be linted.
npm run lint
will lint the codebase.
Our GitHub Actions will also lint any pull requests before they're merged.
Testing
All code contributions should be tested using both the Jest and React Testing Library.
npm run test
will run any existing tests in our codebase.
Our GitHub Actions will also test any pull requests before they're merged! These all must pass and have 2 reviewers approval before a pull request can merge. If one or a few fail and your troubleshooting is not giving an answer, please check out the gliff.ai Contribution Guide 👋 for further guidance.
Continuous Integration
GitHub Actions should only be included under the .github/workflows
path.
Examples of Use
Import the UploadImage
module and the ImageFileInfo
type:
import { UploadImage } from @gliff-ai/upload;
import type { ImageFileInfo } from @gliff-ai/upload;
Use the UploadImage
module:
setUploadedImage = (
imageFileInfo: ImageFileInfo,
slicesData: Array<Array<ImageBitmap>>
): void => {
this.imageFileInfo = imageFileInfo;
this.slicesData = slicesData;
};
render = (): ReactNode => (
<UploadImage
setUploadedImage={this.setUploadedImage}
spanElement={
<Button aria-label="upload-picture" component="span">
<Backup />
</Button>
} // A <span> element that marks the clickable area.
multiple // allow uploading multiple files at once; use multiple={false} to disallow
/>
);
The example above uses Material-UI.
Contribute
We welcome all contributors and any contributions on this project through the likes of feedback on or suggesting features and enhancements, raising bug problems, reporting on security vulnerabilities, reviewing code, requesting or creating tests, user testing etc. to ensure gliff.ai can help enable the best and biggest positive impact possible.
Sounds good and want to contribute to the project? 🧑💻
Please check the gliff.ai Contribution Guide 👋 before you get started. Don’t forget the gliff.ai Code of Conduct ⚠️ and gliff.ai Security Policy 🔒 too!
A big thank you from the entire gliff.ai team to these fellow contributors (emoji key):
This project follows the all-contributors specification and makes use of the all-contributors emoji key to credit the types of contributions from our community!
Contact
Need some help? 🤔 Have a question? 🧠
Reach out to the gliff.ai team at [email protected] or on our GitHub discussions.
License
This code is licensed under a GNU AGPLv3 license 📝
Curious about our reasoning for this? Read about them here!