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

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