I am using admin-on-rest. I want to build file upload functionality using simpleform component of admin-on-rest framework.
For this, I want to pass enctype="multipart/form-data" to form.
I am not able find any documentation or forums to understand, how can I pass this, if inside any props, or some other way.
Please help with this.
Below is my code snippet:
<Create {...props}>
<SimpleForm enctype="multipart/form-data">
<FileInput source="files" label="Related files" multiple accept="text/*,image/*">
<FileField source="src" title="title" />
</FileInput>
</SimpleForm>
</Create>
Related
In react-admin we have ReferenceManyField. It would be fantastic to have also a component called ReferenceManyInput, with a functionallity very similar to the ArrayInput component (add, remove buttons) but with reference to a resource.
¿Does any one know if they have intention to include it or is there any workaround to achieve this?
The use case is:
I have a form for creating/editing an entity where one of its properties is an array of other related entities. I would like to add and/or remove new elements to that array and when submitting the main entity, it creates/updates/remove the related entity and the main entity.
Maybe I am asking for too much...
Thanks in advance
You're in luck: <ReferenceManyInput> was just published as part of React-admin Enterprise Edition. It works just like ReferenceManyField:
import {
Edit,
SimpleForm,
TextInput,
NumberInput,
ReferenceInput,
SelectInput,
} from 'react-admin';
import { ReferenceManyInput } from '#react-admin/ra-relationships';
const ProductEdit = () => (
<Edit mutationMode="optimistic">
<SimpleForm>
<TextInput source="name" />
<NumberInput source="price" />
<ReferenceInput source="category_id" reference="categories" />
<ReferenceManyInput reference="variants" target="product_id">
<SimpleFormIterator inline>
<TextInput source="sku" />
<SelectInput source="size" choices={sizes} />
<SelectInput source="color" choices={colors} />
<NumberInput source="stock" defaultValue={0} />
</SimpleFormIterator>
</ReferenceManyInput>
</SimpleForm>
</Edit>
);
The result looks like:
Check https://marmelab.com/ra-enterprise/modules/ra-relationships#referencemanyinput for details.
I am creating a chat app and I wanted to have a custom header. I am using React Navigation that is working fine and the header is functioning properly but not styling properly. I am using React Native Paper for custom header. My code is ( just copied from website to make sure that everyone thing works fine which obviously not ):
<Appbar.Header>
<Appbar.BackAction />
<Appbar.Content title="Title" subtitle="Subtitle" />
<Appbar.Action icon="magnify" />
<Appbar.Action icon="dots-vertical" />
</Appbar.Header>
It is supposed to work like this:
But on my Android Device it look like this:
Add some padding to the Appbar.Header like this:
<Appbar.Header style={{padding:40}}>
<Appbar.BackAction />
<Appbar.Content title="Title" subtitle="Subtitle" />
<Appbar.Action icon="magnify" />
<Appbar.Action icon="dots-vertical" />
</Appbar.Header>
Working Example on Snack
I am new using admin-on-rest framework, I need to make nested form working.
I have two models show and song.show() can have multiple songs. I have show edit form it will work as expected.
I need to add a song form inside show edit form, so I can add multiple songs for each show.
I tried all ways but i am not able to get it done.
This is my code:
<Edit title="Edit Show" {...this.props}>
<SimpleField>
<TextInput source="name" style={{ display: 'inline-block' }} />
//here need to add song add form without reloading page
//this is songs grid
<ReferenceManyField reference="songs" target="show_id" label="Set List" perPage={5} >
<Datagrid>
<TextField source="song_name" />
<EditButton />
<DeleteButton />
</Datagrid>
</ReferenceManyField>
//Here need to add song form, so i can add songs
</SimpleField>
</Edit>
How can I achieve this?
Not sure if that answers your question.. if songs pre-exist then you just need to do that:
<Edit title="Edit Show" {...this.props}>
<TextInput source="name" style={{ display: 'inline-block' }} />
<ReferenceArrayInput label="Songs" source="songs_property_on_show" reference="songs" allowEmpty>
<SelectArrayInput optionText="song_name" translate={false}/>
</ReferenceArrayInput>
</Edit>
if you want to create them on the fly while you are creating the show or in other words have a form inside the other this needs to be done in a custom way (using redux-form) as commented under my question: how to create an entity inside another in the same form using admin-on-rest?
I am new to AOR and redux-sagas and I am currently working on a list view drag-and-drop and upload capability. I want the user to be able to drag and drop files and see current upload progress and status from the List view.
The prototype of the component looks like this:
// ...
<Dropzone onDrop={this.onDrop} onDragLeave={this.onDragLeave} onDragEnter={this.onDragEnter} ref={(node) => {this.dropzoneRef = node;}} disableClick disablePreview style={{}}>
// Dropped files will appear here, with the upload progress
<Card style={{marginBottom: "1em"}}>
<CardTitle>Picture.jpg</CardTitle>
<CardText>
// The progress bar will show the upload progress
<LinearProgress value={50} mode="determinate" />
</CardText>
</Card>
<List {...props} actions={<FileActions onUploadClick={() => {this.dropzoneRef.open()}} />}>
<Datagrid>
<TextField source="name" />
<DateField source="createdAt" />
<EditButton />
</Datagrid>
</List>
</Dropzone>
the onDrop callback receives the dropped files, and that's where the upload needs to be handled. That's where I am bit puzzled about how I should handle the problem.
I understand I have to decorate my REST client in order to be able to upload my files. But how can I plug some functions in order to send the upload progress of each files to my component?
It's a trivial issue but I'm not seeing where the problem exactly lies.
As far as I know, React offers the ability to pull stuff apart into (somewhat) independent components which results in cleaner pages because not everything is crammed into one huge HTML file. Or so the philosophy goes, I think.
Basically, when I do this, everything works fine:
<Popover open={this.props.popover === LoginPopoverState.LOGIN}
anchorEl={this.props.anchorEl}
onRequestClose={this.handleHideLogin.bind(this, dispatch)}>
<div style={loginStyle}>
<TextField hintText="Username oder E-Mail" ref="username_login" floatingLabelText="Username / E-Mail"/><br />
<TextField hintText="Passwort" type="password" ref="password_login" floatingLabelText="Passwort" /><br />
<RaisedButton label="Login" onTouchTap={e => this.handleLoginTap(e, dispatch)} />
<p>Zur <a href="javascript://" onTouchTap={e => this.handleShowRegisterTap(e, dispatch)}>Registration</a>.</p>
</div>
</Popover>
Which looks like this:
However, when I pull out the <div> into another module and then do something like this:
import LoginFragment from './loginBar/LoginFragment.jsx'
<Popover open={this.props.popover === LoginPopoverState.LOGIN}
anchorEl={this.props.anchorEl}
onRequestClose={this.handleHideLogin.bind(this, dispatch)}>
<LoginFragment />
</Popover>
where LoginFragment.jsx contains something like this:
var LoginFragment = React.createClass({
render() {
return (
<TextField hintText="Username oder E-Mail" ref="username_login" floatingLabelText="Username / E-Mail"/>
)
}
})
Which results in this hot mess:
So, what is going on here?
It can be a CSS styling issue, since you aren´t wrapping your fields inside a div anymore (and you are now skipping the loginStyle that was applied to this containing div.)
So, in the old version you had:
<Popover ...>
<div style={loginStyle}>
<TextField ...><br />
<TextField ...><br />
<RaisedButton .../>
<p>...</p>
</div>
</Popover>
But what you are including in your new version right now, using a single LoginFragment component, once expanded, would look like:
<Popover ...>
<TextField ...>
</Popover>
In this version, the wrapping divs (and their styling) would be missing. Including <div style={loginStyle}> in your code again would fix any CSS styling conflict, or help find and isolate the issue. Like so:
import LoginFragment from './loginBar/LoginFragment.jsx'
<Popover open={this.props.popover === LoginPopoverState.LOGIN}
anchorEl={this.props.anchorEl}
onRequestClose={this.handleHideLogin.bind(this, dispatch)}>
<div style={loginStyle}>
<LoginFragment />
</div>
</Popover>