Copy
import { useState } from 'react';
import axios from 'axios';
const ACCESS_TOKEN = 'ENTER TOKEN VALUE HERE';
const headers = {
  headers: {
    'content-type': 'multipart/form-data',
    authorization: `Bearer ${ACCESS_TOKEN}`,
  },
};

export default function UploadFile() {
  const [file, setFile] = useState('');
  const [name, setName] = useState('');
  const [description, setDescription] = useState('');

  const handleFile = () => {
    setFile(files[0]);
    setName(files[0].name);
  };

  const handleUpload = async (event) => {
    event.preventDefault();

    try {
      const formData = new FormData();
      formData.append('file', file);
      formData.append('name', name);
      formData.append('description', description);
      formData.append('fileType', file?.type ? file.type : 'other');
      formData.append('fileSize', file.size);

      await axios.post(
        'https://api.bytestorage.io/v1/upload',
        formData,
        headers,
      );
    } catch (err) {
      console.log(err);
    } finally {
      setFile('');
      setName('');
      setDescription('');
    }
  };

  return (
    <form onSubmit={handleUpload}>
      <label htmlFor="upload">Select File</label>
      <input
        required
        id="upload"
        placeholder="Select File"
        onChange={(event) => handleFile(event.target.files)}
        type="file"
      />

      <label htmlFor="upload">Description</label>
      <input
        required
        id="description"
        placeholder="Description"
        type="text"
        value={description}
        onChange={(event) => setDescription(event.target.value)}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

Copy
import { useEffect, useState } from 'react';
import axios from 'axios';
const ACCESS_TOKEN = 'ENTER TOKEN VALUE HERE';
const headers = {
  headers: {
    'content-type': 'application/json',
    authorization: `Bearer ${ACCESS_TOKEN}`,
  },
};

export default function FetchCollection() {
  const [fetched, setFetched] = useState(false);
  const [collection, setCollection] = useState([]);

  const fetchCollection = async () => {
    const response = await axios.get(
      'https://api.bytestorage.io/v1/collection',
      headers,
    );

    setCollection(response.data);
    setFetched(true);
  };

  useEffect(() => {
    if (!fetched) {
      fetchCollection();
    }
  }, [fetched]);

  return (
    <div>
      <h1>My Collection:</h1>
      <div>
        {collection[0] &&
          collection.map((upload) => {
            return <h3 key={upload._id}>{upload.name}</h3>;
          })}
      </div>
    </div>
  );
}

Copy
import { useEffect, useState } from 'react';
import axios from 'axios';
const ACCESS_TOKEN = 'ENTER TOKEN VALUE HERE';
const headers = {
  headers: {
    'content-type': 'application/json',
    authorization: `Bearer ${ACCESS_TOKEN}`,
  },
};

export default function FetchCollection() {
  const [fetched, setFetched] = useState(false);
  const [upload, setUpload] = useState('');
  const address = 'ENTER UPLOAD CID HERE';

  const fetchCollection = async () => {
    const response = await axios.get(
      `https://api.bytestorage.io/v1/uploads/${address}`,
      headers,
    );

    setUpload(response.data);
    setFetched(true);
  };

  useEffect(() => {
    if (!fetched) {
      fetchCollection();
    }
  }, [fetched]);

  return (
    <div>
      <h1>My Upload:</h1>
      <div>
        {upload && (
          <img
            src={`https://gateway.bytestorage.io/ipfs/${upload.address}`}
            alt="my upload"
          />
        )}
      </div>
    </div>
  );
}

Copy
[
  {
    "_id": "648f6b3379d396477d5e27de",
    "collectionId": "64867536839c5cf6fb89cf15",
    "address": "QmUwUZSHU9dehU64vN6nxDtMzfapjureafsHyCDCBus519",
    "name": "12.png",
    "description": "Test Upload Byte Dev GW",
    "fileType": "image/png",
    "fileSize": 1029743,
    "createdAt": "2023-06-18T20:38:11.327Z",
    "updatedAt": "2023-06-18T20:38:11.327Z",
    "__v": 0
  }
]