MagicJS
mern.aiUniversityGitHub
  • Introduction to MagicJS
  • Why MagicJS?
  • Getting Started & Installation
  • Basic Guide
    • Create a new page using React
    • Navigate between pages
    • Create an API and integrate it with the frontend
    • Authenticate Users
      • Authorise based on Roles
    • Advanced State Management with useContent()
    • Perform CRUD Operations
    • Adding Realtime capabilities using socket
    • Handling file uploads and downloads
  • Advanced Guide
    • Understanding the concept of features in MagicJS
    • Using UI components & functions across multiple Magic Features
    • Advanced Routing of pages
    • Enable SSR
    • Access MongoDB
    • Styling pages using Tailwind CSS
  • Deploying
  • Update MagicJS
  • API References
    • Frontend
      • <LinkDisplay>
      • createSrc()
      • createUploader()
      • importUI()
      • loadConfig()
      • protected()
      • useParams()
      • useAxios()
      • useLogin()
      • useSocket()
      • useContent()
      • usePromise()
      • useNotification()
    • Backend
      • createBackendFunction()
      • data()
      • io()
      • ServerInstance()
      • utils
        • hash()
        • verifyHash()
        • initiateEmailVerification()
        • saveFileToUserUploads()
        • readFileFromUserUploads()
        • removeFileFromUserUploads()
        • assignRoleToUser()
        • unassignRoleFromUser()
        • findAllRolesByUser()
        • isUserInAnyRoles()
        • assignRoleToUser()
Powered by GitBook
On this page

Was this helpful?

  1. API References
  2. Frontend

createUploader()

createUploader is a function that simplifies file uploads for users.

Here is an example for uploading a file:

Frontend:

import { createUploader } from '@magicjs.dev/frontend';
import uploadServer from "./upload.server";

// The backend server function for handling file uploads
const { addFiles, upload, readyToUpload, uploadProgress, loading } = createUploader(uploadServer);

const handleUploadFile = () => {
  upload();
};

return (
  <div>
    <input
      type='file'
      onChange={(e) => {
        addFiles(e.target.files);
        // Adds selected files to the uploader instance
      }}
    />
    <button
      onClick={handleUploadFile}
      disabled={Boolean(readyToUpload) === false || loading === true}
    >
      {/* readyToUpload is a boolean variable; it becomes true if any images are selected,
      and false if none are chosen.
      The boolean variable loading becomes true while the API is in progress and turns false once the operation is complete. */}
      Upload
    </button>
    <div>{uploadProgress}</div>
    {/* The numeric variable uploadProgress indicates the progress of the upload,
    providing visibility into the ongoing upload process. */}
  </div>
);

Backend upload.server

import { createBackendFunction, createRequestContext, useFunctionContext, utils } from '@magicjs.dev/backend';

export default createBackendFunction(async function () {
  createRequestContext(this)
    .uploader()
    .onFile((info, file) => {
      // Will get the file information from the parameter info.
      utils.saveFileToUserUploads('/upload-path', 'imageName.jpeg', file);
    });
})
PreviouscreateSrc() NextimportUI()

Last updated 1 year ago

Was this helpful?

.

Click here to refer GitHub