Test Enterprise-Class Web CMS Scrivito Free for 30 Days
Test Scrivito Free for 30 Days

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() {

    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) {

      .then(image => this.setState({ image }));

  reset() {
    this.updateState({ image: undefined });