How to use FileUpload to submit a file with InputText.

[leew]

hello,

I was trying to use the InputText and FileUpload together to submit some data to my backend Api using React in my frontend.
here is what i'm trying to do:

Code: Select all

<Dialog visible={CategoryDialog} style={{ width: '650px' }} header="Category Details" modal className="p-fluid" footer={CategoryDialogFooter} onHide={hideDialog}>
                <div className="field">
                    <label htmlFor="name">Title</label>
                    <InputText id="name" value={category.name} onChange={(e) => onInputChange(e, 'name')} required autoFocus className={classNames({ 'p-invalid': submitted && !category.name })} />
                    {submitted && !category.name && <small className="p-error">Name is required.</small>}
                </div>
                <div className="field">
                    <label htmlFor="image">Upload Image</label>
                    <FileUpload id="image" ref={fileUploadRef} name="image"
                        accept="image/*" maxFileSize={1000000}
                        onUpload={onTemplateUpload} onSelect={onTemplateSelect} onError={onTemplateClear} onClear={onTemplateClear}
                        headerTemplate={headerTemplate} itemTemplate={itemTemplate} emptyTemplate={emptyTemplate}
                        chooseOptions={chooseOptions} uploadOptions={uploadOptions} cancelOptions={cancelOptions}   
                        className={classNames({ 'p-invalid': submitted && !category.image })}
                        required
                    />
                    {submitted && !category.image && <small className="p-error">image is required.</small>}
                </div>
</Dialog>

so, I think customUpload would solve the problem but I don't know to implement it.

any suggestions!