Upload File and Images with react.js

darsh · December 6, 2022, 9:19am

Anyone willing to help me figure out why i can’t upload file and images in 8 base using react?

I’m using the 8base for react app. I’ve got normal queries and mutation working, no problem. but when using mutation for file and image upload getting error I don’t know why. if anyone have solution please guide me to solve this error.

here is my code and getting error while upload image with file stack.

<CInputGroup className="mb-4" mode="CREATE" tableschemaname="Contacts"> <PickerDropPane name="images" apikey={'API KEY'} // onSuccess={( res ) => console.log( res )} onUploadDone={( res ) => setData( { ...data, images: res.filesUploaded[ 0 ] } )} // onUploadDone={( res ) => console.log( res.filesUploaded[ 0 ] )} /> </CInputGroup>

(file stack uploader)

export const contactsCreate=gql
mutation contactCreate($data: ContactCreateInput!){ contactCreate(data: $data){ id } };

(Create mutation query.)

Getting error while upload image only.

juan.bojato · December 6, 2022, 5:27pm

Hey darsh!

I hope you are doing well. Can you share your response or an image from the error displayed?

darsh · December 7, 2022, 7:24am

Here is error I’m getting from response.

{"errors":[{"message":"Variable \"$data\" got invalid value { filename: \"645-6452863_profile-image-memoji-brown-hair-man-with-glasses.png\", handle: \"WjvvG9EXRWCVwtBTTPsE\", mimetype: \"image/png\", originalPath: \"645-6452863_profile-image-memoji-brown-hair-man-with-glasses.png\", size: 227543, source: \"local_file_system\", url: \"https://cdn.filestackcontent.com/WjvvG9EXRWCVwtBTTPsE\", uploadId: \"fj098L5eU58DYf2A\", originalFile: { name: \"645-6452863_profile-image-memoji-brown-hair-man-with-glasses.png\", type: \"image/png\", size: 227543 }, status: \"Stored\" } at \"data.images\"; Field \"filename\" is not defined by type \"ContactsImagesRelationInput\".","locations":[{"line":1,"column":24}]},{"message":"Variable \"$data\" got invalid value { filename: \"645-6452863_profile-image-memoji-brown-hair-man-with-glasses.png\", handle: \"WjvvG9EXRWCVwtBTTPsE\", mimetype: \"image/png\", originalPath: \"645-6452863_profile-image-memoji-brown-hair-man-with-glasses.png\", size: 227543, source: \"local_file_system\", url: \"https://cdn.filestackcontent.com/WjvvG9EXRWCVwtBTTPsE\", uploadId: \"fj098L5eU58DYf2A\", originalFile: { name: \"645-6452863_profile-image-memoji-brown-hair-man-with-glasses.png\", type: \"image/png\", size: 227543 }, status: \"Stored\" } at \"data.images\"; Field \"handle\" is not defined by type \"ContactsImagesRelationInput\".","locations":[{"line":1,"column":24}]},{"message":"Variable \"$data\" got invalid value { filename: \"645-6452863_profile-image-memoji-brown-hair-man-with-glasses.png\", handle: \"WjvvG9EXRWCVwtBTTPsE\", mimetype: \"image/png\", originalPath: \"645-6452863_profile-image-memoji-brown-hair-man-with-glasses.png\", size: 227543, source: \"local_file_system\", url: \"https://cdn.filestackcontent.com/WjvvG9EXRWCVwtBTTPsE\", uploadId: \"fj098L5eU58DYf2A\", originalFile: { name: \"645-6452863_profile-image-memoji-brown-hair-man-with-glasses.png\", type: \"image/png\", size: 227543 }, status: \"Stored\" } at \"data.images\"; Field \"mimetype\" is not defined by type \"ContactsImagesRelationInput\".","locations":[{"line":1,"column":24}]},{"message":"Variable \"$data\" got invalid value { filename: \"645-6452863_profile-image-memoji-brown-hair-man-with-glasses.png\", handle: \"WjvvG9EXRWCVwtBTTPsE\", mimetype: \"image/png\", originalPath: \"645-6452863_profile-image-memoji-brown-hair-man-with-glasses.png\", size: 227543, source: \"local_file_system\", url: \"https://cdn.filestackcontent.com/WjvvG9EXRWCVwtBTTPsE\", uploadId: \"fj098L5eU58DYf2A\", originalFile: { name: \"645-6452863_profile-image-memoji-brown-hair-man-with-glasses.png\", type: \"image/png\", size: 227543 }, status: \"Stored\" } at \"data.images\"; Field \"originalPath\" is not defined by type \"ContactsImagesRelationInput\".","locations":[{"line":1,"column":24}]},{"message":"Variable \"$data\" got invalid value { filename: \"645-6452863_profile-image-memoji-brown-hair-man-with-glasses.png\", handle: \"WjvvG9EXRWCVwtBTTPsE\", mimetype: \"image/png\", originalPath: \"645-6452863_profile-image-memoji-brown-hair-man-with-glasses.png\", size: 227543, source: \"local_file_system\", url: \"https://cdn.filestackcontent.com/WjvvG9EXRWCVwtBTTPsE\", uploadId: \"fj098L5eU58DYf2A\", originalFile: { name: \"645-6452863_profile-image-memoji-brown-hair-man-with-glasses.png\", type: \"image/png\", size: 227543 }, status: \"Stored\" } at \"data.images\"; Field \"size\" is not defined by type \"ContactsImagesRelationInput\".","locations":[{"line":1,"column":24}]},{"message":"Variable \"$data\" got invalid value { filename: \"645-6452863_profile-image-memoji-brown-hair-man-with-glasses.png\", handle: \"WjvvG9EXRWCVwtBTTPsE\", mimetype: \"image/png\", originalPath: \"645-6452863_profile-image-memoji-brown-hair-man-with-glasses.png\", size: 227543, source: \"local_file_system\", url: \"https://cdn.filestackcontent.com/WjvvG9EXRWCVwtBTTPsE\", uploadId: \"fj098L5eU58DYf2A\", originalFile: { name: \"645-6452863_profile-image-memoji-brown-hair-man-with-glasses.png\", type: \"image/png\", size: 227543 }, status: \"Stored\" } at \"data.images\"; Field \"source\" is not defined by type \"ContactsImagesRelationInput\".","locations":[{"line":1,"column":24}]},{"message":"Variable \"$data\" got invalid value { filename: \"645-6452863_profile-image-memoji-brown-hair-man-with-glasses.png\", handle: \"WjvvG9EXRWCVwtBTTPsE\", mimetype: \"image/png\", originalPath: \"645-6452863_profile-image-memoji-brown-hair-man-with-glasses.png\", size: 227543, source: \"local_file_system\", url: \"https://cdn.filestackcontent.com/WjvvG9EXRWCVwtBTTPsE\", uploadId: \"fj098L5eU58DYf2A\", originalFile: { name: \"645-6452863_profile-image-memoji-brown-hair-man-with-glasses.png\", type: \"image/png\", size: 227543 }, status: \"Stored\" } at \"data.images\"; Field \"url\" is not defined by type \"ContactsImagesRelationInput\".","locations":[{"line":1,"column":24}]},{"message":"Variable \"$data\" got invalid value { filename: \"645-6452863_profile-image-memoji-brown-hair-man-with-glasses.png\", handle: \"WjvvG9EXRWCVwtBTTPsE\", mimetype: \"image/png\", originalPath: \"645-6452863_profile-image-memoji-brown-hair-man-with-glasses.png\", size: 227543, source: \"local_file_system\", url: \"https://cdn.filestackcontent.com/WjvvG9EXRWCVwtBTTPsE\", uploadId: \"fj098L5eU58DYf2A\", originalFile: { name: \"645-6452863_profile-image-memoji-brown-hair-man-with-glasses.png\", type: \"image/png\", size: 227543 }, status: \"Stored\" } at \"data.images\"; Field \"uploadId\" is not defined by type \"ContactsImagesRelationInput\".","locations":[{"line":1,"column":24}]},{"message":"Variable \"$data\" got invalid value { filename: \"645-6452863_profile-image-memoji-brown-hair-man-with-glasses.png\", handle: \"WjvvG9EXRWCVwtBTTPsE\", mimetype: \"image/png\", originalPath: \"645-6452863_profile-image-memoji-brown-hair-man-with-glasses.png\", size: 227543, source: \"local_file_system\", url: \"https://cdn.filestackcontent.com/WjvvG9EXRWCVwtBTTPsE\", uploadId: \"fj098L5eU58DYf2A\", originalFile: { name: \"645-6452863_profile-image-memoji-brown-hair-man-with-glasses.png\", type: \"image/png\", size: 227543 }, status: \"Stored\" } at \"data.images\"; Field \"originalFile\" is not defined by type \"ContactsImagesRelationInput\".","locations":[{"line":1,"column":24}]},{"message":"Variable \"$data\" got invalid value { filename: \"645-6452863_profile-image-memoji-brown-hair-man-with-glasses.png\", handle: \"WjvvG9EXRWCVwtBTTPsE\", mimetype: \"image/png\", originalPath: \"645-6452863_profile-image-memoji-brown-hair-man-with-glasses.png\", size: 227543, source: \"local_file_system\", url: \"https://cdn.filestackcontent.com/WjvvG9EXRWCVwtBTTPsE\", uploadId: \"fj098L5eU58DYf2A\", originalFile: { name: \"645-6452863_profile-image-memoji-brown-hair-man-with-glasses.png\", type: \"image/png\", size: 227543 }, status: \"Stored\" } at \"data.images\"; Field \"status\" is not defined by type \"ContactsImagesRelationInput\".","locations":[{"line":1,"column":24}]}]}

