Upload media with remix and graphql

Retired Boards Appdev Merchandising
8

I’ve found the solution. This code works, but not for video files. When I’m uploading video files, I have an error: “No content”

import {fetch, FormData} from "@remix-run/node";

const prepareFiles = (files) => files.map((file) => ({
  filename: file.name,
  mimeType: file.type,
  resource: file.type.includes('image') ? 'IMAGE' : 'VIDEO',
  fileSize: file.size.toString(),
  httpMethod: 'POST',
}));

const prepareFilesToCreate = (stagedTargets, files, contentType) => stagedTargets.map((stagedTarget, index) => {
  return {
    originalSource: stagedTarget.resourceUrl,
    contentType: files[index].type.includes('image') ? 'IMAGE' : 'VIDEO',
    filename: files[index].name,
  };
});

export const uploadFile = async (files, graphql) => {
  const preparedFiles = prepareFiles(files);

  const result = await graphql(`
    mutation stagedUploadsCreate($input: [StagedUploadInput!]!) {
      stagedUploadsCreate(input: $input) {
        stagedTargets {
          resourceUrl
          url
          parameters {
            name
            value
          }
        }
        userErrors {
          field,
          message
        }
      }
    }
  `, { variables: { input: preparedFiles }});

  const response = await result.json();

  const promises = [];

  files.forEach((file, index) => {
    const url = response.data.stagedUploadsCreate.stagedTargets[index].url;
    const params = response.data.stagedUploadsCreate.stagedTargets[index].parameters;
    const formData = new FormData();

    params.forEach((param) => {
        formData.append(param.name, param.value)
    })
    formData.append('file', file);

    const promise = fetch(url, {
        method: 'POST',
        body: formData,
    });
    promises.push(promise);
  });

  await Promise.all(promises);

  await graphql(`
      mutation fileCreate($files: [FileCreateInput!]!) {
        fileCreate(files: $files) {
          files {
            id,
            preview {
              image {
                 url
              }
            }
          }
          userErrors {
            field
            message
          }
        }
      }
    `, {
      variables: {
        files: prepareFilesToCreate(response.data.stagedUploadsCreate.stagedTargets, files),
      }
  });

  return {
      stagedTargets: response.data.stagedUploadsCreate.stagedTargets,
      errors: response.data.stagedUploadsCreate.userErrors
  }
}