Datei ist leer | Shopify StagedUploadsCreate

Deutsch Diskussion Technische Fragen & Antworten
1

Ich arbeite derzeit an dem Hochladen von Dateien über die stagedUploadsCreate Mutation in node.js.
Ich habe es derzeit geschafft, eine Datei in den Shopify Staged Upload Storage auf Google Cloud hochzuladen, aber die Datei ist leer!

Das ist der Code:

  1. Erstellen des Staged Uploads:
const CREATE_STAGED_UPLOADS = `
mutation stagedUploadsCreate($input: [StagedUploadInput!]!) {
  stagedUploadsCreate(input: $input) {
    stagedTargets {
      resourceUrl
      url
      parameters {
        name
        value
      }
    }
    userErrors {
      field
      message
    }
  }
}
`;

const response = await client.query({
        data: {
           query: CREATE_STAGED_UPLOADS,
            variables: {
                "input": [
                    {
                      "resource": "FILE",
                      "filename": file.name,
                      "mimeType": fileType.toString(),
                      "fileSize": file.size.toString(),
                      "httpMethod": "POST"
                    }
                  ]
            },
        },
     });

Dies führt zu einer erfolgreichen Antwort.

  1. Dann sende ich einen Fetch Request an den URL von der stagedUploadsCreate Mutation:
const parameters = response?.body?.data?.stagedUploadsCreate?.stagedTargets[0]?.parameters;
const url = response?.body?.data?.stagedUploadsCreate?.stagedTargets[0].url;

const formData = new FormData();

     parameters.forEach(({name, value}) => {
        formData.append(name, value)
      });

      formData.append('file', file);

      const response = await fetch(url, {
        method: 'POST',
        body: formData
});

Die Antwort gibt ebenfalls 201 “Created” mit dem folgenden Xml-Objekt zurück:

{
   PostResponse: {
     Location: [
       'https://storage.googleapis.com/shopify-staged-uploads/tmp/72115945762/files/63bd5db8-afc9-435b-bc2b-a0d0b5be791f/check-2.png'
     ],
     Bucket: [ 'shopify-staged-uploads' ],
     Key: [
       'tmp/72115945762/files/63bd5db8-afc9-435b-bc2b-a0d0b5be791f/check-2.png'
     ],
     ETag: [ '"************************"' ]
   }
 }

Aber wenn Sie die resourceUrl aus der createStagedUpload-Mutation und die Location url aus der xml-Antwort aufrufen, wird ein leeres Bild angezeigt:

Bildschirm­foto 2023-02-21 um 18.39.29.png
Bildschirm­foto 2023-02-21 um 18.39.29.png2736×1441 79.2 KB

Ich hoffe, dass ich dieses Problem ausreichend und verständlich erläutert habe.

Vielen Dank im Voraus!

2

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,

3

Hallo @Gabe

Danke für deine schnelle und hilfreiche Antwort!

Es hat funktioniert, ich danke dir sehr!

4

Super freut mich! :wink: