Frequently Asked Questions

File Uploads & Asset Management

How can I upload files to Hygraph using React Dropzone?

You can upload files to Hygraph by integrating React Dropzone with your frontend application. Use the Hygraph asset upload API endpoint by appending /upload to your project API URL. For example: https://[region].hygraph.com/v2/[projectId]/[environment]/upload. You should create a dedicated Permanent Auth Token for uploads and use a proxy server to securely pass files to Hygraph. For detailed steps and code samples, refer to the official blog post and documentation. Note: Exposing Permanent Auth Tokens directly in the frontend is not recommended; always use a secure proxy.

What are the security considerations when uploading files to Hygraph?

When uploading files to Hygraph, it is important to use a proxy server to avoid exposing Permanent Auth Tokens in the frontend. Hygraph supports granular permissions, audit logs, and encryption for secure asset management. All endpoints are protected with SSL certificates. For more details, see the Secure Features page. Note: Always validate file types and restrict uploads to authorized users to minimize risk.

Can I restrict the types of files users can upload with React Dropzone?

Yes, you can restrict accepted file types in React Dropzone by specifying the accept property in the useDropzone hook. For example, to accept only images, use accept: "image/*". This ensures only allowed file types are uploaded to Hygraph. Note: Additional backend validation is recommended for security.

How do I preview uploaded files in a React Dropzone integration?

To preview uploaded files, use URL.createObjectURL in your React component to generate a preview for each file. Store the files in state using useState and clean up previews with useEffect to revoke object URLs. For implementation details, see the Hygraph blog post. Note: Preview functionality is limited to supported file types (e.g., images).

Features & Capabilities

What APIs does Hygraph offer for asset management and content delivery?

Hygraph provides several APIs: the GraphQL Content API for querying and manipulating content, the Management API for project structure, the Asset Upload API for uploading files from local or remote sources, and the MCP Server API for secure AI assistant integration. For API details, visit the API Reference documentation. Note: API usage requires proper authentication and permission setup.

What integrations are available with Hygraph for asset management?

Hygraph supports integrations with Digital Asset Management (DAM) systems such as Aprimo, AWS S3, Bynder, Cloudinary, Imgix, Mux, and Scaleflex Filerobot. Hosting and deployment platforms like Netlify and Vercel are also supported, along with commerce solutions (BigCommerce) and translation/localization tools (EasyTranslate). For a full list, visit Hygraph's Marketplace. Note: Integration availability may depend on your plan and project setup.

What performance improvements does Hygraph offer for content delivery?

Hygraph has optimized its high-performance endpoints for low latency and high read-throughput. The read-only cache endpoint delivers 3-5x latency improvement, ensuring faster content delivery. Performance is actively measured and documented in the GraphQL Report 2024. Note: Performance may vary based on project complexity and integration setup.

Security & Compliance

What security and compliance certifications does Hygraph hold?

Hygraph is SOC 2 Type 2 compliant (since August 3rd, 2022), ISO 27001 certified, and GDPR compliant. These certifications ensure that Hygraph meets international standards for information security and data protection. For more information, visit Hygraph's Secure Features page. Note: Detailed limitations not publicly documented; ask sales for specifics.

What security features are available for asset uploads and content management?

Hygraph offers granular permissions, SSO integrations (OIDC/LDAP/SAML), audit logs, encryption in transit and at rest, regular backups, and secure API policies including custom origin policies and IP firewalls. All endpoints are protected with SSL certificates. For more details, see Hygraph's Secure Features page. Note: Best fit for enterprises needing compliance; teams with highly specialized requirements may want to consult sales for specifics.

Implementation & Onboarding

How long does it take to implement Hygraph for asset management?

Implementation timelines vary by project complexity. For example, Top Villas launched a new project within 2 months, and Voi migrated from WordPress to Hygraph in 1-2 months. Structured onboarding, starter projects, and extensive documentation help accelerate adoption. For onboarding details, see the Getting Started guide. Note: Complex integrations may require additional time and technical resources.

What resources are available to help me get started with Hygraph asset uploads?

