Upload media with remix and graphql
Solved
Accepted Solution (1)
Thanks! I have no idea how, but I've fifxed it. But now I have a second problem.
Here's my code:
const prepareFiles = (files) => files.map(file => ({
filename: file.name,
mimeType: file.type,
resource: 'IMAGE',
fileSize: file.size.toString(),
}));
const prepareFilesToCreate = (stagedTargets, files) => stagedTargets.map((stagedTarget, index) => {
return {
originalSource: stagedTarget.resourceUrl,
contentType: 'IMAGE',
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
parameters {
name
value
}
}
userErrors {
field,
message
}
}
}
`, { variables: { input: preparedFiles }});
const response = await result.json();
const filesSS = 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),
}
});
const ll = await filesSS.json()
console.log(1111, ll.data.fileCreate.files)
console.log(5555, ll.data.fileCreate.userErrors)
return {
stagedTargets: response.data.stagedUploadsCreate.stagedTargets,
errors: response.data.stagedUploadsCreate.userErrors
}
}
And here's console.log() results:
image is null.
I tried to use different file formats, different sizes and so on...
On the screenshot result of jpg 400kb.
And when I go to content=>files I see errors. What am I doing wrong?
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 && <DropZone.FileUpload />;
const uploadedFiles = files.length > 0 && (
<div style={{ padding: "0" }}>
<LegacyStack vertical>
{files.map((file, index) => (
<LegacyStack alignment="center" key={index}>
<Thumbnail
size="small"
alt={file.name}
source={
validImageTypes.includes(file.type)
? window.URL.createObjectURL(file)
: ""
}
/>
<div>
{file.name}{" "}
<Text variant="bodySm" as="p">
{file.size} bytes
</Text>
</div>
</LegacyStack>
))}
</LegacyStack>
</div>
);
console.log(files);
const generateProduct = () => {
const filename = files[0]?.name;
const filetype = files[0]?.type;
const filesize = files[0]?.size;
submit({ filename, filetype, filesize }, { replace: true, method: "POST" });
};
return (
<Page>
<BlockStack gap="500">
<Layout>
<Layout.Section>
<Card>
<InlineStack gap="300">
<DropZone onDrop={handleDropZoneDrop}>
{uploadedFiles}
{fileUpload}
</DropZone>
<Button loading={isLoading} onClick={generateProduct}>
Generate a product
</Button>
{actionData?.product && (
<Button
url={`shopify:admin/products/${productId}`}
target="_blank"
variant="plain"
>
View product
</Button>
)}
</InlineStack>
{actionData?.imageUserErrors && (
<Box>
<p>Errors occurred while adding image:</p>
<ul>
{actionData.imageUserErrors.map((error, index) => (
<li key={index}>
<strong>{error.field}: </strong>
{error.message}
</li>
))}
</ul>
</Box>
)}
</Card>
</Layout.Section>
</Layout>
</BlockStack>
</Page>
);
};
export default Index;
this is my code please replay
hello EvilGranny, I will share my is working without any error but when I see the browser in the network check then image status upload shows but content in the file does not upload my images. so please let me know of any issues
import React, { useCallback, useEffect, useState, useRef } 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";
import type { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/node";
export const loader = async ({ request }: LoaderFunctionArgs) => {
await authenticate.admin(request);
return null;
};
export const action = async ({ request }: ActionFunctionArgs) => {
const { admin } = await authenticate.admin(request);
const color = ["Red", "Orange", "Yellow", "Green"][
Math.floor(Math.random() * 4)
];
const requestBody = await request.text();
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,
},
];
const prepareFiles = (files: { name: string | null; type: string | null; size: string | null; }[]) =>
files.map((file) => ({
filename: file.name,
mimeType: file.type,
resource: file.type?.includes("image") ? "IMAGE" : "FILE",
fileSize: file.size?.toString(),
httpMethod: "PUT",
}));
const preparedFiles = prepareFiles(files);
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 } },
);
const uplodeFileJson = await uploadFileResponse.json();
const resourceurl = uplodeFileJson.data.stagedUploadsCreate.stagedTargets[0].resourceUrl;
const fileCreateResponse = await admin.graphql(
`#graphql
mutation fileCreate($files: [FileCreateInput!]!) {
fileCreate(files: $files) {
files {
alt
createdAt
fileErrors {
code
details
message
}
fileStatus
preview {
image {
url
}
status
}
}
userErrors {
field
message
}
}
}`,
{
variables: {
files: {
alt: "Image",
contentType: "IMAGE",
originalSource: resourceurl,
},
},
},
);
const fileCreateJson = await fileCreateResponse.json();
return ({
stagedUpload: uplodeFileJson,
fileCreate: fileCreateJson,
resourceurl: resourceurl
});
};
export default function Index() {
const nav = useNavigation();
const actionData = useActionData();
const submit = useSubmit();
const isLoading = ["loading", "submitting"].includes(nav.state) && nav.formMethod === "POST";
useEffect(() => {
if (actionData) {
shopify.toast.show("Product created");
}
}, [actionData]);
const [files, setFiles] = useState<File[]>([]);
const inputRef = useRef<HTMLInputElement>(null);
const handleDropZoneDrop = useCallback(
async (dropFiles: File[], acceptedFiles: File[], rejectedFiles: File[]) => {
if (acceptedFiles.length) {
setFiles((prevFiles) => [...prevFiles, ...acceptedFiles]);
for (const file of acceptedFiles) {
console.log(file.name);
console.log(file.size);
console.log(file.type);
}
}
},
[],
);
const validImageTypes = ["image/gif", "image/jpeg", "image/png"];
const fileUpload = !files.length && <DropZone.FileUpload />;
const uploadedFiles = files.length > 0 && (
<div style={{ padding: "0" }}>
<LegacyStack vertical>
{files.map((file, index) => (
<LegacyStack alignment="center" key={index}>
<Thumbnail
size="small"
alt={file.name}
source={
validImageTypes.includes(file.type)
? window.URL.createObjectURL(file)
: ""
}
/>
<div>
{file.name}{" "}
<Text variant="bodySm" as="p">
{file.size} bytes
</Text>
</div>
</LegacyStack>
))}
</LegacyStack>
</div>
);
const generateProduct = () => {
const filename = files[0]?.name;
const filetype = files[0]?.type;
const filesize = files[0]?.size;
submit({ filename, filetype, filesize }, { replace: true, method: "POST" });
};
return (
<Page>
<BlockStack gap="500">
<Layout>
<Layout.Section>
<Card>
<InlineStack gap="300">
<DropZone onDrop={handleDropZoneDrop}>
{uploadedFiles}
{fileUpload}
</DropZone>
<Button loading={isLoading} onClick={generateProduct}>
Generate a product
</Button>
</InlineStack>
</Card>
</Layout.Section>
</Layout>
</BlockStack>
</Page>
);
};.
i will share some screenshots.