juan.bojato · December 9, 2022, 3:13pm

According to the error message, it means that you don’t have a file type field. So there are multiple ways to handle this fileUpload. I would recommend the next one:

Get the URL from the images object you already have. In your case it’s: https://cdn.filestackcontent.com/…"
Upload the file to 8base system with the next mutation, passing as parameter the url obtained in the previous step

 mutation uploadTo8baseSystem($url: String!) {
      system {
        fileUploadByUrl(data: { url: $url }) {
          fileId
        }
      }
    }

The above mutation will generate a fileId, which you will use to upload it to your Contacts table. So the next step is:
3. Create a field of type File in your contacts table with the name you want to specify.
4). Execute your contactCreate mutation, adding in the data a property with the name that you specified in step 3 (I’m going to use nameFile as example), and making a create connection, in this way:

{
    "data": {
        address: "",
        email: "",
        ...
        nameFile: {
            create: {
                fileId: fileId,
            },
        }
    }

In this way, you will be able to upload your images to 8base.

If you have any doubts, please reply with your results.

For more information you can check the examples on this page: Files | 8base Docs

darsh · January 3, 2023, 1:31pm

I’m passing state in data property so getting error to find fileID in state

juan.bojato · January 3, 2023, 1:51pm

Hey, you need to get the fileId using the mutation described above in step 1 and 2 from my last reply, then, you can continue with the other steps.

darsh · February 9, 2023, 11:01am

Can you please give me on more details about step 1 and 2, I stuck on that

I already created one column for picture(Name : Picture) but

picture: { create: { fileId: "Ae8JCfSGQwm1KysU5qhL" filename: "Rectangle 11.png" public: true } }

it’s throwing error Like

where can I get those meta data?
Can you please give me one details flow how can I solve this error and all

juan.bojato · February 9, 2023, 2:14pm

Sure.
First of all, run the next query in your API EXPLORER and try to find your file:

query MyQuery {
  filesList {
    items {
      filename
      fileId
      id
    }
  }
}

Because I think that maybe your file is not yet uploaded to 8base database. So, based on that, you should get the URL that you sent to the contactCreate Mutation at the beginning.With that URL you should upload the file to 8base and then continue with the other steps.

If you want, you can show me your entire process step by step to see what’s happening.

darsh · February 10, 2023, 6:23am

First of all I will create update mutation query and create mutation with apollo useMutation hook.
And use pickerDroppane filestack picker as a file picker now when I upload image in picker I will getting that type of response in netwowk.

From the filestack complete response I will Pass to that type of detail in mutation.

picture: 
{create: 
fileId: // file id of filestack handle key from my case : QTUXw6NgS5iG75mRvDgy
filename: //filename of filestack complete response filename // from my case : "645-6452863_profile-image-memoji-brown-hair-man-with-glasses.png"
}
meta: {name: "645-6452863_profile-image-memoji-brown-hair-man-with-glasses.png", type: "image/png",…}
public: true

I will pass metadata also in mutation but getting this type of error.

{"data":null,"errors":[{"message":"File metadata not found","locations":[{"line":2,"column":3}],"path":["consumerUpdate"],"code":"EntityNotFoundError","details":{"fileStack":"File metadata not found"}}]}

here is my variable which can I pass to mutation

const handleChange=( res ) =>
    {
        Updateconsumer( {
            variables: {
                data: {
                    id: window.location.pathname.split( '/' ).at( -1 ),
                    picture: {
                        create: {
                            fileId: res.filesUploaded[ 0 ].handle,
                            filename: res.filesUploaded[ 0 ].filename,
                            public: true,
                            meta: res.filesUploaded[ 0 ].originalFile
                        }
                    }
                }
            }
        } )
    }

here is my mutation query.

    const [ Updateconsumer, { loading } ]=useMutation( CONSUMERUPDATE, {
        refetchQueries: [ { query: consumerById, variables: { id: window.location.pathname.split( '/' ).at( -1 ), } } ],
    } );

However I’m getting error missing metadata when update mutation with upload picture.
what I can do to solve this error.

darsh · February 10, 2023, 8:03am

Note: Please suggest me usage of react 18 version file or image uploade muation.

juan.bojato · February 10, 2023, 2:32pm

Oh, I see the error. This means that you haven’t uploaded the image to 8base. 8base has a table to store all the images from 8base. So, it’s necessary to upload to 8base first, and then you have to execute the uploadConsumer mutation with the fileId that the uploadTo8base mutation responds to you.

Run the mutation. The argument from the mutation is the URL that filestack gives you in the screenshot you uploaded. See below:

Get the fileId from the mutation response. In my case, I run mutations in another way but it doesn’t matter (See below).

export const UploadTo8baseSystem = async (ctx, url) => {
  const MUTATION = gql`
    mutation uploadTo8baseSystem($url: String!) {
      system {
        fileUploadByUrl(data: { url: $url }) {
          fileId
        }
      }
    }
  `;

  const { system } = await ctx.api.gqlRequest(
    MUTATION,
    {
      url,
    },
    { checkPermissions: false }
  );

  return system?.fileUploadByUrl?.fileId ?? "";
};

With the fileId from the mutation, pass it to your Updateconsumer mutation. You only need to pass that, it’s not necessary to pass a filename or meta and that’s it. You have to run two mutations but first, the mutation to upload the fileId to 8base.

Below is a gif of how to upload an image to 8base with a file id and add it to an existing table. In this case, I will use any url, run the first mutation, get its fileId, and pass it to the second mutation (in your case it would be the UpdateConsumer) so it can create the image in its table.

demo

Hope it helps. If you have more doubts, please reply to me

rey · February 13, 2023, 4:08pm

Hi @darsh,

Great to see you in the community! I see you and @juan.bojato did a lot of back and forth here. If he was able to point you in the right direction, could you mark which of his posts helped the most as the solution?