Form submit with image upload

kanasaikuat

screenshot
Hi, anyone has sample for flarum form submission with image upload? I can't find a sample via the internet. I'm wanted to develop a banner extension where admin allowed to fill in datas and also image upload to the server seamlessly.

Justoverclock

kanasaikuat you can peak at the code of this extension

https://discuss.flarum.org/d/4154-friendsofflarum-upload-the-intelligent-file-attachment-extension

The repo is public

kanasaikuat

Justoverclock Hi, thanks for the reply. The fof/upload is not seamless. What i want is allow admin to fill in all the data, browse image and click submit, and then the data will save in DB and image will upload into server seamlessly.

Justoverclock

kanasaikuat mmmh i think there's no similar extension at moment

kanasaikuat

Is okay, i will use this method to make it work. Once saved the data without image, i will call another request to upload the image. Then will update the image attribute manually.

I bet there will be other better method.

  onsubmit(e) {
    this.loading = true;

    this.herobanner
    .save({
        title: this.herobannerTitle(),
        image: this.herobannerImage(),
        url: this.herobannerURL(),
    })
    .then(
        (result) => {

            if(this.herobannerPreImage && this.herobannerPreImage != ''){
                const data = new FormData();
                const herobanners = app.store.getById('herobanners', result.data.id);
                data.append('bannerImage', this.herobannerPreImage);

                app.request({
                    method: 'POST',
                    url: `${app.forum.attribute('apiUrl')}/herobanners/upload/${result.data.id}`,
                    serialize: (raw) => raw,
                    body: data,
                })
                .then(
                    (result) => {
                        herobanners.pushData({
                            attributes: {
                                image: result.data.attributes.image
                            }
                        });

                        m.redraw();
                        this.hide();
                    }
                );
            }else{
                this.hide();
            }
        },
        (response) => {
            this.loading = false;
            this.handleErrors(response);
        }
    );
   }

clarkwinkelmann

I'm not sure any existing extension uploads both regular data and image together, but there's no reason it wouldn't work because Flarum API can also decode "regular" multipart form bodies, not just JSON.

For examples that are simpler than FoF Upload, you can look at Flarum's favicon and avatar upload, my Predefined Avatars extension, or my Catch The Fish extension.

In my premium Formulaire extension I have a custom form builder that includes image uploads, but the images aren't actually submitted with the form, they are sent to the backend as soon as they are uploaded, and then a UUID for each image is sent in the JSON submission for the form that allows the backend to map the files back to the submission, and discard unused files.

I have also file uploads in my Cimaise and Flamarkt Files extensions, but those are not released at this time. The approach is very similar to Catch The Fish, where uploading an image creates a new model in the database, and only afterwards do you get an opportunity to update the model's attributes.