Hii can you please see my code and say what i am doing wrong hear the product is creating but the image is not uploading and show
- Image: Media failed to process because the image could not be processed
import React, { useCallback, useEffect, useState } from "react";
import { json } from "@remix-run/node";
import { useActionData, useNavigation, useSubmit } from "@remix-run/react";
import {
Page,
Layout,
Card,
Button,
BlockStack,
Box,
InlineStack,
DropZone,
LegacyStack,
Thumbnail,
Text,
} from "@shopify/polaris";
import { authenticate } from "../shopify.server";
export const loader = async ({ request }) => {
await authenticate.admin(request);
return null;
};
export const action = async ({ request }) => {
const { admin } = await authenticate.admin(request);
const color = ["Red", "Orange", "Yellow", "Green"][
Math.floor(Math.random() * 4)
];
const requestBody = await request.text();
console.log(
"start:----------------------------------------------------------------------------------",
);
const formData = new URLSearchParams(requestBody);
const name = formData.get("filename");
const type = formData.get("filetype");
const size = formData.get("filesize");
const files = [
{
name: name,
type: type,
size: size,
},
];
console.log("File Details:", files);
const prepareFiles = (files) =>
files.map((file) => ({
filename: file.name,
mimeType: file.type,
resource: file.type.includes("image") ? "IMAGE" : "FILE",
fileSize: file.size.toString(),
httpMethod: "POST",
}));
const preparedFiles = prepareFiles(files);
console.log("Prepared Files for Upload:", preparedFiles);
const uploadFileResponse = await admin.graphql(
`#graphql
mutation stagedUploadsCreate($input: [StagedUploadInput!]!) {
stagedUploadsCreate(input: $input) {
stagedTargets {
resourceUrl
url
parameters {
name
value
}
}
userErrors {
field
message
}
}
}
`,
{ variables: { input: preparedFiles } },
);
console.log(
"Upload File Response:",
JSON.stringify(uploadFileResponse, null, 2),
);
const uplodeFileJson = await uploadFileResponse.json();
if (uplodeFileJson.data.stagedUploadsCreate?.userErrors?.length) {
console.log(
"Upload Errors:",
uplodeFileJson.data.stagedUploadsCreate.userErrors,
);
}
const resourceurl =
uplodeFileJson.data.stagedUploadsCreate?.stagedTargets[0]?.resourceUrl;
const productResponse = await admin.graphql(
`#graphql
mutation populateProduct($input: ProductInput!) {
productCreate(input: $input) {
product {
id
title
handle
status
}
}
}`,
{
variables: {
input: {
title: `${color} Snowboard`,
},
},
},
);
console.log(
"Product Creation Response:",
JSON.stringify(productResponse, null, 2),
);
const productResponseJson = await productResponse.json();
const productId = productResponseJson.data?.productCreate?.product?.id;
// Add image to the product
const imageResponse = await admin.graphql(
`mutation productCreateMedia($media: [CreateMediaInput!]!, $productId: ID!) {
productCreateMedia(media: $media, productId: $productId) {
media {
alt
mediaContentType
status
}
mediaUserErrors {
field
message
}
product {
id
title
}
}
}`,
{
variables: {
media: {
alt: "Image",
mediaContentType: "IMAGE",
originalSource: resourceurl,
},
productId: productId,
},
},
);
console.log("Image Response:", JSON.stringify(imageResponse, null, 2));
const imageResponseJson = await imageResponse.json();
console.log(
"end:----------------------------------------------------------------------------------",
);
return json({
product: {
id: productId,
imageResponseJson: imageResponseJson,
},
});
};
const Index = () => {
const nav = useNavigation();
const actionData = useActionData();
const submit = useSubmit();
const isLoading =
["loading", "submitting"].includes(nav.state) && nav.formMethod === "POST";
const productId = actionData?.product?.id.replace(
"gid://shopify/Product/",
"",
);
useEffect(() => {
if (productId) {
shopify.toast.show("Product created");
}
}, [productId]);
const [files, setFiles] = useState([]);
const handleDropZoneDrop = useCallback(
async (_dropFiles, acceptedFiles, _rejectedFiles) => {
if (acceptedFiles.length) {
setFiles(acceptedFiles);
}
},
[],
);
const validImageTypes = ["image/gif", "image/jpeg", "image/png"];
const fileUpload = !files.length &&
this is my code please replay
