Obj.createFromFile(file, attributes)

Creates a binary Obj by uploading a file.

Copy
Scrivito.getClass("Image").createFromFile(file);

The class must include a binary attribute named blob.

Params

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

Throws

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

Returns

A Promise resolving to the created Obj.

Examples

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:

Copy
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:

Copy
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 });
  }
}