Skip to main content
Version: 1.x.x

ImageRecord

quip.apps.ImageRecord is a special type of quip.apps.Record that corresponds to an image rendered within the app. The developer can create and delete ImageRecord objects and can render them within their app by using the React component: <quip.apps.ui.Image/>.

Special Properties​

{
    // Required. Specifies the sizes (widths, in pixels) that Quip should save
    // thumbnails for the uploaded image file.
    Image_requestedThumbnailWidths: "array"
}

Example​


class CaptionedImageRecord extends quip.apps.Record {
    static getProperties = () => ({
        image: quip.apps.ImageRecord,
        caption: quip.apps.RichTextRecord,
    })

    static getDefaultProperties = () => ({
        image: {},
        caption: { RichText_placeholderText: "Add a caption" },
    })

    public getImage = () => this.get("image") as quip.apps.ImageRecord
    public getCaption = () => this.get("caption") as quip.apps.RichTextRecord
}

quip.apps.registerClass(CaptionedImageRecord, "captioned-image");

class RootRecord extends quip.apps.RootRecord {
    static getProperties = () => ({
        captionedImage: CaptionedImageRecord,
    })

    static getDefaultProperties = () => ({
        captionedImage: {},
    })

    public getCaptionedImage = () => this.get("captionedImage") as CaptionedImageRecord;
}

quip.apps.registerClass(RootRecord, "root");

class ImageWithCaption extends React.Component {
    render() {
        const record = quip.apps.getRootRecord();
        const captionedImage = record.getCaptionedImage();
        return (
            <div>
                <quip.apps.ui.Image
                    record={captionedImage.getImage()}
                    width={200}
                />
                <quip.apps.ui.RichTextBox
                    record={captionedImage.getCaption()}
                    allowImages={false}
                />
            </div>
        );
    }
}

quip.apps.initialize({
    initializationCallback: (root, params) => {
        ReactDOM.render(<ImageWithCaption />, root);
    },
});