TUS Upload Issue

[blackchad]

Hello!

I'm working on a proof of concept add which will use Pinata to store files. I am trying to follow your quick guide here: https://docs.pinata.cloud/files/uploading-files#resumable-uploads. I am getting a 201 error: Error: tus: invalid or missing Location header, originated from request. Any suggestions to fix?

Best,

C

[stevedylandev]

Hey there!

Yeah we can definitely take a look! Could you possibly share the code being used and how we can reproduce it? It sorta sounds like trying to actually resume an upload but want to make sure :)

[blackchad]

Here's the function I'm using:

export default function UploadPage() {
  const [file, setFile] = useState<File | null>(null);
  const [url, setUrl] = useState<string>("");
  const [uploading, setUploading] = useState<boolean>(false);
  const [uploadProgress, setUploadProgress] = useState<number>(0);
  const [title, setTitle] = useState<string>("");
  const [description, setDescription] = useState<string>("");
  const [pricePerSecond, setPricePerSecond] = useState<string>("");

  const { address } = useAccount();
  const { writeContract } = useWriteContract();

  const handlePriceChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    if (value === "" || (!isNaN(Number(value)) && Number(value) >= 0)) {
      setPricePerSecond(value);
    }
  };

	const uploadFile: () => void = useCallback(async () => {
		if (!file || !address) {
      alert("No file selected or wallet not connected. Redirecting you to the Ethereum Foundation to get one!");
      window.location.href = "https://ethereum.org/en/wallets/find-wallet/";
      return;
    }

		try {
			setUploading(true);
      setUploadProgress(0);
      const upload = new tus.Upload(file, {
        endpoint: "https://uploads.pinata.cloud/v3/files",
        chunkSize: 50 * 1024 * 1024,
        retryDelays: [0, 3000, 5000, 10000, 20000],
        onUploadUrlAvailable: async function () {
          if (upload.url) {
            setUrl(upload.url);
          }
        },
        metadata: {
          filename: file.name,
          filetype: file.type,
          keyvalues: JSON.stringify({
          creator: address,
          title,
          description,
          pricePerSecond,
        }),
        },
        headers: { Authorization: `Bearer ${process.env.NEXT_PUBLIC_PINATA_JWT}` },
        uploadSize: file.size,
        onError: function(error) {
          console.error("Failed because: " + error);
          setUploading(false);
          alert("Upload failed: " + error.message);
        },
        onProgress: function(bytesUploaded, bytesTotal) {
          const percentage = (bytesUploaded / bytesTotal * 100).toFixed(2);
          console.log(bytesUploaded, bytesTotal, percentage + "%");
          setUploadProgress(Number(percentage));
        },
        onSuccess: async function() {
          console.log("Download URL:", upload.url);
          // Extract CID from the upload URL
          const cid = upload.url?.split('/').pop() || "";
          
          try {
            await writeContract({
              abi: platformAbi,
              address: platformAddress,
              functionName: 'uploadContent',
              args: [
                title,
                description,
                parseFloat(pricePerSecond),
                cid
              ],
            });
            
            setUrl(upload.url || "");
            setUploading(false);
            setUploadProgress(100);
          } catch (error) {
            console.error("Contract interaction failed:", error);
            alert("Failed to record upload on blockchain");
          }
        }
      });

      await upload.start();
		} catch (error) {
			console.error("Upload failed:", error);
      setUploading(false);
      alert("Upload failed: " + (error as Error).message);
		}
	}, [file, address, title, description, pricePerSecond, writeContract]);

[stevedylandev]

Could you give an example of the metadata that is going into the keyvalues? They all need to be strings so I'm curious if that could be throwing an error

[blackchad]

Sure, they are all strings.

Address: 0x${string}
Title: "Book Title"
description: "A desc"
pricePerSecond: "[0-9]"

[stevedylandev]

Hmm gotcha. Is this repo open source or could I get invited so I can play with this a bit more to figure out what's wrong exactly? I'm currently not able to reproduce it so I'd like to dig a bit deep and try some stuff.

[blackchad]

you're in... its messy just warning

[stevedylandev]

Sorry for the delay on this! I believe we found the issue being related to server access controls for headers that can be accessed by the browser. Will let you know when we have it resolved!