Announcing Assets Storage and Invite-Only Registration

Announcing asset storage, a way for you to efficiently upload and retrieve files attached to your project.

We spent a long time thinking about the first feature we wanted to build after launching. After talking to some early users and thinking about it ourselves, it became clear that building SaaS products requires an efficient way to store and retrieve your assets. That’s why we’re excited to announce that every customer now receives asset storage as part of their custom Midtype backend.

What Does This Mean For My Midtype Project

Every Midtype project now supports uploading files of any type, up to 25mb in size. You can see a full list of assets uploaded to your project from the Midtype UI or using your GraphQL API.

We’ve also introduced a new field type called “Linked Asset.” This allows you to link fields of a model to an asset, just like you would a User or any other model. For example, if you had a model called blog_post, you can now create a new field for it called featured_image that links to an asset. Now, in your frontend, you can allow your users to upload files to your app and link them to every blog post.

How to Use It

In the Midtype dashboard, you’ll see a new section called “Assets.”

The "Assets" section in the Midtype dashboard.

This section shows you all the files that have been uploaded to your project. In order to upload new files, just grab the endpoint listed here (note: it’s different from your project’s GraphQL endpoint), and send it a POST request with your user’s JWT in the Authorization header and the file data sent as the body of the request. Learn more about authenticating API requests here.

The response from Midtype will include The easiest way to do this is to use a standard HTML5 form for sending file data to the endpoint with the JWT included in the header. Here’s an example of a React component that can do this:

const FileUploader = () => {
  const onChange = e => {
    const files = Array.from(e.target.files);
    files.forEach(file => {
      const formData = new FormData();
      const fileName = e.target.value.split(/(\\|\/)/g).pop();
      formData.append("m_asset", file, fileName);
      fetch(MIDTYPE_UPLOAD_URL, {
        method: "POST",
        headers: {
          authorization: `Bearer ${JWT_TOKEN}`
        },
        body: formData
      })
        .then(response => response.json())
        .then(data => {
          const { asset_id } = data;
          // Do something with the Midtype asset ID here.
        });
    });
  };
  return (
    <div className="button">
      <label htmlFor="upload">
        <button>Browse</button>
      </label>
      <input type="file" onChange={onChange} />
    </div>
  );
};

As soon as a user uploads a file, you should immediately see it appear on the “Assets” page.

To link a field to the asset field type, simply select “Linked Asset” as the type for a field you’re creating:

Linking a model's field to an asset.

Now, when creating a new record of the model that this field belongs to, you’ll have the option of specifying an asset_id for that field, which will automatically link that record to the related asset.

Other Highlights

In addition to asset storage, in the last week we also added the ability to restrict registration for your app to invited users only. Say, for example, you’d only like users with emails that include @yourcompany.com to be allowed to use your app, you can now enable “invite only” mode for your project from your Midtype dashboard and add “yourcompany.com” as an “Invited Domain.”

This means that if someone tries to register for your application with an e-mail address on any other domain, they’ll be rejected and sent to this URL.

Need to launch your web app tomorrow? Leave it to Midtype.

Midtype helps builders launch and iterate on web apps at light speed. We provide a hosted backend with user login, payments, a database, and much more built in. We allow you to focus on your core product without reinventing the wheel.

Add Password Based Accounts to Your App

Now, in addition to signing in with Google, your users can create their own password based accounts for your app. To maximize conversion…

Why GraphQL is the Ideal API Language for Frontend Engineers

Facebook unveiled GraphQL to the developer community in 2015. What was once an internal research project quickly became the hot new standard…

Midtype as a Firebase Alternative

Firebase is a great platform on which to build a web app. It provides authentication, a massively scalable NoSQL datastore with real-time…