Does creating Media by LocalAPI triggers upload file ?

henrituan3 years ago

1 2

• Selected Answer
  

  jmikrut

  3 years ago

  Hey @henrituan — I can give you a few answers here. First up, a few questions:

  I'm writing a custom media (audio) upload function. Since my storage is on S3, and I want to have custom API response, I opted to use a custom express route with LocalAPI instead of payload REST endpoint.

  First up, what types of things are you trying to do to your custom response? You may be able to accomplish what you need with afterRead hooks on a collection but if there's something else that you'd like to modify from our built-in REST responses, which you can't do now, I'd be happy to brainstorm how to expose what you need so you can re-use built-in endpoints. But, if you do indeed want to have a custom REST endpoint, this should be 100% doable.

  Next, have you seen the payload-plugin-cloud-storage package? It helps you automatically ship off files to S3 or similar, and this might be of use to you:

  https://www.npmjs.com/package/payload-plugin-cloud-storage

  Finally, if you do want to use Payload's Local API to upload files, right now the local create operation requires a file path to a locally stored file, and then automatically parses all information it needs from the file that is read from disk. This however could be expanded on, so that the create operation can directly take a file instead of reading it from disk. We would add a new property to the arguments called file and then use that instead of getting a file by path.

  This would all need to be done in the following file:
  https://github.com/payloadcms/payload/blob/master/src/collections/operations/local/create.ts

  If you would like to make a PR to the create operation, please do! Otherwise I think we can get to this shortly as well.

  Let me know!

  5 replies
• 

  henrituan3 years ago

  Thanks @jmikrut ,

  1st question: My usecase is batch-uploading mp3 files. I used this library and it requires a custom REST response for each uploaded file in the batch.
  I certainly can use other library like react-dropzone to avoid this constraint, but I feel like an option to send file into payload.create will be useful for many other usecases.

  2nd question: yes, I did use payload-plugin-cloud-storage, however there is some constraints in the plugin (I can't have file prefix in bucket name), so I stop using the library. I then implemented a simple S3 uploading function so the plugin is not so neccessary.

  Finally: Yes I'll look into it and summit PR !

• 

  henrituan3 years ago

  Hi @jmikrut,

  Here is the PR following our discussion: #708
  PS: I did not add any test because I didn't know where to add

• 

  mrwebninja12 months ago

  Hey @henrituan — I can give you a few answers here. First up, a few questions:

  I'm writing a custom media (audio) upload function. Since my storage is on S3, and I want to have custom API response, I opted to use a custom express route with LocalAPI instead of payload REST endpoint.

  First up, what types of things are you trying to do to your custom response? You may be able to accomplish what you need with afterRead hooks on a collection but if there's something else that you'd like to modify from our built-in REST responses, which you can't do now, I'd be happy to brainstorm how to expose what you need so you can re-use built-in endpoints. But, if you do indeed want to have a custom REST endpoint, this should be 100% doable.

  Next, have you seen the payload-plugin-cloud-storage package? It helps you automatically ship off files to S3 or similar, and this might be of use to you:

  https://www.npmjs.com/package/payload-plugin-cloud-storage

  Finally, if you do want to use Payload's Local API to upload files, right now the local create operation requires a file path to a locally stored file, and then automatically parses all information it needs from the file that is read from disk. This however could be expanded on, so that the create operation can directly take a file instead of reading it from disk. We would add a new property to the arguments called file and then use that instead of getting a file by path.

  This would all need to be done in the following file: https://github.com/payloadcms/payload/blob/master/src/collections/operations/local/create.ts

  If you would like to make a PR to the create operation, please do! Otherwise I think we can get to this shortly as well.

  Let me know!

  @jmikrut can you provide any example with payload cms 3 for uploading files using payload local API

• 

  henrituan7 months ago

  @mrwebninja you can file that example in this docs

• 

  nikolailehbrink5 months ago

  That’s exactly what I’m looking for as well, @mrwebninja, did you find a solution?

  I saw your MR, @henrituan, but I think what people here are wondering is how to handle this not at the collection level (what’s that file actually for?) but for individual fields instead.

  For example, let’s say I have the following fields:

  fields: [
    // ...
    {
      name: 'clientSignature',
      type: 'upload',
      relationTo: 'base_media',
    },
    {
      name: 'managerSignature',
      type: 'upload',
      relationTo: 'base_media',
    },
  ]

  In my server action, I receive multiple file instances like this:

  export const schema = z.object({
    // ...
    managerSignature: z.file(),
    clientSignature: z.file(),
  })
  
  const { success, data } = schema.safeParse(formData)

  Now, I want to upload both images directly to Payload via the local API.
  However, there doesn’t seem to be a way to pass File objects directly to individual fields:

  

  Ideally, I’d like to do something like this:

  const handover = await payload.create({
    collection: 'operations_pickup',
    data: {
      handover: {
        ...data,
        clientSignature: { file: data.clientSignature },
        managerSignature: { file: data.managerSignature },
      },
    },
  })

  Is this somehow possible @jmikrut ?

• 

  shamimevatix7 months ago

  So, is there any solution? I am trying to achieve the same thing. Struggling to upload one or multiple files with custom endpoints since I don't want to use the Media uploader of payload.

  1 reply
  

  henrituan7 months ago

  If you are talking about a solution to upload File via local API, yes it's already implemented in #708.

  Following this docs, you can pass a file argument in payload.create(...) api.