multi image upload with arrays, sample code included

[Celestialme]

I wanted to create some plugin which would duplicate drupal multiimage upload. briefly what drupal does is when you select multiple image it uploads all of them and populates with fields for data. i have created similar plugin which uploads images directly and populates fields using array field. but i am sure you can do better thats why i am putting it inside feature request.

customField.tsx

import React, { useCallback,useRef } from 'react';
import { Field } from 'payload/types';
import axios from 'axios';
import {useConfig} from "payload/dist/admin/components/utilities/Config"
import {useAllFormFields,reduceFieldsToValues } from 'payload/components/forms';
import  {useDocumentInfo} from "payload/dist/admin/components/utilities/DocumentInfo"
const uploadField = (props) => {
  let {collection:parent_collection,id} = useDocumentInfo();
  let [fields,dispatchFields] = useAllFormFields()
  let old_data = reduceFieldsToValues(fields,true)
  let array_name = props.array
  
 
  const { serverURL, routes: { api },collections } = useConfig();
  const relational_collection = collections.find((coll) => coll.slug === props.relationTo);

  

var imagefile =useRef<HTMLInputElement>(null)
async function sendData(){
  let images = [];
  let files = imagefile.current.files
  for(let i=0;i<files.length;i++){
  let formData = new FormData();

formData.append("file", files[i]);
formData.append("_payload", JSON.stringify({"alt":imagefile.current.files[i].name}));
let image = (await axios.post(`${serverURL}${api}/${relational_collection.slug}`, formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
})).data.doc.id
console.log(image)
images.push({image})
}
if(id){
  images = [...images,...old_data[array_name]||[]];
  let obj = {}
  obj[array_name] = images
 await axios.patch(`${serverURL}${api}/${parent_collection.slug}/${id&&id}`, obj)
  window.location.reload()
}else{
  let obj = {}
  obj[array_name] = images
  let doc_id = (await axios.post(`${serverURL}${api}/${parent_collection.slug}`, obj)).data.doc.id
 window.location.href = `/admin/collections/${parent_collection.slug}/${doc_id}`
}

}
return (
  <>
  <input type="file" ref={imagefile} multiple/>
  <a onClick={sendData}>send</a>
  </>
)
}
type ArrayController = Field & { array: string }

const customField: ArrayController = {

  name: 'customField',
  type: 'upload',
  array:"images_upload",
  relationTo:"media",
  admin: {
    
    components:{
    Field:uploadField
  }
}
};

export default customField;

example collection

fields: [
    customField,
    {
      name:"images_upload",
      type:"array",
      fields:[
       {name:"name",type:"text"},
       {name:"alt",type:"text"}
        , 
      {
        name:"image",
      type:"upload",
      relationTo:"media"
    }
    
      ]
    }


],

select images, click send and it will populate array. don't mind styling yet

[Rar9]

Thanks, Please add the custome media fields that render outside the media display