Admin On Rest Framework or React drop zone, Issue in uploading a file to firebase

Question

I am using well know React Framework

https://marmelab.com/admin-on-rest/RestClients.html

Now I want to upload a file to firebase, I follow the doc and find an awesome uploading component

FileInput (FileInput allows to upload some files using react-dropzone.)

so I used it in my react application and below is my code

export const PostCreate = (props) => (
    <Create {...props}>
        <SimpleForm>
            <ReferenceInput label="User" source="userId" reference="profiles" allowEmpty>
                <SelectInput optionText="name" />
            </ReferenceInput>
            <TextInput source="title" />
            <LongTextInput source="body" />


            <FileInput source="files" label="Related files" accept="video/*,audio/*, image/*, application/*" multiple={true} >
                <FileField source="src" title="title" />
            </FileInput>
        </SimpleForm>
     </Create>
);

For firebase interaction, I am using

https://github.com/sidferreira/aor-firebase-client

When I see my firebase console I can't see any file in firebase storage bucket but the filed value is saving right.

"blob:http://localhost:3000/8daedcb8-e526-427b-aa0c-83ff7ce9deee"

for a better idea, I have attached the snapshot of the firebase database and storage

I am new to this Framework so I know I surely have missed something but what I am still looking for.

So please help me to find the solution.

Answer 1

First of all, note that admin-on-rest is not a CMS. It's a React framework you can use to build an administration application :)

Second, we don't assume anything about how you want to store your files. This is the job of your restClient. You can find an example showing how to handle file uploads in the documentation: https://marmelab.com/admin-on-rest/RestClients.html#decorating-your-rest-client-example-of-file-upload

Answer 2

After spending 2 days with the problem, finally I able to find the solution and it is really quite easy. A simple method did the work for me.

First I have created a method for uploading the file to firebase

const upload = item => {
    return firebase.storage().ref().child("images/" + item.title).put(item.rawFile)
        .then((snapshot) => {
            // console.log('One success:', snapshot.downloadURL)
            return snapshot.downloadURL;
        }).catch((error) => {
            console.log('One failed:', item, error.message);
            return error;
        });
 }

and then I just updated my API decorator

addUploadFeature.js

with this method like this

const addUploadCapabilities = requestHandler => {
    return (type, resource, params) => {
        if (type === 'CREATE' && resource === 'posts') {
        // console.log("kgk");
            if (params.data.files && params.data.files.length) {
            // only freshly dropped pictures are instance of File
                console.log(params.data.files.length);
                const formerPictures = params.data.files.filter(
                    p => !(p.rawFile instanceof File)
                );
                const newPictures = params.data.files.filter(
                    function (p) {
                        // console.log(p);
                        const storageRef = firebase.storage().ref();

                        // const uploadTask = storageRef.child('images/' + p.title).put(p.rawFile);


                        return p.rawFile instanceof File;

                    }
                 );

                return Promise.all(newPictures.map(upload))
                    .then(function (base64Pictures) {
                          return base64Pictures.map(function (picture64) {
                                return ({
                                    src: picture64,
                                    title: `${params.data.title}`,
                                });
                            });
                        }
                    )
                     .then(function (transformedNewPictures) {
                             return requestHandler(type, resource, {
                                ...params,
                                data: {
                                    ...params.data,
                                    files: [
                                        ...transformedNewPictures,
                                        ...formerPictures,
                                    ],
                                },
                            });
                        }
                     );
            }
        }

        return requestHandler(type, resource, params);
    };
 };

That solves my issue. Now I can see my uploaded file to Firebase storage.

And here is my database structure which I was looking for