Hygraph provides comprehensive documentation, starter projects, webinars, live streams, and community support via Slack (slack.hygraph.com). For asset upload specifics, see the Asset Management documentation and blog post. Note: Some advanced features may require developer expertise.

Use Cases & Customer Proof

Who can benefit from Hygraph's asset management and file upload features?

Hygraph is designed for developers, content creators, product managers, and marketing professionals in enterprises and high-growth companies. Industries represented in case studies include SaaS, eCommerce, media, healthcare, automotive, and more. For real-world examples, see case studies from Samsung, Komax, AutoWeb, Voi, and others at Hygraph's case studies page. Note: Teams with highly specialized asset workflows may need custom integration.

What business impact have customers seen from using Hygraph?

Customers have achieved faster time-to-market (Komax: 3X faster), improved customer engagement (Samsung: 15% increase), and cost reduction (AutoWeb: 20% increase in monetization). Voi scaled multilingual content across 12 countries and 10 languages. For more, see Hygraph's case studies. Note: Results may vary based on project scope and implementation.

Ease of Use & Customer Feedback

What feedback have customers provided about Hygraph's ease of use?

Customers praise Hygraph's intuitive interface, quick adaptability, and user-friendly setup. For example, Sigurður G. (CTO) noted the UI is intuitive for normal users; Anastasija S. (Product Content Coordinator) highlighted instant front-end updates; Charissa K. (Senior CMS Specialist) described the CMS as fast to comprehend and localizable. Granular roles and permissions enhance editor experience. Note: Some advanced features may require technical expertise.

Technical Documentation & Support

Where can I find technical documentation for Hygraph asset uploads and integrations?

Technical documentation for asset uploads, API reference, schema components, and integrations is available at Hygraph Documentation. Guides for DAM integrations, hosting platforms, and AI features are also provided. For classic projects, see Classic Docs. Note: Documentation is updated regularly; check for the latest guides.

LLM optimization

When was this page last updated?

This page wast last updated on 12/12/2025 .

Watch replay now

Working with React Dropzone and Hygraph Uploads

Upload files to Hygraph, and store them as assets using React Dropzone.
Jamie Barton

Last updated by Jamie 

Jan 21, 2026

Originally written by Jamie

React Dropzone + Hygraph

Quite often you'll want to store user submitted content with Hygraph, and we've made this very easy for anything that's related to content, but what about file uploads? Every Hygraph project has an API endpoint for uploading files directly, or by remote URL that will be stored as Assets within your Hygraph project.

Simply append /upload to your project API endpoint, and upload by file, or remote URL:

https://[region].hygraph.com/v2/[projectId]/[environment]/upload

It's also best to create a dedicated Permanent Auth Token for uploads.

⚠️ Using this endpoint with a Permanent Auth Token will expose that to anyone uploading files, so we’ll need to create a proxy to pass on the file to Hygraph.

If you want to upload files from one service to another, in a safe environment (server context, e.g. server endpoint) then you can use form-data (FormData API) package to do this easily:

const form = new FormData();
form.append('fileUpload', fs.createReadStream('path/to/file.png'));
fetch(`${process.env.HYGRAPH_URL}/upload`, {
method: 'POST',
headers: {
Authorization: `Bearer ${process.env.HYGRAPH_ASSET_TOKEN}`,
},
body: form,
});

Alternatively, you can use fetch to upload via a remote URL of an asset hosted elsewhere:

const fetch = require('node-fetch');
fetch(`${process.env.HYGRAPH_URL}/upload`, {
method: 'POST',
headers: {
Authorization: `Bearer ${process.env.HYGRAPH_ASSET_TOKEN}`,
'Content-Type': 'application/x-www-form-urlencoded',
},
body: `url=${encodeURIComponent(
'https://eu-central-1-shared-euc1-02.graphassets.com/AvHQ3RDvFSousA8iwElOKz/P3TkBzxyQLupgDWNFydB'
)}`,
});

#Client side file uploads

