Sending image file data from the front end to the backend

1
votes

is there a way I can send an image file from the front end to the backend? I need to upload the image selected in the form to the cloudinary cloud platform.

Accessing the file input with req.body does not help and gives me an error saying no such file or directory open.

If I add enctype="multipart/form-data", and then on my backend do a req.on('data', (data)=> {console.log(data.toString)}) and then perform an upload to cloudinary, it fails and gives me the following error: Error: Path must be a string without null bytes

This is my form: 

<form method="post" action="/submitArticle" enctype="multipart/form-data">
    <div class="file">
      <label class="file-label">
        <input class="file-input" type="file" name="image">
        <span class="file-cta">
          <span class="file-icon">
            <i class="fa fa-upload"></i>
          </span>
          <span class="file-label">
            Choose a file…
          </span>
        </span>
      </label>
    </div>
    <div class="field">
      <label class="title is-4">Title</label>
      <div class="control">
        <input class="input" name="title" type="text" placeholder="Give your story a title...">
      </div>
    </div>
    <div class="field">
      <label class="title is-4">Story</label>
      <div class="control">
        <textarea class="textarea" name="story" rows="7" placeholder="Tell your story here..."></textarea>
      </div>
    </div>
    <div class="field is-grouped is-grouped-right">
      <p class="control">
        <input class="button is-primary" type="submit">
        </input>
      </p>
    </div>
  </form>

Is there another way to send image data from the front end to the backend? Thanks in advance!!

2
node.jsfileimage-uploadingcloudinary

2 Answers

1
votes

If you want to upload to Cloudinary, maybe you should consider using Cloudinary Upload Widget.

The widget supports uploading images directly from the browser to Cloudinary storage, without involving your servers in the process.

0
votes

You can use third party library like Dropzone to upload image in the frontend and send it to the backend. Simple that's it