How to use FileUpload to submit a file with InputText.

UI Components for React
Post Reply
Posts: 1
Joined: 18 Jul 2022, 15:21

18 Jul 2022, 15:31


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={} onChange={(e) => onInputChange(e, 'name')} required autoFocus className={classNames({ 'p-invalid': submitted && ! })} />
                    {submitted && ! && <small className="p-error">Name is required.</small>}
                <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 })}
                    {submitted && !category.image && <small className="p-error">image is required.</small>}
so, I think customUpload would solve the problem but I don't know to implement it.

any suggestions!

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests