249 lines
8.6 KiB
JavaScript
249 lines
8.6 KiB
JavaScript
import React, { useState, useContext, useEffect } from "react";
|
|
import bytes from "bytes";
|
|
import classNames from "classnames";
|
|
import { getReasonPhrase, StatusCodes } from "http-status-codes";
|
|
import path from "path-browserify";
|
|
import { useDropzone } from "react-dropzone";
|
|
import { Button, UploadFile } from "../";
|
|
import { Deco3, Deco4, Deco5, Folder, DownArrow } from "../../svg";
|
|
import "./HomeUpload.scss";
|
|
import AppContext from "../../AppContext";
|
|
import { SkynetClient, parseSkylink } from "skynet-js";
|
|
|
|
const isValidSkylink = (skylink) => {
|
|
try {
|
|
parseSkylink(skylink); // try to parse the skylink, it will throw on error
|
|
} catch (error) {
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
};
|
|
|
|
const getFilePath = (file) => file.webkitRelativePath || file.path || file.name;
|
|
|
|
const getRelativeFilePath = (file) => {
|
|
const filePath = getFilePath(file);
|
|
const { root, dir, base } = path.parse(filePath);
|
|
const relative = path.normalize(dir).slice(root.length).split(path.sep).slice(1);
|
|
|
|
return path.join(...relative, base);
|
|
};
|
|
|
|
const getRootDirectory = (file) => {
|
|
const filePath = getFilePath(file);
|
|
const { root, dir } = path.parse(filePath);
|
|
|
|
return path.normalize(dir).slice(root.length).split(path.sep)[0];
|
|
};
|
|
|
|
const createUploadErrorMessage = (error) => {
|
|
// The request was made and the server responded with a status code that falls out of the range of 2xx
|
|
if (error.response) {
|
|
if (error.response.data.message) {
|
|
return `Upload failed with error: ${error.response.data.message}`;
|
|
}
|
|
|
|
const statusCode = error.response.status;
|
|
const statusText = getReasonPhrase(error.response.status);
|
|
|
|
return `Upload failed, our server received your request but failed with status code: ${statusCode} ${statusText}`;
|
|
}
|
|
|
|
// The request was made but no response was received. The best we can do is detect whether browser is online.
|
|
// This will be triggered mostly if the server is offline or misconfigured and doesn't respond to valid request.
|
|
if (error.request) {
|
|
if (!navigator.onLine) {
|
|
return "You are offline, please connect to the internet and try again";
|
|
}
|
|
|
|
// TODO: We should add a note "our team has been notified" and have some kind of notification with this error.
|
|
return "Server failed to respond to your request, please try again later.";
|
|
}
|
|
|
|
// TODO: We should add a note "our team has been notified" and have some kind of notification with this error.
|
|
return `Critical error, please refresh the application and try again. ${error.message}`;
|
|
};
|
|
|
|
export default function HomeUpload() {
|
|
const [files, setFiles] = useState([]);
|
|
const [skylink, setSkylink] = useState("");
|
|
const { apiUrl } = useContext(AppContext);
|
|
const [directoryMode, setDirectoryMode] = useState(false);
|
|
const client = new SkynetClient(apiUrl);
|
|
|
|
useEffect(() => {
|
|
if (directoryMode) {
|
|
inputRef.current.setAttribute("webkitdirectory", "true");
|
|
} else {
|
|
inputRef.current.removeAttribute("webkitdirectory");
|
|
}
|
|
}, [directoryMode]);
|
|
|
|
const handleDrop = async (acceptedFiles) => {
|
|
if (directoryMode && acceptedFiles.length) {
|
|
const rootDir = getRootDirectory(acceptedFiles[0]); // get the file path from the first file
|
|
|
|
acceptedFiles = [{ name: rootDir, directory: true, files: acceptedFiles }];
|
|
}
|
|
|
|
setFiles((previousFiles) => [...acceptedFiles.map((file) => ({ file, status: "uploading" })), ...previousFiles]);
|
|
|
|
const onFileStateChange = (file, state) => {
|
|
setFiles((previousFiles) => {
|
|
const index = previousFiles.findIndex((f) => f.file === file);
|
|
|
|
return [
|
|
...previousFiles.slice(0, index),
|
|
{
|
|
...previousFiles[index],
|
|
...state,
|
|
},
|
|
...previousFiles.slice(index + 1),
|
|
];
|
|
});
|
|
};
|
|
|
|
acceptedFiles.forEach((file) => {
|
|
const onUploadProgress = (progress) => {
|
|
const status = progress === 1 ? "processing" : "uploading";
|
|
|
|
onFileStateChange(file, { status, progress });
|
|
};
|
|
|
|
// Reject files larger than our hard limit of 1 GB with proper message
|
|
if (file.size > bytes("1 GB")) {
|
|
onFileStateChange(file, { status: "error", error: "This file size exceeds the maximum allowed size of 1 GB." });
|
|
|
|
return;
|
|
}
|
|
|
|
const upload = async () => {
|
|
try {
|
|
let response;
|
|
|
|
if (file.directory) {
|
|
const directory = file.files.reduce((acc, file) => ({ ...acc, [getRelativeFilePath(file)]: file }), {});
|
|
|
|
response = await client.uploadDirectory(directory, encodeURIComponent(file.name), { onUploadProgress });
|
|
} else {
|
|
response = await client.uploadFile(file, { onUploadProgress });
|
|
}
|
|
|
|
onFileStateChange(file, { status: "complete", url: client.getSkylinkUrl(response) });
|
|
} catch (error) {
|
|
if (error.response && error.response.status === StatusCodes.TOO_MANY_REQUESTS) {
|
|
onFileStateChange(file, { progress: -1 });
|
|
|
|
return new Promise((resolve) => setTimeout(() => resolve(upload()), 3000));
|
|
}
|
|
|
|
onFileStateChange(file, { status: "error", error: createUploadErrorMessage(error) });
|
|
}
|
|
};
|
|
|
|
upload();
|
|
});
|
|
};
|
|
|
|
const { getRootProps, getInputProps, isDragActive, inputRef } = useDropzone({ onDrop: handleDrop });
|
|
|
|
const handleSkylink = (event) => {
|
|
event.preventDefault();
|
|
|
|
// only try to open a valid skylink
|
|
if (isValidSkylink(skylink)) {
|
|
client.openFile(skylink);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="home-upload">
|
|
<div className="home-upload-white">
|
|
<div className="home-upload-split">
|
|
<div className="home-upload-box ">
|
|
<div
|
|
className={classNames("home-upload-dropzone", {
|
|
"drop-active": isDragActive,
|
|
})}
|
|
{...getRootProps()}
|
|
>
|
|
<span className="home-upload-text">
|
|
<h3>Upload your {directoryMode ? "Directory" : "Files"}</h3>
|
|
Drop your {directoryMode ? "directory" : "files"} here to pin to Skynet
|
|
</span>
|
|
<Button iconLeft>
|
|
<Folder />
|
|
Browse
|
|
</Button>
|
|
</div>
|
|
<input {...getInputProps()} className="offscreen" />
|
|
<button
|
|
type="button"
|
|
className="home-upload-mode-switch link"
|
|
onClick={() => setDirectoryMode(!directoryMode)}
|
|
>
|
|
{directoryMode ? "⇐ Switch back to uploading files" : "Do you want to upload entire directory?"}
|
|
</button>
|
|
{directoryMode && (
|
|
<p className="home-upload-directory-mode-notice">
|
|
Please note that directory upload is not a standard browser feature and the browser support is limited.
|
|
To check whether your browser is compatible, visit{" "}
|
|
<a
|
|
href="https://caniuse.com/#feat=mdn-api_htmlinputelement_webkitdirectory"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="link"
|
|
>
|
|
caniuse.com
|
|
</a>
|
|
.
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="home-upload-retrieve">
|
|
<div className="home-upload-text">
|
|
<h3 id="skylink-retrieve-title">Have a Skylink?</h3>
|
|
<p>Paste the link to retrieve your file</p>
|
|
|
|
<form
|
|
className={classNames("home-upload-retrieve-form", { invalid: skylink && !isValidSkylink(skylink) })}
|
|
onSubmit={handleSkylink}
|
|
>
|
|
<input
|
|
name="skylink"
|
|
type="text"
|
|
placeholder="sia://"
|
|
aria-labelledby="skylink-retrieve-title"
|
|
onChange={(event) => setSkylink(event.target.value)}
|
|
/>
|
|
<button type="submit" aria-label="Retrieve file">
|
|
<DownArrow />
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{files.length > 0 && (
|
|
<div className="home-uploaded-files">
|
|
{files.map((file, i) => {
|
|
return <UploadFile key={i} {...file} />;
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<p className="bottom-text">
|
|
Upon uploading a file, Skynet generates a 46 byte link called a <strong>Skylink</strong>. This link can then be
|
|
shared with anyone to retrieve the file on any Skynet Webportal.
|
|
</p>
|
|
|
|
<Deco3 className="deco-3" />
|
|
<Deco4 className="deco-4" />
|
|
<Deco5 className="deco-5" />
|
|
</div>
|
|
);
|
|
}
|