Learn how Scrivito CMS can help you deliver amazing digital experiences
See Scrivito CMS in action

Obj.createFromFile(file, attributes)

Creates a binary Obj by uploading a file.


The class must include a binary attribute named blob.


  • file (File) – the File instance to be uploaded.
  • attributes (Object) – Optional custom attributes and their values of the new CMS object.


  • ArgumentError – If the class has no binary attribute named blob, file is not an instance of File, or attributes includes a blob attribute.


A Promise resolving to the created Obj.


Create an Image from a file and set its title and tags attributes. Once the image has been created and the file has been uploaded, print out its URL:

const Image = Scrivito.provideObjClass("Image", { attributes: { blob: "binary", title: "string", tags: "stringlist" } }); Image.createFromFile(file, { title: "Yay!", tags: ["Summer", "Vacation"] }).then(image => Scrivito.load(() => image.get("blob").url()).then(url => console.log(url)) );

A React component for a simple image uploader with a file dropzone using the Image class from the above example:

import * as React from "react"; import * as Scrivito from "scrivito"; class ImageDropzone extends React.Component { constructor() { super(); this.onDrop = this.onDrop.bind(this); this.reset = this.reset.bind(this); } render() { if (this.state.image) { return ( <> <Scrivito.ImageTag content={this.state.image} /> <span onClick={this.reset}>Reset</span> </> ); } return <div onDrop={this.onDrop}>Drop the image file here</div>; } onDrop(e) { e.preventDefault(); Scrivito.getClass("Image") .createFromFile(e.dataTransfer.files[0]) .then(image => this.setState({ image })); } reset() { this.updateState({ image: undefined }); } }