Upload file with AdminJS

[sebsn86]

Describe the problem feature solves
Hello,
I want to implement file upload functionality, but I don't understand how to link @adminjs/upload with React DropZone component.

In my custom resource, I added the React component for my "thumbnail" field and uploadFeature in the "features" property.

Stack :

• "adminjs": "6.2.0",
• "@adminjs/design-system": "^3.0.1"
• "@adminjs/express": "5.0.0"
• "@adminjs/nestjs": "5.0.1"
• "@adminjs/typeorm": "4.0.0"
• "@adminjs/upload": "^3.0.0",

{
    resource: model,
    options: {
        parent: sidebarGroups.catalog,
        listProperties: ['...'],
        editProperties: ['...'],
        features: [
            uploadFeature({
                provider: {
                    local: {
                        bucket: join(__dirname, 'public/images')
                    }
                },
                properties: {
                    key: 'thumbnail',
                    mimeType: 'mimeType'
                },
                validation: {
                    mimeTypes: ["image/jpeg", "image/png"],
                },
                uploadPath: (record, filename) => {
                    console.log(record);
                    return 'images/products/${record.id()}/${filename}';
                }
            })
        ],
        properties: {
            amount: {
                type: 'float'
            },
            description: {
                type: "richtext"
            },
            vat: {
                type: 'float'
            },
            shipping: {
                type: 'float'
            },
            stock: {
                type: 'number'
            },
            thumbnail: {
                components: {
                    edit: AdminBro.bundle(join(__dirname, '/components/products/upload-thumbnail.component'))
                }
            }
        }
    }
}

The react component is built like this:

import React, {useState} from 'react';
import {DropZone, Label, Box} from '@adminjs/design-system';
import {BasePropertyProps} from "adminjs";
const mimeTypes = ["image/jpeg", "image/png"];
const UploadPhoto: React.FC<BasePropertyProps> = (props: BasePropertyProps) => {
    const {property, record, onChange} = props
    const onUpload = (files: FileList) => {
        const newRecord = {...record}
        const file = files.length && files[0]

        onChange({
            ...newRecord,
            params: {
                ...newRecord.params,
                [property.name]: file,
            }
        })
        event.preventDefault()
    }

    return (
        <Box>
            <Label>{property.label}</Label>
            <DropZone onChange={onUpload} validate={{mimeTypes}}/>
        </Box>
    )
}

export default UploadPhoto;

But when I save I have this in database and nothing in folders.

{"size":232735,"path":"/var/folders/31/4tn570t11hq4rcv70lkqhlxc0000gn/T/upload_9506f6505cf248c95e658003e8ece86b","name":"630367dfdc81f_Chartesjoueursparentssupporter.png","type":"image/png","hash":null,"_events":{},"_eventsCount":0,"_writeStream":{"fd":null,"path":"/var/folders/31/4tn570t11hq4rcv70lkqhlxc0000gn/T/upload_9506f6505cf248c95e658003e8ece86b","mode":438,"flags":"w","closed":false,"_events":{},"autoClose":true,"_eventsCount":0,"bytesWritten":232735,"_writableState":{"sync":false,"ended":true,"ending":true,"length":0,"corked":0,"closed":false,"writing":false,"writecb":null,"allNoop":true,"errored":null,"finished":true,"writelen":0,"buffered":[],"needDrain":true,"destroyed":true,"pendingcb":0,"emitClose":true,"objectMode":false,"allBuffers":true,"finalCalled":true,"prefinished":true,"autoDestroy":true,"errorEmitted":false,"highWaterMark":16384,"decodeStrings":true,"bufferedIndex":0,"defaultEncoding":"utf8","bufferProcessing":false,"afterWriteTickInfo":null}},"lastModifiedDate":"2022-09-11T12:50:33.416Z"}

The documentation is succinct on these features, I don't know how to tie it all together.

Thanks

[dziraf]

What's your reasoning for using a custom component for DropZone? If anything, you should base it on the original one used by @adminjs/upload which is a bit more complex than yours:
https://github.com/SoftwareBrothers/adminjs-upload/blob/master/src/features/upload-file/components/edit.tsx

[sebsn86]

hi @dziraf,

Thanks for your answer :).
Because initially I just implemented the "uploadFeature" imagining that binding it to the entity property would be enough to display the DropZone, but I still had a simple text field. So I thought I had to make a custom component to display the DropZone, and that it would work with the "uploadFeature".

[sebsn86]

@dziraf thanks for your link's repository !

I understand much better how to use the uploadFeature feature.
Now, it display very well, but I've got an error after save the form.

[dziraf]

What operating system are you using? This error typically appears when you try to move a file from one partition/disk to another without making a copy first.

[sebsn86]

MacOS,

I found this issue SoftwareBrothers/adminjs-upload#42.
With a custom Provider, it's works fine !

Your product is truly remarkable.