React-Moralis problem to update current files

Moralis General
#1

Hi Guys,

I am developing a web application using NextJs and Moralis.

In one of the pages, I want to first fetch the stored object from the moralis server and then give the users the ability to update fields of stored objects. I am using react hooks provided by react-moralis and it is working very well for all of the fields which are stored in string or boolean format.

However, when it comes to file format it throws error.

The file is as follows:

 // Retrieving data from database
  const { data, error, isLoading } = useMoralisQuery("Items", (query) =>
    query
    .equalTo("objectId", id),
  );

const itemFeatures= JSON.parse(JSON.stringify(data, null, 2));

//updating the fields related to specific objectId using react hook

const { isSaving, error: e1, save } = useNewMoralisObject("Items");

For the reward variable of type string the save function works perfectly:

save({ objectId: id, reward: reward });

However, for the file type like the following:

  const moralisFile = new Moralis.File(selectedFile.name, selectedFile);
      save({ objectId: id, moralisFile: moralisFile });

return(
                      <div className="flex text-sm text-gray-600">
                        <label
                          htmlFor="file-upload"
                          className=" bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500"
                        >
                          <span>
                            //selectedFile is a state variable that is defined before
                            Upload a file ({selectedFile && selectedFile.name}){" "}
                            <font color="grey"> or drag and drop</font>
                          </span>
                          <input
                            onChange={changeHandler}
                            id="file-upload"
                            name="file-upload"
                            type="file"
                            class="file"
                            data-browse-on-zone-click="true"
                            data-show-upload="false"
                            multiple
                            class="cursor-pointer relative block opacity-0 w-full h-full p-20 z-50"
                          />
                        </label>
                      </div>

Screen Shot 2021-07-14 at 14.05.19 pm
Screen Shot 2021-07-14 at 14.05.19 pm1932×906 70.9 KB

2 Likes
#2

Hi @Mohammad,

Before diving into the issue, could you provide some extra details –

  1. What type of file were you trying to upload?
  2. Could you provide the entire page file instead of snippets of your NextJs page? (Would like to see what Moralis instances you’re using to achieve the functionality)

Looking forward to your response. Thanks. :slight_smile:

1 Like
#3

Hi Malik,
Thank you very much for your kind response.

1- I am trying to upload image files.

2- Sure.


import { useRouter } from "next/router";
import { useState } from "react";
import { useNewMoralisObject } from "react-moralis";
import { Moralis } from "moralis";
import { useMoralisQuery } from "react-moralis";
import { SaveIcon } from "@heroicons/react/solid";
import { Switch } from "@headlessui/react";

export default function itemDetail() {
  function classNames(...classes) {
    return classes.filter(Boolean).join(" ");
  }


  const router = useRouter();

  const [id, setId] = useState(router.query.itemId);
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [selectedFile, setSelectedFile] = useState();
  const [auction, setAuction] = useState("");
  const [lot, setLot] = useState("");
  const [reward, setReward] = useState("");
  const [reserve, setReserve] = useState("");
  const [isActive, setIsActive] = useState(false);
  const [startingBid, setStartingBid] = useState("");
  const [GST, setGST] = useState("");
  const [buyerPremium, setBuyerPremium] = useState("");
  const [isMostView, setIsMostView] = useState("10");
  const [isHot, setIsHot] = useState("10");
  const [isClosingSoon, setIsClosingSoon] = useState("10");

  // To make sure that the intial value we fetch from database is shown only before change
  const [isFirstMostview, setIsFirstMostview] = useState(true);
  const [isFirstHot, setIsFirstHot] = useState(true);
  const [isFirstClosingSoon, setIsFirstClosingSoon] = useState(true);
  ///////////////////////////////

// Different handelers except the main form Handeler
  const isActiveHandeler = () => {
    setIsActive(!isActive);
  };

  const isMostViewHandeler = () => {
    setIsFirstMostview(false);
    setIsMostView(!isMostView);
  };
  const isHotHandeler = () => {
    setIsFirstHot(false);
    setIsHot(!isHot);
  };
  const isClosingSoonHandeler = () => {
    setIsFirstClosingSoon(false);
    setIsClosingSoon(!isClosingSoon);
  };

  // file upload handeler
  const changeHandler = (event) => {
    setSelectedFile(event.target.files[0]);
  };

  ////////////////




  // react hook for retreiving current data from database
  const { data, error, isLoading } = useMoralisQuery("Items", (query) =>
    query
    .equalTo("objectId", id),
  );
 
  const itemFeatures= JSON.parse(JSON.stringify(data, null, 2));


  // React hook to be used for uploading edits
  const { isSaving, error: e1, save } = useNewMoralisObject("Items");

  // The main form Hnadeler
  const submitHandeler = (e) => {
    e.preventDefault();

    console.log(itemFeatures)

    if (GST >= 100) {
      alert("Invalid GST!!");
      return;
    }

    if (reward >= 100) {
      alert("Invalid Reward!!");
      return;
    }

    if (!(auction && lot) && (auction || lot)) {
      alert("Auction or Lot number is invalid!!");
      return;
    }

    save({ objectId: id, auction: auction, lot: lot });

    if (itemFeatures[0].title == title || title == "") {
    } else {
      save({ objectId: id, title: title });
    }

    if (itemFeatures[0].description == description || description == "") {
    } else {
      save({ objectId: id, description: description });
    }

    if (itemFeatures[0].reward == reward || reward == "") {
    } else {
      save({ objectId: id, reward: reward });
    }

    if (itemFeatures[0].reserve == reserve || reserve == "") {
    } else {
      save({ objectId: id, reward: reserve });
    }

    if (itemFeatures[0].startingBid == startingBid || startingBid == "") {
    } else {
      save({ objectId: id, startingBid: startingBid });
    }

    if (itemFeatures[0].GST == GST || GST == "") {
    } else {
      save({ objectId: id, GST: GST });
    }

    if (itemFeatures[0].buyerPremium == buyerPremium || buyerPremium == "") {
    } else {
      save({ objectId: id, buyerPremium: buyerPremium });
    }

    if (selectedFile) {
      const moralisFile = new Moralis.File(selectedFile.name, selectedFile);
      save({ objectId: id, moralisFile: moralisFile }); 
    }

    if (itemFeatures[0].isActive == isActive) {
    } else {
      save({ objectId: id, isActive: isActive });
    }

    if (isMostView== "10") {
    } else {
      save({ objectId: id, isMostView: isMostView });
    }

    if (isHot == "10") {
    } else {
      save({ objectId: id, isHot: isHot });
    }

    if (isClosingSoon == "10") {
    } else {
      save({ objectId: id, isClosingSoon: isClosingSoon });
    }
  };

  return (
    <div>
      <form onSubmit={submitHandeler}>
        {itemFeatures.map((row) => (
          <div className="shadow sm:rounded-md sm:overflow-hidden">
            <div className="px-4 py-5 bg-white space-y-6 sm:p-6">
              <div className="grid grid-cols-6 gap-6">
                <div className="col-span-3 sm:col-span-3">
                  <label
                    htmlFor="company-website"
                    className="block text-sm font-medium text-gray-700"
                  >
                    Auction
                  </label>
                  <div className="mt-1 flex rounded-md shadow-sm">
                    <input
                      className="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded rounded-r-md sm:text-sm border-gray-300"
                      type="text"
                      name="auction"
                      id="auction"
                      placeholder={`${row.auction}`}
                      value={auction}
                      defaultValue={row.auction}
                      onChange={(e) => setAuction(e.target.value)}
                    />
                  </div>
                </div>
                <div className="col-span-3 sm:col-span-3">
                  <label
                    htmlFor="company-website"
                    className="block text-sm font-medium text-gray-700"
                  >
                    Lot
                  </label>
                  <div className="mt-1 flex rounded-md shadow-sm">
                    <input
                      onChange={(e) => setLot(e.target.value)}
                      type="text"
                      name="lot"
                      id="lot"
                      className="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded rounded-r-md sm:text-sm border-gray-300"
                      placeholder={`${row.lot}`}
                      value={lot}
                    />
                  </div>
                </div>
              </div>
              <div className="grid grid-cols-3 gap-6">
                <div className="col-span-3 sm:col-span-2">
                  <label
                    htmlFor="company-website"
                    className="block text-sm font-medium text-gray-700"
                  >
                    Title
                  </label>
                  <div className="mt-1 flex rounded-md shadow-sm">
                    <input
                      onChange={(e) => setTitle(e.target.value)}
                      type="text"
                      name="title"
                      id="title"
                      className="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded rounded-r-md sm:text-sm border-gray-300"
                      placeholder={`${row.title}`}
                      value={title}
                    />
                  </div>
                </div>
              </div>

              <div>
                <label
                  htmlFor="about"
                  className="block text-sm font-medium text-gray-700"
                >
                  Description
                </label>
                <div className="mt-1">
                  <textarea
                    onChange={(e) => setDescription(e.target.value)}
                    id="description"
                    name="description"
                    rows={15}
                    className="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 block w-full sm:text-sm border border-gray-300 rounded-md"
                    placeholder={`${row.description}`}
                    value={description}
                  />
                </div>
                <p className="mt-2 text-sm text-gray-500">
                  Brief description for your profile. URLs are hyperlinked.
                </p>
              </div>

              <div className="grid grid-cols-6 row-span-3 gap-6">
                <div className="col-span-3 row-span-3 sm:col-span-3">
                  <label className="block text-sm font-medium text-gray-700">
                    Item image
                    <font color="red"> *</font>
                  </label>
                  <div className="mt-1 flex justify-center px-6 pt-5 pb-3 border-2 border-gray-300 border-dashed rounded-md">
                    <div className="space-y-2 text-center">
                      <svg
                        className="mx-auto h-12 w-12 text-gray-400"
                        stroke="currentColor"
                        fill="none"
                        viewBox="0 0 48 48"
                        aria-hidden="true"
                      >
                        <path
                          d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02"
                          strokeWidth={2}
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                      </svg>
                      <div className="flex text-sm text-gray-600">
                        <label
                          htmlFor="file-upload"
                          className=" bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500"
                        >
                          <span>
                            Upload a file ({selectedFile && selectedFile.name}){" "}
                            <font color="grey"> or drag and drop</font>
                          </span>
                          <input
                            onChange={changeHandler}
                            id="file-upload"
                            name="file-upload"
                            type="file"
                            class="file"
                            data-browse-on-zone-click="true"
                            data-show-upload="false"
                            multiple
                            class="cursor-pointer relative block opacity-0 w-full h-full p-20 z-50"
                          />
                        </label>
                      </div>
                      <p className="text-xs text-gray-500">
                        PNG, JPG, GIF up to 10MB
                      </p>
                    </div>
                  </div>
                </div>

                <div className="col-span-3 row-span-3 sm:col-span-3">
                  <label className="block text-sm font-medium text-gray-700">
                    Preview
                  </label>

                  <div className="mt-1 flex justify-center rounded-md">
                    <img
                      className=" bg-cover h-80 w-full rounded-md"
                      src={row.moralisFile.url}
                      alt="Image Preview"
                    />
                  </div>
                </div>
              </div>

              <div className="grid grid-cols-6 gap-4">
                <div className="col-span-2 sm:col-span-2">
                  <label
                    htmlFor="email"
                    className="block text-sm font-medium text-gray-700"
                  >
                    GST Rate
                    <font color="red"> *</font>
                  </label>
                  <div className="mt-1 flex rounded-md shadow-sm">
                    <div className="relative flex items-stretch flex-grow focus-within:z-10">
                      <input
                        onChange={(e) => setGST(e.target.value)}
                        type="number"
                        name="GST"
                        id="GST"
                        className="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300"
                        placeholder={`${row.GST}`}
                        value={GST}
                      />
                    </div>
                    <lable className="-ml-px relative inline-flex items-center space-x-2 px-4 py-2 border border-gray-300 text-sm font-medium rounded-r-md text-gray-700 bg-gray-50 hover:bg-gray-100 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
                      %
                    </lable>
                  </div>
                </div>

                <div className="col-span-2 sm:col-span-2">
                  <div>
                    <label
                      htmlFor="email"
                      className="block text-sm font-medium text-gray-700"
                    >
                      Starting Bid
                      <font color="red"> *</font>
                    </label>
                  </div>
                  <div className="mt-1 flex rounded-md shadow-sm">
                    <label className="-ml-px relative inline-flex items-center space-x-2 px-4 py-2 border border-gray-300 text-sm font-medium rounded-none rounded-l-md text-gray-700 bg-gray-50 hover:bg-gray-100 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
                      ETH
                    </label>
                    <div className="relative flex items-stretch flex-grow focus-within:z-10">
                      <input
                        onChange={(e) => setStartingBid(e.target.value)}
                        type="number"
                        name="starting bid"
                        id="starting bid"
                        className="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-r-md sm:text-sm border-gray-300"
                        placeholder={`${row.startingBid}`}
                        value={startingBid}
                      />
                    </div>
                  </div>
                </div>

                <div className="col-span-2 sm:col-span-2">
                  <label
                    htmlFor="location"
                    className="block text-sm font-medium text-gray-700"
                  >
                    Buyer's Premium
                    <font color="red"> *</font>
                  </label>
                  <input
                    type="number"
                    onChange={(e) => setBuyerPremium(e.target.value)}
                    id="buyerPremium"
                    name="buyerPremium"
                    className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
                    placeholder={`${row.buyerPremium}`}
                    defaultvalue = {row.buyerPremium}
                    Value={buyerPremium}
                  />
                </div>
              </div>

              <div className="grid grid-cols-6 gap-4">
                <div className="col-span-2 sm:col-span-2">
                  <label
                    htmlFor="email"
                    className="block text-sm font-medium text-gray-700"
                  >
                    Reward
                    <font color="red"> *</font>
                  </label>
                  <div className="mt-1 flex rounded-md shadow-sm">
                    <div className="relative flex items-stretch flex-grow focus-within:z-10">
                      <input
                        onChange={(e) => setReward(e.target.value)}
                        type="number"
                        name="reward"
                        id="reward"
                        className="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300"
                        placeholder={`${row.reward}`}
                        value={reward}
                      />
                    </div>
                    <lable className="-ml-px relative inline-flex items-center space-x-2 px-4 py-2 border border-gray-300 text-sm font-medium rounded-r-md text-gray-700 bg-gray-50 hover:bg-gray-100 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
                      %
                    </lable>
                  </div>
                </div>

                <div className="col-span-2 sm:col-span-2">
                  <label
                    htmlFor="email"
                    className="block text-sm font-medium text-gray-700"
                  >
                    Reserve
                  </label>
                  <div className="mt-1 flex rounded-md shadow-sm">
                    <label className="-ml-px relative inline-flex items-center space-x-2 px-4 py-2 border border-gray-300 text-sm font-medium rounded-none rounded-l-md text-gray-700 bg-gray-50 hover:bg-gray-100 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
                      ETH
                    </label>
                    <div className="relative flex items-stretch flex-grow focus-within:z-10">
                      <input
                        onChange={(e) => setReserve(e.target.value)}
                        type="number"
                        name="reserve"
                        id="reserve"
                        className="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-r-md sm:text-sm border-gray-300"
                        placeholder={`${row.reserve}`}
                        value={reserve}
                      />
                    </div>
                  </div>
                </div>

                <div className="col-span-2 sm:col-span-2">
                  <label
                    htmlFor="isActive"
                    className="block text-sm font-medium text-gray-700"
                  >
                    Active
                  </label>
                  <select
                    id="isActive"
                    name="isActive"
                    className={classNames}
                    onChange={(e) => isActiveHandeler()}
                    placeholder={`${row.isActive}`}
                    className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
                  >
                    <option>NO</option>
                    <option>YES</option>
                  </select>
                </div>
              </div>

              <div className="grid grid-cols-6 gap-4">
                <div className="col-span-2 sm:col-span-2">
                  <Switch.Group
                    as="div"
                    className="flex items-center justify-between mr-20"
                  >
                    <span className="flex-grow flex flex-col">
                      <Switch.Label
                        as="span"
                        className="text-sm font-medium text-gray-900"
                        passive
                      >
                        Show in Most Viewed
                      </Switch.Label>
                    </span>
                    {isFirstMostview && (
                      <Switch
                        onChange={isMostViewHandeler}
                        className={classNames(
                          row.isMostView ? "bg-indigo-600" : "bg-gray-200",
                          "relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                        )}
                      >
                        <span
                          aria-hidden="true"
                          className={classNames(
                            row.isMostView ? "translate-x-5" : "translate-x-0",
                            "pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
                          )}
                        />
                      </Switch>
                    )}

                    {!isFirstMostview && (
                      <Switch
                        onChange={isMostViewHandeler}
                        className={classNames(
                          isMostView ? "bg-indigo-600" : "bg-gray-200",
                          "relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                        )}
                      >
                        <span
                          aria-hidden="true"
                          className={classNames(
                            isMostView ? "translate-x-5" : "translate-x-0",
                            "pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
                          )}
                        />
                      </Switch>
                    )}
                  </Switch.Group>
                </div>

                <div className="col-span-2 sm:col-span-2">
                  <Switch.Group
                    as="div"
                    className="flex items-center justify-between mr-20"
                  >
                    <span className="flex-grow flex flex-col">
                      <Switch.Label
                        as="span"
                        className="text-sm font-medium text-gray-900"
                        passive
                      >
                        Show in What's Hot
                      </Switch.Label>
                    </span>
                    {isFirstHot && (
                      <Switch
                        onChange={isHotHandeler}
                        className={classNames(
                          row.isHot ? "bg-indigo-600" : "bg-gray-200",
                          "relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                        )}
                      >
                        <span
                          aria-hidden="true"
                          className={classNames(
                            row.isHot ? "translate-x-5" : "translate-x-0",
                            "pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
                          )}
                        />
                      </Switch>
                    )}

                    {!isFirstHot && (
                      <Switch
                        onChange={isHotHandeler}
                        className={classNames(
                          isHot ? "bg-indigo-600" : "bg-gray-200",
                          "relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                        )}
                      >
                        <span
                          aria-hidden="true"
                          className={classNames(
                            isHot ? "translate-x-5" : "translate-x-0",
                            "pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
                          )}
                        />
                      </Switch>
                    )}
                  </Switch.Group>
                </div>

                <div className="col-span-2 sm:col-span-2">
                  <Switch.Group
                    as="div"
                    className="flex items-center justify-between mr-20"
                  >
                    <span className="flex-grow flex flex-col">
                      <Switch.Label
                        as="span"
                        className="text-sm font-medium text-gray-900"
                        passive
                      >
                        Show in Closing Soon
                      </Switch.Label>
                    </span>
                    {isFirstClosingSoon && (
                      <Switch
                        onChange={isClosingSoonHandeler}
                        className={classNames(
                          row.isClosingSoon ? "bg-indigo-600" : "bg-gray-200",
                          "relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                        )}
                      >
                        <span
                          aria-hidden="true"
                          className={classNames(
                            row.isClosingSoon
                              ? "translate-x-5"
                              : "translate-x-0",
                            "pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
                          )}
                        />
                      </Switch>
                    )}

                    {!isFirstClosingSoon && (
                      <Switch
                        onChange={isClosingSoonHandeler}
                        className={classNames(
                          isClosingSoon ? "bg-indigo-600" : "bg-gray-200",
                          "relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                        )}
                      >
                        <span
                          aria-hidden="true"
                          className={classNames(
                            isClosingSoon ? "translate-x-5" : "translate-x-0",
                            "pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
                          )}
                        />
                      </Switch>
                    )}
                  </Switch.Group>
                </div>
              </div>

              <div className="px-4 py-3 bg-gray-50 text-right sm:px-6">
                <button
                  onClick={() => router.back()}
                  type="submit"
                  className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                >
                  Edit
                </button>
              </div>
            </div>
          </div>
        ))}
      </form>
    </div>
  );
}

itemDetail.layout = "admin";
1 Like
#4

We have recognised the issue, however, we will get back to you with the best approach in a while. Thank you for your patience! :slight_smile:

1 Like
#5

Hi @Mohammad,

moralisFile is not saved, only created locally. So, we have to go ahead and save it in Moralis. So that’s what the error is saying, you can only save a file to an object, if that file has been saved to moralis.

Thus, We have to use the useMoralisFile hook to save the file first.

const {  saveFile } = useMoralisFile();

//----------------------------------
if (selectedFile) {
      //save the file onto Moralis
      const moralisFile = await saveFile(selectedFile.name, selectedFile, {throwOnError: true});
       if(moralisFile){
           // assign it to object property
            save({objectId: id, moralisFile: moralisFile }); 
        }
    }

This way you can save the file successfully. Let me know if it works. :slight_smile:

1 Like
#6

Thank you very much Malik.

It works perfectly fine!!!

Many thanks to all members of Moralis community :star_struck:

1 Like