Having trouble writing form input to a seperate file in Javascript, Node.js, React.js, Next.js

I have been having a tough time writing form input to a seperate file in Javascript. I posted a repo with a demo I set up to show the problem I have been having! Feel free to take a look. https://github.com/projectmikey/projectmikey-cant-write-to-api-dir-stackoverflow

The app works fine locally from both “next dev” and “next start” when I end up at a http://localhost:3000 url.

My api at pages/api/demos/index.js responds with the body from the form’s textarea at the pages/new page and writes it as a new file at /api/newfiles/file (which becomes essentially a script file that doesnt have an extension.) This is perfect! however, I cant seem to get the file written to the /api/newfiles folder (or any other folder for that matter with fs.writeFileSync) when I am deployed live to Vercel.

I was also hoping to use shell-js to fire off a shell script (script.sh) So with this not working I have really been banging my head around trying to figure it out!

I am not an expert by any means at debugging the console log, but if I had to guess i would say it looks like there is http 400 error that is causing the problem while deployed with Vercel.

here are the key files

pages/api/demos/index.js

import dbConnect from '../../../lib/dbConnect'
import Demo from '../../../models/Demo'
import fs from 'fs'
import shell from "shelljs";

export default async function handler(req, res) {
  const {
    method,
    body,
  } = req

  await dbConnect()

  switch (method) {
    case 'GET':
      try {
        const demos = await Demo.find({})
        res.status(200).json({ success: true, data: demos })
      } catch (error) {
        res.status(400).json({ success: false })
      }
      break
    case 'POST':
      try {
        fs.writeFileSync('api/newfiles/file', body.fileBody);
        shell.exec('chmod +x ./script.sh && ./script.sh');
        const demo = await Demo.create(
          req.body
        )
        res.status(201).json({ success: true, data: demo })
      } catch (error) {
        res.status(400).json({ success: false })
      }
      break
    default:
      res.status(400).json({ success: false })
      break
  }
}

pages/api/demos/[id].js

import dbConnect from '../../../lib/dbConnect'
import Demo from '../../../models/Demo'

export default async function handler(req, res) {
  const {
    query: { id },
    method,
  } = req

  await dbConnect()

  switch (method) {
    case 'GET' /* Get a model by its ID */:
      try {
        const demo = await Demo.findById(id)
        if (!demo) {
          return res.status(400).json({ success: false })
        }
        res.status(200).json({ success: true, data: demo })
      } catch (error) {
        res.status(400).json({ success: false })
      }
      break

    case 'PUT' /* Edit a model by its ID */:
      try {
        const demo = await Demo.findByIdAndUpdate(id, req.body, {
          new: true,
          runValidators: true,
        })
        if (!demo) {
          return res.status(400).json({ success: false })
        }
        res.status(200).json({ success: true, data: demo })
      } catch (error) {
        res.status(400).json({ success: false })
      }
      break

    case 'DELETE' /* Delete a model by its ID */:
      try {
        const deletedDemo = await Demo.deleteOne({ _id: id })
        if (!deletedDemo) {
          return res.status(400).json({ success: false })
        }
        res.status(200).json({ success: true, data: {} })
      } catch (error) {
        res.status(400).json({ success: false })
      }
      break

    default:
      res.status(400).json({ success: false })
      break
  }
}

pages/new

import Form from '../components/Form'

const New = () => {
  const demoForm = {
    fileBody: [],
  }

  return <Form formId="add-demo-form" demoForm={demoForm} />
}

export default New

components/Form.js

import { useState } from 'react'
import { useRouter } from 'next/router'
import { mutate } from 'swr'

const Form = ({ formId, demoForm, forNewDemo = true }) => {
  const router = useRouter()
  const contentType = 'application/json'
  const [errors, setErrors] = useState({})
  const [message, setMessage] = useState('')

  const [form, setForm] = useState({
    fileBody: demoForm.fileBody,
  })

  /* The PUT method edits an existing entry in the mongodb database. */
  const putData = async (form) => {
    const { id } = router.query

    try {
      const res = await fetch(`/api/demos/${id}`, {
        method: 'PUT',
        headers: {
          Accept: contentType,
          'Content-Type': contentType,
        },
        body: JSON.stringify(form),
      })

      // Throw error with status code in case Fetch API req failed
      if (!res.ok) {
        throw new Error(res.status)
      }

      const { data } = await res.json()

      mutate(`/api/demos/${id}`, data, false) // Update the local data without a revalidation
      router.push('/')
    } catch (error) {
      setMessage('Failed to update')
    }
  }

  /* The POST method adds a new entry in the mongodb database. */
  const postData = async (form) => {
    try {
      const res = await fetch('/api/demos', {
        method: 'POST',
        headers: {
          Accept: contentType,
          'Content-Type': contentType,
        },
        body: JSON.stringify(form),
      })

      // Throw error with status code in case Fetch API req failed
      if (!res.ok) {
        throw new Error(res.status)
      }

      router.push('/')
    } catch (error) {
      setMessage('')
    }
  }

  const handleChange = (e) => {
    const target = e.target
    const value =
      target.name === 'poddy_trained' ? target.checked : target.value
    const name = target.name

    setForm({
      ...form,
      [name]: value,
    })
  }

  /* Makes sure demo info is filled for demo name, owner name, species, and image url*/
  const formValidate = () => {
    let err = {}
    if (!form.fileBody) err.fileBody = 'Function is required'
    return err
  }

  const handleSubmit = (e) => {
    e.preventDefault()
    const errs = formValidate()
    if (Object.keys(errs).length === 0) {
      forNewDemo ? postData(form) : putData(form)
    } else {
      setErrors({ errs })
    }
  }

  return (
    <>
      <form id={formId} onSubmit={handleSubmit}>
        <textarea
          name="fileBody"
          value={form.fileBody}
          onChange={handleChange}
        />
        <button type="submit" className="btn">
          Submit
        </button>
      </form>
      <div>
        {Object.keys(errors).map((err, index) => (
          <li key={index}>{err}</li>
        ))}
      </div>
    </>
  )
}

export default Form

script.sh

#!/bin/bash
set -euo pipefail

echo "new file contents of /api/newfiles/file : $(cat ./api/newfiles/file)"

and here is the repo posted again https://github.com/projectmikey/projectmikey-cant-write-to-api-dir-stackoverflow

thanks in advances for any help y’all…

Answer

I don’t think that you can write on vercels servers