Upload File and Images with react.js

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.

Hey darsh!

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

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}]}]}

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:

  1. Get the URL from the images object you already have. In your case it’s: https://cdn.filestackcontent.com/…"
  2. 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,
            },
        }
    }
  1. 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

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

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.

1 Like