I am uploading images to cloudinary, and trying to use streamifier so I can read the response in order to get the cloudinary image URL in order to save this to the post collection in MongoDB.

I am using this guide via cloudinarys website - https://cloudinary.com/blog/node_js_file_upload_to_a_local_server_or_to_the_cloud

This is the response I am trying to receive

Backend Code

Front end code;

function NewPost() {
  const [content, setContent] = useState("");
  const [videoUrl, setVideoUrl] = useState("");
  const [author, setAuthor] = useState([]);
  const [userId, setUserId] = useState("");
  const [show, setShow] = useState(false);
  const [image, setImage] = useState(null);
  const [file, setFile] = useState(null);
  const [imagePost, setImagePost] = useState(null);
  console.log(image)
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  const user = useSelector((state) => state.currentUser.user);
  const currentUserId = useSelector(
    (state) => state.currentUser.user[0].data.currentUser._id
  );
  console.log("currentUserId: ", currentUserId);
  console.log(user);
  console.log(user[0].data.currentUser.profileImage);
  console.log(image)


  const postAuthor = useSelector((state) => state.currentUser.user);

  const submitFile = async (id) => {
    try {
      let formData = new FormData();

      formData.append("image", image);
      let response = await fetch(`http://localhost:5000/timeline/${id}/image`, {
        body: formData,
        method: "POST"
      })
    } catch (error) {
      console.log(error);
    }
  }

  
  const TargetFile = (e) => {
    if (e.target && e.target.files[0]) {
      setImage(e.target.files[0]);
      setImagePost(e.target.files[0]);
    }
  };

  const handleSubmit = async (e) => {
    try {
      e.preventDefault();
      const post = { videoUrl, content, userId, image };

      const response = await fetch("http://localhost:5000/timeline/", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(post),
      })
      if (response.ok) {
        window.location.reload(false);
  
      }
      
      if (TargetFile) {
        let res = await response.json();
        await submitFile(res.file);
      }
    } catch (error) {
      console.log(error.message)
    }

And the error I am receiving

Before the error I was getting was 'must be of type String, Object or Uni8Array', no changes yet a different error message, really need help.

If I haven't included something, please reply and let me know. A lot of unanswered questions on stack overflow for some reason. Please let me know why.

EDIT - LATEST ERROR MESSAGE: enter image description here

CodePudding user response：

Based on the Cloudinary documentation you linked, the method they indicate to upload a file is cloudinary.uploader.upload_stream while your backend code uses cloudinary.uploader.upload.

upload_stream apparently takes a callback function as argument but upload must accept a string representing the path of the image (if I read the error message correctly).

Note that using the stacktrace, you can see that the error comes from the line 65 of your src/routes/posts/index.js file. That's a good starting point for the analysis next time... :)

CodePudding user response：

That blog may be out of date as if you go to Cloudinary's official Node.js page, streamifier is no longer relevant.

See: https://cloudinary.com/documentation/node_image_and_video_upload#node_js_image_upload

I would recommend try and set up per https://cloudinary.com/documentation/node_integration#installation_and_setup and use

cloudinary.v2.uploader.upload("/home/my_image.jpg", 
    function(error, result) {console.log(result, error)});