upload images in MERN stack

Question

I want to save the images into the database uploaded from the React.js but it is not getting uploaded. It works fine in the postman but not in the React.js.

In the database I am saving only the file's path not the full data [Array] of the file.

The state: let [preview_image, setPreview_Image] = useState("")

The file handler function:

const uploadFileHandler = async (e) => {
    e.preventDefault();
    const file = e.target.files[0];   //The file logs the data about the file
    let formData = new FormData();
    let image = formData.append("preview_image", file);   //Here image logs the undefined in the console.
   // So, basically it is not appending the file-data to the formData
    setUploading(true);

    try {
      const config = {
        url: "http://localhost:8000/v1/template/create",
        method: "POST",
        data: formData,
        headers: {
          "Content-Type": "multipart/form-data",
          "x-access-token": adminInfo.data.JWToken,
        },
      };
      const { data } = await axios(config).catch(console.error);
      setPreview_Image(data);
      setUploading(false);
    } catch (error) {
      console.trace(error);
      setUploading(false);
    }
  };

The file uploader:

<Form.Group controlId="preview_image">
    <Form.Label>Image</Form.Label>
    <Form.Control
      type="text"
      placeholder="Upload Image url"
      value={preview_image}
      onChange={(e) => setPreview_Image(e.target.value)}
    ></Form.Control>
     <Form.Control
      type="file"
      label="Choose file"
      onChange={uploadFileHandler}
     ></Form.Control>
  </Form.Group>

The error:

The template-creator action:

export const createtemplate = (templateData) => async (dispatch, getState) => {
  try {
    dispatch({ type: TEMPLATE_CREATE_REQUEST });

    const {
      adminLogin: { adminInfo },
    } = getState();

    const config = {
      url: "http://localhost:8000/v1/template/create",
      method: "POST",
      data: templateData,
      headers: {
        "Content-Type": "application/json",
        "x-access-token": adminInfo.data.JWToken,
      },
    };
    const { data } = await axios(config).catch(console.error);

    dispatch({ type: TEMPLATE_CREATE_SUCCESS, payload: data });
  } catch (error) {
    dispatch({
      type: TEMPLATE_CREATE_FAILURE,
      payload:
        error.response && error.response.data.message
          ? error.response.data.message
          : error.message,
    });
  }
};

The request and response from the postman

Not sure why I am getting the error.

The front-end:

The templateScreen where I am calling the createtemplate action:

const submitHandler = (e) => {
    e.preventDefault();
    dispatch(
      createTemplate({
        name: templateName,
        package_ids: selectedPackage,
        html_template: htmlTemplate,
        required_variables: variables,
        preview_image: preview_image,
      })
    );
  };

BACKEND CONFIGURATION

The template creator service:

exports.createTemplate = async (req) => {
  // HERE req.files logs undefined after I click on the add template details button and req.body logs all the data.
  const name = req.body.name;
  const package_ids = req.body.package_ids;
  const html_template = req.body.html_template;
  const required_variables = req.body.required_variables;
  const preview_image = req.files.preview_image;

  const imagePath = preview_image.map((image) => image.path);

  const template = new Template({
    name,
    package_ids,
    html_template,
    required_variables,
    preview_image: imagePath.toString(),
  });
  await template.save();
  return template;
};

The controller file where the createTemplate service is being called

exports.createTemplate = catchAsync(async (req, res) => {
  try {
    const template = await templateService.createTemplate(req);
    return res.succeed(template, "Template created successfully");
  } catch (error) {
    console.trace(error.toJSON());
    return res.failed(500, "Internal Server Error", error);
  }
});

What it basically does is when I click on choose file and clicks on the files to upload it dispatches the create template action (that's what I think). Here it logs the files details and also responds with the following error from the backend's controller file:

Answer 1

Another way is to convert image to base64 from the client and send the base64 string to the server.

The function to convert image file to base64 is

const toBase64 = file => new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
});


async function submit(){

// Testing the above code
const file = document.querySelector('#myfile').files[0];
const base64String = await toBase64(file);


const image = document.querySelector("#preview");
image.src = base64String;

const detail = document.querySelector("#detail");
detail.innerText = base64String;


}

<input  type="file"  id="myfile"/>

<button onclick="submit(this)"> Submit </button>

<div style="margin: 20px 0 20px 20px">
  <img id="preview" alt="the pic will come here" width="400" />
</div>

<p id="detail" style="width: 500px; word-wrap: break-word;"> </p>

The the server should take care for the rest, convert back into file or you can save it in the database as text.

In the image if you put src to that string it will work.

With this method you can always send the data as json in the body.

Answer 2

In earlier versions of ExpressJS, files can be accessed easily as part of the request object using req.files. In recent versions, this property is no longer available on the request object. Now, you can use multer, a separate package, to access uploaded files. instantiate it by telling where to store all uploaded files And add it as a middleware

const fileUpload = require('../middleware/file-upload');

router.post( '/', fileUpload.single('image'), postControllers.createPost );

And in the submithandler your formdata is undefined when calling the data , let image = formData.append("preview_image", file); It should be assigned too the formData directly : formData.append("preview_image", file)

Sorry if i come across as a jerk, new too answering just practising to help

Answer 3

uploadFileHandler callback will be invoked when the user selects the file. It'll call the API with the available form data. Is that the expected behaviour?

What I can see from your error logs:

• API validates the form data. name and html_template is required.
• Frontend does not do a form validation for name and html_template fields

Make sure you have values for above fields if you want to call the API as soon as user select the file.