How can we pre fill the images on File fields on hooks load in smart action form

[Naresh]

This is a template you must use to report issues.

Feature(s) impacted

We are not able to prefill the images on File fields if some records data have images in smart action form

Observed behavior

We are not able to prefill the images on File fields if some records data have images in smart action form

Expected behavior

should be able to display the images in smart action form

Failure Logs

NA

Context

• Project name: Curator
• Team name: Developer
• Environment name: ALL (Staging, Development, Production)
• Agent type & version:
• Package Version: 8.3 (forest-express-sequelize)
• Express Version: 4.17.1
• Sequelize Version: 6.6.5
• Database Dialect: MySql
• Database Version: 5.7.24

[Arnaud_Moncel]

Hi @Naresh to reach your goal you can easily do something like that:

const { collection } = require('forest-express-sequelize');
const { film } = require('../models');

// This file allows you to add to your Forest UI:
// - Smart actions: https://docs.forestadmin.com/documentation/reference-guide/actions/create-and-manage-smart-actions
// - Smart fields: https://docs.forestadmin.com/documentation/reference-guide/fields/create-and-manage-smart-fields
// - Smart relationships: https://docs.forestadmin.com/documentation/reference-guide/relationships/create-a-smart-relationship
// - Smart segments: https://docs.forestadmin.com/documentation/reference-guide/segments/smart-segments
collection('film', {
  actions: [{
    name: 'loadFile',
    fields: [{
      field: 'testLod',
      type: 'File',
    }],
    hooks: {
      load: async (context) => {
        const [recordId] = context.request.body.data.attributes.ids;
        const record = await film.findByPk(recordId);
        const [fileField] = context.fields;
        fileField.value = record.file;
        return context.fields;
      }
    }
  }],
  fields: [],
  segments: [],
  
});

Let me know if that help

[Naresh]

Hi @Arnaud_Moncel In record.file we have image src URL i.e. htpps://www.xyz.com/xyz.png.

I have implemented the above your code as below.

name: 'loadFile',

      type: 'single',

      fields: [

        {

          field: 'testLod',

          type: 'File',

        },

      ],

      hooks: {

        // @ts-ignore

        load: async (context) => {

          const [recordId] = context.request.body.data.attributes.ids;


          const [fileField] = context.fields;

          fileField.value =

            'https://www.xyc.com/test.png'; // putted test url for security purpose
          return context.fields;

        },

      },

But I m getting unknown file types in File fields.
Pls, find the screenshots for your reference.

[Arnaud_Moncel]

I’m tested it directly with file data inside column.
What do you think about to set inside value your file data?

[Naresh]

Hi @Arnaud_Moncel
The fetching and reading of the images from the AWS S3 bucket and converting that image into base 64 image data takes some time and this time increases when the size of the file increases.

To avoid this can’t we display the images directly based upon the src URL in smart action form or can we prefill and pre select the images on File fields based on src URL directly?

[anon39940173]

Hi @Naresh
I’ll try to reproduce your issue on a test project

[anon39940173]

The name, filetype and size not being displayed is a known bug.

The issue is that customers uploading files to S3 usually don’t set CORS headers to allow forestadmin to load them with an ajax request, and we can’t know the file type / size without that.

Actually, we have a pull request waiting to be merged to “solve it” by hiding the size, and guessing the filetype and name from the URL.

Hopefully it should be done tomorrow or the day after.

However, I see that the preview is broken on your screenshot, and it should work even without the fix.

When you click on the image, does the image load?

[Naresh]

Hi @anon39940173

It’s working now. There was a CORS issue.

But now problem is that it takes much time to display a large size image. Also, forest admin not displaying loader so that users can know they should wait for image load before clicking smart action form’s submit button.

[Naresh]

@anon39940173

Not able to preview the images again.

It loaded the images correctly in the network. But not able to preview the images.

code in load hooks as below

hooks: {
      load: async (context) => {
        const [recordId] = context.request.body.data.attributes.ids;
        const record = await film.findByPk(recordId);
        const [fileField] = context.fields;
        fileField.value = record.file;  //where record.file is file src URL.
        return context.fields;
      }
    }

Pls, find attached screenshots.

[anon34731316]

@Naresh,

As stated here, we’ll take care of this issue.

Thanks for reporting it!

[Naresh]

Hi @anon34731316,

It’s working now.

Thanks.