@iblcomponents/ipfs-upload/dist/index.modern.js

## A React Component that enables you to upload a file to IPFS.

import React, { useState, useEffect } from 'react';
import { create } from 'ipfs-http-client';

var FileAndUploadButton = function FileAndUploadButton(_ref) {
  var file = _ref.file,
      fileUrl = _ref.fileUrl,
      uploaded = _ref.uploaded;
  return file !== null && file !== void 0 && file.name ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("b", null, "File:"), " ", file.name + " ", /*#__PURE__*/React.createElement("span", {
    className: "badge bg-primary"
  }, file.size, " kb")), !uploaded ? /*#__PURE__*/React.createElement("button", {
    className: "btn btn-primary",
    type: "submit"
  }, "Upload File") : /*#__PURE__*/React.createElement("div", {
    className: "text-success"
  }, "✅ ", /*#__PURE__*/React.createElement("a", {
    href: fileUrl,
    target: "_blank",
    rel: "noopener noreferrer"
  }, "File"), " Uploaded Successfully ✅")) : null;
};

var FileUpload = function FileUpload(_ref) {
  var saveOutputCallback = _ref.saveOutputCallback,
      configurations = _ref.configurations,
      callApi = _ref.callApi;

  var _useState = useState(null),
      file = _useState[0],
      setFile = _useState[1];

  var _useState2 = useState(""),
      fileUrl = _useState2[0],
      setFileUrl = _useState2[1];

  var _useState3 = useState(""),
      preview = _useState3[0],
      setPreview = _useState3[1];

  var _useState4 = useState(""),
      error = _useState4[0],
      setError = _useState4[1];

  var _useState5 = useState(false),
      uploaded = _useState5[0],
      setUploaded = _useState5[1];

  useEffect(function () {
    if (!file) {
      setPreview(undefined);
      return;
    }

    var objectUrl = URL.createObjectURL(file);
    setPreview(objectUrl);
    return function () {
      return URL.revokeObjectURL(objectUrl);
    };
  }, [file]);

  var uploadFile = function uploadFile(e) {
    e.preventDefault();
    callApi("addToIpfs", file).then(function (response) {
      return response.json();
    }).then(function (added) {
      var url = configurations.fileURL + "/" + added.path;
      saveOutputCallback({
        "fileUrl": url
      });
      setFileUrl(url);
      setUploaded(true);
    })["catch"](function (error) {
      console.error("Error adding file to IPFS:", error);
      setError("Error uploading the file: " + error);
    });
  };

  var preUpload = function preUpload(e) {
    return e.target.value !== "" ? setFile(e.target.files[0]) : setFile(null);
  };

  var renderFileUploadGroup = function renderFileUploadGroup() {
    return /*#__PURE__*/React.createElement("li", {
      className: "list-group-item"
    }, /*#__PURE__*/React.createElement("div", {
      className: "row align-items-center justify-content-between"
    }, /*#__PURE__*/React.createElement("div", {
      className: "form-group col-6"
    }, /*#__PURE__*/React.createElement("label", {
      className: "form-label"
    }, "Upload file"), /*#__PURE__*/React.createElement("input", {
      className: "form-control",
      type: "file",
      id: "formFile",
      onChange: preUpload,
      required: true
    }), /*#__PURE__*/React.createElement(FileAndUploadButton, {
      file: file,
      fileUrl: fileUrl,
      uploaded: uploaded
    }), error), /*#__PURE__*/React.createElement("div", {
      className: "col-auto align-self-stretch border text-muted"
    }, preview ? /*#__PURE__*/React.createElement("img", {
      className: "img-fluid",
      src: preview
    }) : "You'll be able to preview your image here.")));
  };

  return /*#__PURE__*/React.createElement("div", {
    className: "container"
  }, /*#__PURE__*/React.createElement("form", {
    onSubmit: uploadFile
  }, /*#__PURE__*/React.createElement("ul", {
    className: "list-group list-group-flush"
  }, renderFileUploadGroup())));
};

var fs = require("fs");

function getAPI(component) {
  switch (component) {
    case "FileUpload":
      return new FileUploadComponentAPI();
  }
}
var FileUploadComponentAPI = function FileUploadComponentAPI() {
  this.getComponent = function () {
    return FileUpload;
  };

  this.addToIpfs = function (file, component) {
    var convertToImportCandidate = function convertToImportCandidate(file) {
      return fs.promises.readFile(file.filepath).then(function (data) {
        return {
          content: data,
          mode: "file"
        };
      });
    };

    var configurations = component.configurations;
    var projectData = configurations.projectId + ":" + configurations.projectSecret;

    var getIpfsClient = function getIpfsClient() {
      return create({
        url: configurations.apiURL,
        headers: {
          authorization: "Basic " + btoa(projectData)
        }
      });
    };

    return convertToImportCandidate(file).then(function (importCandidate) {
      return getIpfsClient().add(importCandidate);
    }).then(function (added) {
      return {
        path: added.path
      };
    });
  };
};

export { getAPI };
//# sourceMappingURL=index.modern.js.map