0

Trying to display IMGs with React/JSX with Buffered/Binary data saved to my MongoDB/Mongoose database.

data set examples

i iterate over the data array with the IMG element looking like this:

<img src={`data:${item.img.contentType};base64,${item.img.data.data.toString("base64")}`} alt="" />

import React, { useState, useEffect } from "react";
import axios from "axios";

const FilesUpload = () => {
  const [allPics, setAllPics] = useState([]);

  useEffect(() => {
    const getPics = async () => {
      let res = await axios.get("http://localhost:8080/");
      setAllPics(res.data);
    };
    // query the server for all of the picture objects
    getPics();
  }, []);

  const [state, setState] = useState({});

  const handleChange = (e) => {
    e.preventDefault();
    setState(e.target.value);
    console.log(state);
  };

  return (
    <>
      <h1>upload an image</h1>
      <hr />
      <div>
        <form
          action="http://localhost:8080/"
          method="POST"
          encType="multipart/form-data"
        >
          <div>
            <label>Image Title</label>
            <input type="text" id="name" placeholder="Name" name="name" onChange={handleChange} value={state.name}/>
          </div>
          <div>
            <label htmlFor="desc">Image Description</label>
            <textarea id="desc" name="desc" rows="2" placeholder="Description"
              onChange={handleChange} value={state.desc}/>
          </div>
          <div>
            <label htmlFor="image">Upload Image</label>
            <input type="file" id="image" name="image" required />
          </div>
          <div>
            <button type="submit">Submit</button>
          </div>
        </form>
      </div>

      {allPics.length > 0 ? (
        <div>
          {allPics.map((item, index) => (
            <div key={index}>
              <div>
                <img src={`data:${item.img.contentType};base64,${item.img.data.data.toString("base64")}`} alt="" />
              </div>
            </div>
          ))}
        </div>
      ) : (
        <>
          <hr />
          <br />
          <h1>uploaded files</h1>
          <h5>Loading..</h5>
        </>
      )}
    </>
  );
};

export default FilesUpload;

but I always get ERR_INVALID_URL:

error msg from console

from similar threads on the net I've read that I need to take those comma-delimitated values and remove the comma which will give me the proper data. having a hard time figuring that out. any help would be great. thanks

troy
  • 93
  • 6
  • you should check here https://stackoverflow.com/questions/56769076/how-to-show-base64-image-in-react – Jatin Parmar May 07 '21 at 04:03
  • that link was of no help, but thank you for attempting to contribute. you'll see in the error image i posted above that the content-type is set: "data:image/png;base64,xxxxxxxx" – troy May 07 '21 at 04:59
  • write `${item.img.data.data}` instead of `${item.img.data.data.toString("base64")}` – Dhaval Darji May 07 '21 at 13:05
  • Or just try with `${item.img.data.data.toString()}` – Dhaval Darji May 07 '21 at 13:06
  • This was really helpful: [https://stackoverflow.com/questions/42395034/how-to-display-binary-data-as-image-in-react](https://stackoverflow.com/questions/42395034/how-to-display-binary-data-as-image-in-react) – Tolulope Durosinmi Sep 15 '21 at 12:36

1 Answers1

2

I was facing the same problem after saving image like this in my mongoose model and after many research I resolved this, hope this works for you also

const base64String = btoa(String.fromCharCode(...new Uint8Array(item.img.data.data)));

and in img tag put this -:

src={`data:image/${item?.img?.contentType};base64,${base64String}`}
Vikas gupta
  • 21
  • 2