Skip to main content

Upload Media

There's a slightly different process for uploading images, videos, and other files with the easybase-react package. Instead of calling db().set(), as would be proper for updating standard data types, use setImage, setVideo, or setFile. These functions are properties of the useEasybase hook.

note

Note that executing these functions will keep your useReturn() instance updated when media or others files are successfully attached to a record.

To attach media or other files to a record, the record _key and column name must be known. Pass that information-along with the file object-into either setImage, setVideo, or setFile. The correct function must be used for its corresponding table column type.

const { setFile, setVideo, setImage } = useEasybase()

Here is a demonstration of the setImage function, using a hidden <input /> of type file.

import React, { useState, useRef } from 'react';
import { useEasybase } from 'easybase-react';

function Home() {
const { db, useReturn, e, setImage } = useEasybase();
const [minPrice, setMinPrice] = useState(0);
const inputEl = useRef(null);
const { frame } = useReturn(() => db("UPLOAD DEMO")
.return()
.where(e.gt('price', minPrice)) // e.gt = "Greater Than"
.limit(10),
[minPrice]);

const onImageClick = (_key) => {
inputEl.current.onchange = () => {
// Runs when the user selects a file...
if (inputEl.current.files && inputEl.current.files.length > 0) {
const imageFile = inputEl.current.files[0];
if (imageFile.type.includes("image")) {
setImage(_key, "image", imageFile, "UPLOAD DEMO");
// setImage, setVideo, and setFile take the same parameters
}
}
};

inputEl.current.click();
}

return (
<div style={{ display: "flex", flexWrap: "wrap" }}>
{frame.map(ele =>
<a onClick={_ => onImageClick(ele._key)}>{/* <---- */}
<img src={ele.image} />
</a>
)}
<input ref={inputEl} hidden type="file" />
</div>
)
}

The newly updated media will refresh your frame instances and will instantly be available in the Easybase database.