search

pqina / filepond

🌊 A flexible and fun JavaScript file upload library
https://pqina.nl/filepond
MIT License
15.16k stars 825 forks source link

[Question] Async upload and additional metadata #584

Closed krispetkov closed 4 years ago

krispetkov commented 4 years ago

Hello guys,

First of all congratulations for the amazing tool that you managed to create!

I have the following situation: My web site has an add/update item form which contains few text fields and I'm using Filepond for images which can be attached to that item. I'm using the async upload of images and everything is perfect. Also I'm implementing a scenario where the user can select an image and mark it as a default/primary image (for now when the user clicks on image I'm adding a red border to that image). When I submit the form (with POST) the images ids are send to the back-end and I can process them,in my MVC controller, if I need to. But I also need to know which image was selected as primary. Currently the back-end receives just the images ids:

  1. Is it possible to embrace the metadata somehow or to use some mix between the async and file encode plugin (without having the entire file encoded in base64)?
  2. And vice versa when I load preloaded files from the server as local (when the user wants to update an item) how can I return some metadata (e.g. the file is marked as primary/default) to the front-end, so I can mark this image with a red border?

Technology used: Asp.Net MVC Core 3.1

Thank you in advance!

rikschennink commented 4 years ago

Thanks!

FilePond will upload both the file and the metadata to the server.process end point.

I suggest uploading the selected value separately.

You can set metadata to the each file in the files prop. https://pqina.nl/filepond/docs/patterns/api/filepond-object/#setting-initial-files

krispetkov commented 4 years ago

@rikschennink you are right that FilePond will upload them during the server.process but in my case the server.process uploads the files to the server and the server saves them as temp files, after this the server returns an ID as a response for each file (i.e. some-guid). The form is still not submitted. After this the user may decide to select one of the images to be primary/default (clicks on some image) and when submit the form I don't know how to pass this information - the selected image metadata back to the server in addition to my other data (form fields), because in my backend I'm receiving only the hidden inputs (image ids) but no any metadata.

rikschennink commented 4 years ago

@KrisPetkov Add another field where you store the selection?

krispetkov commented 4 years ago

@rikschennink currently nowhere that's why I was wondering if it is possible to store the selection inside the concrete file's metadata and to pass the file's metadata to the server on form submit instead just the file ID. But if it is not possible I guess I will store the selection in a separate field

rikschennink commented 4 years ago

That's currently not possible, you'd have to sync the values yourself using onupdatefiles

krispetkov commented 4 years ago

Thank you for the information! I will close the issue.