how to use dropzonejs upload image in front page?

[bookyo]

how to use dropzonejs upload image in front page?

type File {
id: ID
path: String
filename: String
originalFilename: String
mimetype: String
encoding: String
publicUrl: String
}

i dont know how to use graphql upload file to server.

[MadeByMike]

Hi @bookyo, This one is not really a Keystone question... except maybe the part about the graphQL API. Anyway let me try and give you some general direction. But because this question not to specific you will have to fill in the gaps:

• First make sure you have set-up the file adapter correctly. Test and make sure it's working in the adminUI. It should look something like this (assuming a local file adapter):

Adapter Config:

const fileAdapter = new LocalFileAdapter({
  src: `uploads`,
  path: `/uploads`
});

Field config:

file: {
  type: File,
  adapter: fileAdapter
},

• Check out the graphQL explorer to test out the mutation you need to write. The default URL for this is: /admin/graphiql

A mutation for create looks something like this:

mutation {
  createYourListName(data: { file: FILE_OBJECT }) {
    id
  }
}

With dropzone you should be able to get a file object: https://developer.mozilla.org/en-US/docs/Web/API/File and upload this via graphQL.