Datei ist leer | Shopify StagedUploadsCreate

Topic summary

Problem: Eine Datei wird erfolgreich über die stagedUploadsCreate Mutation in Shopify hochgeladen, erscheint aber als leer im Google Cloud Storage.

Technischer Kontext:

  • Der Upload-Prozess erfolgt in zwei Schritten: Erst wird ein Staged Upload erstellt, dann die Datei per POST-Request hochgesendet
  • Die Mutation liefert eine erfolgreiche Antwort (Status 201), aber die hochgeladene Datei hat keine Inhalte
  • Das Problem liegt vermutlich darin, dass die Datei nicht vollständig gelesen wurde, bevor sie ins FormData-Objekt eingefügt wurde

Lösung:

  • Verwendung der fs.readFileSync-Methode zum Lesen der Datei in einen ArrayBuffer
  • Erstellung eines Blob-Objekts mit korrektem MIME-Type aus dem ArrayBuffer
  • Hinzufügen des Blob-Objekts (statt der ursprünglichen Datei) zum FormData-Objekt

Ergebnis: Das Problem wurde erfolgreich gelöst – die Datei wird nun korrekt hochgeladen und angezeigt.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.

Hey @TheDeveloper

Danke für die Angaben und es ist schwer zu sagen wo hier der Wurm liegt ¯_(ツ)_/¯.

Ein paar Vorschläge gebe ich unten die ich aus unserer Entwickler Doku entnommen habe, aber bei weiteren Fragen empfehle ich das mit Experten zu besprechen.

Die Datei wurde also erfolgreich hochgeladen, stimmt dessen Größe aber nicht mit der tatsächlichen Größe der Datei überein, da es sich um eine leere Datei handelt. Ein möglicher Grund könnte sein, dass die Datei nicht vollständig gelesen wurde, bevor sie in das FormData-Objekt eingefügt wurde. Hier könnte man vielleicht die “readAsArrayBuffer” -Methode der FileReader-API verwenden, um die Datei zu lesen, keine Ahnung, nur so eine Idee ¯_(ツ)_/¯.

Verwende vielleicht die “fs” -Library im Code, um auf das Dateisystem zuzugreifen. Lese dann die Datei mit der “fs.readFileSync” -Methode in ein ArrayBuffer ein wie folgt:

const fileContent = fs.readFileSync(filePath);
const arrayBuffer = new Uint8Array(fileContent).buffer;

Daraufhin kannst du vielleicht das ArrayBuffer verwenden, um eine Blob-Datei mit dem richtigen MIME-Typ zu erstellen:

const blobFile = new Blob([arrayBuffer], { type: fileType });
blobFile.name = file.name;

Füge dann die Blob-Datei zum FormData-Objekt hinzu:

formData.append('file', blobFile);

Führe dann den Fetch Request erneut aus und schaue, ob das hochgeladene Bild jetzt korrekt angezeigt wird.

Diese Angaben sind, wie gesagt, ohne Gewähr und ein Experte bin ich auch nicht. Aber vielleicht bringt das dich auf den richtigen Pfad das Problem zu lösen!

VG,