Working with React Dropzone and Hygraph Uploads

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

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,
});

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'
  )}`,
});

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>
  )
}

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]
);

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

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

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

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

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

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');
});