dropFunction.js

  const _onDrop = async (files) => {
    try {
      setProgressFiles(files);
      setError(null);
      for (const file of files) {
        const uploaded = await dispatch(uploadFile(file, true, savePath));
        setProgressFiles((prev) =>
          prev.filter((f) => f.upload_id !== file.upload_id)
        );
        if (uploaded) {
          onUploaded(uploaded);
        }
      }
    } catch (err) {
      setProgressFiles([]);
      const msg = err.message || t("media:upload_err");
      setError(msg);
    }
  };

PatchProduct.js

export const patchQuotationProduct = async (id: number, body: Partial<QuotationProduct>) => {
  const allowedToPatch = ["designer_files", "sort_order"] as Array<keyof QuotationProduct>;
  const toPatch = {} as Record<string, any>;
  for (const k in body) {
    const key = k as keyof QuotationProduct;
    if (allowedToPatch.includes(key)) {
      const value = body[key];
      if (value instanceof Array) {
        toPatch[key] = value.join(",");
      } else {
        toPatch[key] = body[key];
      }
    }
  }

  const [quot, _q] = await db.query(
    `UPDATE quotation_products SET ? WHERE quotation_product_id = '${id}' `,
    toPatch
  );

  if (toPatch.hasOwnProperty("designer_files")) {
    toPatch.designer_files = body.designer_files;
  }

  return toPatch;
};

ReduxUpload.js

export const uploadFile = (file, direct = false, path) => {
  return async (dispatch, getState) => {
    try {
      const { media } = getState();
      const endpoint = direct ? "dupload" : "upload";
      
      const endpath = path || media.path;
     
      const url = `media/${endpoint}?path=${endpath}`;
      
      const data = new FormData();
      data.append("file", file);
   
      const res = await axios.post(url, data, {
        onUploadProgress: (progress) => {
          const { total, loaded } = progress;
          const totalSizeInMB = total / 1000000;
          const loadedSizeInMB = loaded / 1000000;
          const uploadPercentage = (loadedSizeInMB / totalSizeInMB) * 100;
          dispatch(onProgress(uploadPercentage, file.upload_id));
        },
      });
      if (direct) {
        return res.data.data;
      } else {
        dispatch({
          type: actionTypes.FILE_UPLOADED,
          file: res.data.data,
          upload_id: file.upload_id,
        });
      }
    } catch (err) {
      const error = err.response ? err.response.data : err;
      dispatch(setErrors(error));
      dispatch({
        type: actionTypes.UPLOADED_ERROR,
        upload_id: file.upload_id,
      });
      // throw error;
      const msg = error.message || <Ttext ns="media" text="file_load_err" />;
      dispatch(fireSnake("error", msg));
    }
  };
};

UploadFileFunction.js

export const directUpload = async (
  req: Request,
  res: Response,
  next: NextFunction
) => {
  
  try {
    const file = req.file;
    if (!file) {
      throw new ErrorResponse(422, i18next.t("filesystem:upload_err"));
    }
    const { ext } = path.parse(file.path);
    const isImg = Media.isImage(file);
    file.path = file.path.replace(/\\/g, "/");
    file.fullpath = global.serverHost + "/" + file.path;
    console.log(global.serverHost + "/" + file.path)
    res.status(201).json({ success: true, data: { ...file, ext, isImg } });
  } catch (err) {
    next(err);
  }
};