
Security News
PodRocket Podcast: Inside the Recent npm Supply Chain Attacks
Socket CEO Feross Aboukhadijeh discusses the recent npm supply chain attacks on PodRocket, covering novel attack vectors and how developers can protect themselves.
@uploadcare/react-widget
Advanced tools
This is a component made to integrate Uploadcare Widget into your React app easily; convenient props management and lazy loading are bundled.
The component allows users to upload files from their devices, social media, cloud storage, and more. All that without any backend code that’s usually required to handle uploads.
npm i @uploadcare/react-widget
import { Widget } from "@uploadcare/react-widget";
/*
* Also, you can save 30% in bundle size by using English-only version:
*
* import { Widget } from "@uploadcare/react-widget/en";
*/
<Widget publicKey="YOUR_PUBLIC_KEY" />;
To use the component, you should have an API key from Uploadcare.
Uploadcare account is free and gives access to serverless file uploads,
transformations, CDN delivery, and APIs. After sign up, you land
on the Dashboard where you manage projects. Projects are identified by their
public keys: replace YOUR_PUBLIC_KEY
with your project’s Public API Key
and you are all set.
You can refer to our integration guide for more details.
value: string
Set a file UUID/group UUID or a CDN URL as a value.
<Widget value='9dd2f080-cc52-442d-aa06-1d9eec7f40d1' />
<Widget value='9dd2f080-cc52-442d-aa06-1d9eec7f40d1~12' />
onChange: (fileInfo: FileInfo) => void
Set a function to be called after a file is uploaded and ready.
onFileSelect: (fileInfo: FileInfo) => void
Set a function to be called after a new file is selected.
customTabs: {[key: string]: CustomTabConstructor}
Add custom tabs for a widget.
function myTab(container, button, dialogApi, settings, name, uploadcare) {
...
}
<Widget customTabs={{ tabname: myTab }} />
Note that we added the fifth argument to the custom tab constructor — an
uploadcare
object. The widget is lazily-loaded, so you don’t have to import
uploadcare-widget
separately for your custom tab.
Remember that you have to also include your custom tab in the tabs
prop to
make it work:
<Widget customTabs={{ tabname: myTab }} tabs='tabname' />
validators: Validator[]
Set validators for a widget. Validator is a JavaScript function that
receives a fileInfo
object for each uploaded file and throws an exception if
that file does not meet validation requirements.
const fileTypeLimit = (allowedFileTypes: string) => {
const types = allowedFileTypes.split(' ')
return function(fileInfo: FileInfo) {
if (fileInfo.name === null) {
return
}
const extension = fileInfo.name.split('.').pop()
if (extension && !types.includes(extension)) {
throw new Error('fileType')
}
}
}
const validators = [fileTypeLimit('mp3 avi mp4')];
<Widget validators={validators} />
preloader: ComponentType
Set a custom preloader. Preloader is a Component to be shown while a widget is loading.
ref: widgetApiRef
Define a reference object to hold the Widget API wrapper. Use it to access
methods: openDialog
, reloadInfo
, and getInput
.
const Example = () => {
const widgetApi = useRef();
return (
<>
<button onClick={() => widgetApi.current.openDialog()}>
Click me
</button>
<Widget ref={widgetApi} publicKey=“demopublickey” />
</>
);
};
Uploadcare Widget can be deeply customized to suit your UX/UI. You can define allowed upload sources, implement file validation, and more.
All the options defined in the widget options docs are also supported in the component as props (use the camelCase notation, you can find it under “Object key” in the referenced article).
Use the live Uploadcare Widget Configurator as a starting point and consider checking out the docs on widget configuration.
If you think you ran into something in Uploadcare libraries which might have security implications, please hit us up at bugbounty@uploadcare.com or Hackerone.
We’ll contact you personally in a short time to fix an issue through co-op and prior to any public disclosure.
Issues and PRs are welcome. You can provide your feedback or drop us a support request at hello@uploadcare.com.
FAQs
React File Uploader. React component with uploading from multiple sources
The npm package @uploadcare/react-widget receives a total of 5,406 weekly downloads. As such, @uploadcare/react-widget popularity was classified as popular.
We found that @uploadcare/react-widget demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers 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
Socket CEO Feross Aboukhadijeh discusses the recent npm supply chain attacks on PodRocket, covering novel attack vectors and how developers can protect themselves.
Security News
Maintainers back GitHub’s npm security overhaul but raise concerns about CI/CD workflows, enterprise support, and token management.
Product
Socket Firewall is a free tool that blocks malicious packages at install time, giving developers proactive protection against rising supply chain attacks.