Keystone-classic: localFile .format property ignored by Admin UI

[jorisw]

Hi,

I'm having the same problem as this user:
https://groups.google.com/forum/#!searchin/keystonejs/localFile$20format/keystonejs/KVKsu7eywek/851iYDO4pzsJ

The format property in the following example:

var Photo = new keystone.List('Photo',{track:true});

Photo.add({
    name: { type: Types.Key, required: true, index: true },
    photo: {
          type: Types.LocalFile,
          dest: './public/data',
          prefix: '/photo',
        allowedTypes: [
            'image/jpeg', 'image/png'
        ],
        format: function(item, file) {
            console.log('format()');
            return '<img src="/data/' + item.id + '.' + file.extension + '" style="max-width: 300px">';
        }
      }
});

... inserts no <img> tag at all in the detail page of an 'image' item in the Admin UI. Nor is the console message format() logged. I suspect this property is currenty broken. Currently running Keystone.js 0.3.10.

[gouthamve]

This is reproducible in 0.3.10.

[mikeblakeney]

I've got the same issue with S3 file uploads. The response here https://github.com/keystonejs/keystone/issues/762 is that they escape all the html to prevent XSS attacks.

[jonathanhudak]

I have the same issue in 0.3.10
Can anyone point me in the right direction to debug? Thanks!

[mikeblakeney]

What I ended up doing was creating a link field on the model, then displaying it in the list. So, in my case, I have audio files. The watch function triggers the audioFileUrl to update its link. A user can click the link in the list and download the audio or listen to it in a new window. It's not ideal, but it works...

var keystone = require('keystone'),
    Types = keystone.Field.Types;

var AudioFile = new keystone.List('AudioFile', {
    autokey: { path: 'slug', from: 'title', unique: true },
    map: { name: 'title' },
    defaultSort: '-createdAt'
});

AudioFile.add({
    title: { type: Types.Text, required: true },
    mediaGroup: { type: Types.Relationship, ref: 'MediaGroup' },
    status: { type: Types.Select, options: 'draft, published, archived', 'default': 'draft' },
    publishedAt: { type: Types.Date},
    audioFile: {  type: Types.S3File },
    audioFileLink: {
      type: Types.Url,
      noedit: true,
      watch: true,
      value: function() {
        console.log(this.audioFile.url);
        return 'https:' + this.audioFile.url;
      },
      format: function(url) {
        console.log(url);
        return url;
      }
    }
});

AudioFile.defaultColumns = 'title, status|20%, audioFileLink, publishedAt|15%';
AudioFile.register();

[TomKremer]

I got the same issue still in 0.3.11

[adamscybot]

Same as #916

[outluch]

https://github.com/keystonejs/keystone/blob/master/templates/mixins/columns.jade#L39
added 2 lines:

        else if col.type == 'localfile'
            +column_html(value)

work like a sharm

[adamscybot]

@JedWatson Just pinging that someone might have found the fix for this ^^

[jorisw]

It seems that either when posting my original question, I misunderstood what the format property is supposed to do, or this still doesn't work.

What I expected the format property to do, was to augment the display of the value on the detail page of the item, not the way it's displayed in its column in a list view. So that for instance I can display a preview of an image file on the detail page of an item in a collection.

Could someone clarify?

[adamscybot]

@jorisw is correct. @JedWatson , think this issue should be reopened.

[simonyoung]

@JedWatson Is @jorisw correct that the format property should augment display on the detail page of the item?

[atul10595]

Hello, is this issue has any work around until fixed?
Thanks

[atul10595]

So, as far as images preview is concerned I have found a good work around. I am using WYSIWYG to show all images uploaded using 'Type.LocalFiles'. It will get updated even if you remove any images.

  Galler.add({
  name: {
    type: String,
    required: true
  },
  publishedDate: {
    type: Date,
    default: Date.now
  },
  images: {
    type: Types.LocalFiles,
    dest: 'public/image/gallery/',
    prefix: '/image/gallery/'
  },
  thumbnails: { type: Types.Html, wysiwyg: true, height: 120 }, 

  });

  Gallery.schema.pre('save', function(next) 

    this.thumbnails = '';
    var thumbnailWysiwygHtml= '';

    this.images.forEach(function(img){
      thumbnailWysiwygHtml +=  '<img style="height: 100px; width: auto; display:inline-block; src="/image/gallery/'+ img.filename + '" alt="IMAGE" />';
    });

    this.wysiwyg = thumbnailWysiwygHtml;
    next();    
  });

  Gallery.register();

[mochtu]

Why is there no hint in the documentation that the 3.X branch does not support the format function on LocalFiles(s)? This is very confusing, @JedWatson !

[morenoh149]

@mochtu please add some documentation if it helps others. We are all volunteers.

[JedWatson]

+1

[Rmannn]

+1

[piermariacosina]

any news on this bug?

[AubreyHewes]

A workaround is to manipulate the display using own javascript..

On server startup, before requiring keystone, concat own javascript to node_modules/keystone/admin/public/js/packages.js and manipulate the display via your own javascript...

Gallery example using LocalFile/LocalFiles;

• display list LocalFile column (image) as an image via own javascript.. depending on the model. replace view with own view (incorporating the action elements; i.e. do not remove the action elements)
• display view LocalFile (image) as an image via own javascript.. depending on the model. replace view with own view (incorporating the action elements; i.e. do not remove the action elements)
• display view LocalFiles (images) as an image gallery via own javascript.. depending on the model. replace view with own view (incorporating the action elements)

Workaround is based on node_modules being replaced on each application update/deployment (i.e. container/dokku/heroku et al)..

If not within a new container then you would have to test the file for changes beforehand.. Each server restart would otherwise be duplicating your code.

[morenoh149]

closing in favor of https://github.com/keystonejs/keystone/issues/916