Supabase Resumable Uploads - Upload files to storage with Uppy error:"Invalid Input", "message": "The object name contains invalid characters"

Question

I want to implement inside my web-app a file-upload with Uppy package together with Supabase.

I followed this tutorial: https://www.youtube.com/watch?v=JLaq0x9GbbY

When I'm using this exact same code I'm getting this error on upload:

"error": "Invalid Input", "message": "The object name contains invalid characters"

After searching for a solution, I found this code: https://github.com/supabase/supabase/blob/master/examples/storage/resumable-upload-uppy/index.html (source: https://supabase.com/docs/guides/storage/uploads/resumable-uploads#uppyjs-example)

But again, exact same error as previous one.

"error": "Invalid Input", "message": "The object name contains invalid characters"

To be clear, I have tried several types of files: test.png, image.jpeg, etc. Nothing works.

My code:

"use client";
import React, { useEffect, useState } from "react";
import Uppy from "@uppy/core";

import { Dashboard } from "@uppy/react";

import Tus from "@uppy/tus";
import "@uppy/core/dist/style.min.css";
import "@uppy/dashboard/dist/style.min.css";
import { createBrowserClient } from "@supabase/ssr";

function ImagesDragzone() {
  const [images, setImages] = useState<any[]>([]);
  const [loading, setIsLoading] = useState(false);
  const [error, setError] = useState<any>(null);

  const SUPABASE_ANON_KEY = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
  const SUPABASE_PROJECT_ID = "vopvzwbjhdsvhnwvluwb";
  const STORAGE_BUCKET = "library";
  const BEARER_TOKEN = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;

  const supabaseStorageURL = `https://${SUPABASE_PROJECT_ID}.supabase.co/storage/v1/object/public/`;

  const supabase = createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  );

  var uppy = new Uppy().use(Tus, {
    endpoint: supabaseStorageURL,
    headers: {
      authorization: `Bearer ${BEARER_TOKEN}`,
      apikey: SUPABASE_ANON_KEY as string,
    },
    uploadDataDuringCreation: true,
    chunkSize: 6 * 1024 * 1024,
    allowedMetaFields: [
      "bucketName",
      "objectName",
      "contentType",
      "cacheControl",
    ],
  });

  useEffect(() => {
    getBucket();

    uppy.on("file-added", (file) => {
      const supabaseMetadata = {
        bucketName: STORAGE_BUCKET,
        objectName: file.name,
        contentType: file.type,
      };

      file.meta = {
        ...file.meta,
        ...supabaseMetadata,
      };

      console.log("file added", file);
    });

    uppy.on("complete", (result) => {
      console.log(
        "Upload complete! We’ve uploaded these files:",
        result.successful
      );
    });
  }, []);

  async function getBucket() {
    setIsLoading(true);
    const { data, error } = await supabase.storage.from("library").list();

    // console.log(data);
    // console.log(error);

    if (error) {
      setError(error);
    } else {
      setImages(data);
    }

    setIsLoading(false);
  }
  return (
    <div>
      <h1>Image Showcase</h1>
      {error && <div>errror</div>}

      <div>
        <Dashboard uppy={uppy} showProgressDetails={true} />
      </div>

      {loading && <div>Loading...</div>}
      {!loading && images.length > 0 && (
        <>
          <h1>My images</h1>
          <ul>
            {images.map((image) => (
              <li key={image.name}>{/* uploaded image here */}</li>
            ))}
          </ul>
        </>
      )}
    </div>
  );
}

export default ImagesDragzone;

Answer 1

Currently, Supabase Storage has a stricter validation on the file names, they will probably relax this in the near future.

One way to fix this is pretty simple. Simply generate the fileName your self instead of using the original file name.

uppy.on("file-added", (file) => {
      const supabaseMetadata = {
        bucketName: STORAGE_BUCKET,
        objectName: uuid(), // <-- Generate the file name
        contentType: file.type,
      };

      file.meta = {
        ...file.meta,
        ...supabaseMetadata,
      };

      console.log("file added", file);
    });