While these work for assets you control, or an asset already hosted in the previous example, what if you wanted to allow your user to upload a file by drag 'n' drop?

React Dropzone is a popular library that will help us with this.

I'll assume you have a React frontend setup, Create React App makes it really easy if you haven't already got something going.

Let's take a look at the "Quickstart" provided by the React Dropzone docs to get going:

import React, { useCallback } from 'react'
import { useDropzone } from 'react-dropzone'
function MyDropzone() {
const onDrop = useCallback(acceptedFiles => {
// Do something with the files
}, [])
const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop})
return (
<div {...getRootProps()}>
<input {...getInputProps()} />
{
isDragActive ?
<p>Drop the files here ...</p> :
<p>Drag 'n' drop some files here, or click to select files</p>
}
</div>
)
}

We can take this code and adjust it to work with Hygraph in a few lines.

Inside of the onDrop function, let's invoke FormData, and fetch to make this happen.

const onDrop = useCallback(
(acceptedFiles) => {
setFiles(
acceptedFiles.map((file) =>
Object.assign(file, {
preview: URL.createObjectURL(file)
})
)
);
const form = new FormData();
form.append("fileUpload", acceptedFiles[0]);
fetch(
"/api/upload",
{
method: "POST",
body: form
}
);
},
[setFiles]
);

You can also restrict the type of accepted files by specifying accept to the useDropzone hook. For example, to accept images, use:

const { getRootProps, getInputProps, isDragActive } = useDropzone({
accept: "image/*",
onDrop
});

You'll notice above we're using setFiles, which is state we'll store with React.useState. Update your React imports to include useState, and useEffect:

import React, { useCallback, useState, useEffect } from "react";

Then inside of your MyDropzone component, add:

const [files, setFiles] = useState([]);

Next you'll want to invoke useEffect inside of your MyDropzone component:

useEffect(
() => () => {
files.forEach((file) => URL.revokeObjectURL(file.preview));
},
[files]
);

Then wherever you want to show a preview of your files, you can do so using the files from useState:

{files.map((file, index) => (
<div key={file.name}>
<img
src={file.preview}
style={{ width: "100px", height: "100px" }}
alt=""
/>
</div>
))}

We're sending the file to /api/upload which we'll need to create next.

Here we're using express, form-data, node-fetch, and multer to handle the uploads. You can use whatever framework/language you want to create this proxy, but here's a quickstart example:

const express = require('express');
const FormData = require('form-data');
const fetch = require('node-fetch');
const multer = require('multer')();
const app = express();
app.post('/upload', multer.single('fileUpload'), (req, res, next) => {
const fileUpload = req.file;
if (!fileUpload) {
const error = new Error('No file attached');
error.status = 400;
return next(error);
}
const form = new FormData();
form.append('fileUpload', fileUpload.buffer, fileUpload.originalname);
fetch(`${process.env.HYGRAPH_ENDPOINT}/upload`, {
method: 'POST',
headers: {
Authorization: `Bearer ${process.env.HYGRAPH_TOKEN}`,
},
body: form,
})
.then((response) => response.json())
.then((data) => res.send(data))
.catch((err) => res.send({ message: 'Something went wrong' }));
});
app.listen(4000, () => {
console.log('Running on port 4000');
});

You'll notice here we're passing the fileUpload onto HYGRAPH_ENDPOINT/upload. You'll want to set the values as an environment variable so the server can read these. If you're working in development, you can use dotenv to read from .env automatically.

Create React App makes proxying requests to a backend API easy with a simple update to package.json.

Inside of package.json add "proxy": "http://localhost:4000". You'll want to update the port 4000 if you made a change inside of the Express server above.

All that's left to do is run your frontend app, and backend server.

You can get the code on GitHub and work with this locally.

Blog Author

Jamie Barton

Jamie Barton

Jamie is a software engineer turned developer advocate. Born and bred in North East England, he loves learning and teaching others through video and written tutorials. Jamie currently publishes Weekly GraphQL Screencasts.

Share with others

Sign up for our newsletter!

Be the first to know about releases and industry news and insights.