@airplane/views/dist/components/fileinput/useUploadAirplaneFiles.js

A React library for building Airplane views. Views components are optimized in style and functionality to produce internal apps that are easy to build and maintain.

import { AirplaneFile } from "airplane";
import { useState, useCallback } from "react";
import { PICK_ZONE, AGENT_UPLOADS_CREATE, UPLOADS_CREATE } from "../../client/endpoints.js";
import { AIRPLANE_USE_SELF_HOSTED_INPUTS } from "../../client/env.js";
import { Fetcher } from "../../client/fetcher.js";
const useUploadAirplaneFiles = ({
  onChange,
  onLoad,
  onLoadEnd,
  onError,
  getUploadURL
}) => {
  const [uploads, setUploads] = useState([]);
  const onDrop = useCallback(async (files) => {
    setUploads(files.map((file) => {
      return {
        percent: 0,
        file: new AirplaneFile(file, {
          id: "",
          url: "",
          name: file.name
        })
      };
    }));
    const fetcher = new Fetcher();
    const onChangeInput = await Promise.all(files.map(async (file, i) => {
      var _a, _b, _c;
      try {
        let uploadID, readOnlyURL, writeOnlyURL;
        if (getUploadURL) {
          ({
            uploadID,
            readURL: readOnlyURL,
            writeURL: writeOnlyURL
          } = await getUploadURL(file.name, file.size));
        } else {
          const pickZoneResp = AIRPLANE_USE_SELF_HOSTED_INPUTS ? await fetcher.get(PICK_ZONE) : null;
          if (pickZoneResp && ((_a = pickZoneResp.zone) == null ? void 0 : _a.dataPlaneURL)) {
            const agentResp = await fetcher.post(AGENT_UPLOADS_CREATE, {
              fileName: file.name,
              sizeBytes: file.size
            }, {
              headers: {
                "X-Airplane-Dataplane-Token": (_b = pickZoneResp.zone) == null ? void 0 : _b.accessToken
              },
              host: (_c = pickZoneResp.zone) == null ? void 0 : _c.dataPlaneURL
            });
            const uploadResp = await fetcher.post(UPLOADS_CREATE, {
              fileName: file.name,
              sizeBytes: file.size,
              zoneID: pickZoneResp.zone.id,
              zoneToken: agentResp.upload.zoneToken
            });
            uploadID = uploadResp.upload.id;
            readOnlyURL = agentResp.readOnlyURL;
            writeOnlyURL = agentResp.writeOnlyURL;
          } else {
            ({
              upload: {
                id: uploadID
              },
              readOnlyURL,
              writeOnlyURL
            } = await fetcher.post(UPLOADS_CREATE, {
              fileName: file.name,
              sizeBytes: file.size
            }));
          }
        }
        await new Promise((resolve, reject) => {
          const xhr = new XMLHttpRequest();
          xhr.addEventListener("load", (e) => {
            setUploads((u) => [...u.slice(0, i), {
              percent: 100,
              file: u[i].file
            }, ...u.slice(i + 1)]);
            onLoad == null ? void 0 : onLoad(file);
            resolve();
          });
          if (xhr.upload.addEventListener) {
            xhr.upload.addEventListener("progress", (e) => {
              setUploads((u) => [...u.slice(0, i), {
                percent: Math.trunc(e.loaded / file.size * 1e3) / 10,
                file: u[i].file
              }, ...u.slice(i + 1)]);
            });
          }
          xhr.addEventListener("error", (e) => {
            reject();
          });
          xhr.addEventListener("abort", (e) => {
            resolve();
          });
          xhr.addEventListener("loadend", (e) => {
            onLoadEnd == null ? void 0 : onLoadEnd(file);
          });
          xhr.open("PUT", writeOnlyURL);
          const parsedURL = new URL(writeOnlyURL);
          if (parsedURL.hostname.endsWith(".windows.net")) {
            xhr.setRequestHeader("x-ms-blob-type", "BlockBlob");
          } else {
            xhr.setRequestHeader("X-Goog-Content-Length-Range", `0,${file.size}`);
          }
          xhr.send(file);
        });
        const airplaneFile = new AirplaneFile(file, {
          id: uploadID,
          url: readOnlyURL,
          name: file.name
        });
        setUploads((u) => [...u.slice(0, i), {
          percent: u[i].percent,
          file: airplaneFile
        }, ...u.slice(i + 1)]);
        return airplaneFile;
      } catch (e) {
        onError == null ? void 0 : onError(file, e);
        return new AirplaneFile(file, {
          id: "",
          url: "",
          name: file.name
        });
      }
    }));
    onChange(onChangeInput);
    setUploads([]);
  }, [onChange, onLoad, onLoadEnd, onError, getUploadURL]);
  return {
    onDrop,
    uploads
  };
};
export {
  useUploadAirplaneFiles
};
//# sourceMappingURL=useUploadAirplaneFiles.js.map