-1

Is it possible to have a file upload work in React only without Node? I say this because every single article I read, node is involved. All I want to do is for a user to be able to upload a picture to my react app (filling in a simple form), and when they submit that form, a new post is created along with the picture they uploaded. I don't need the post to persist, this is frontend only. Is it possible to do this without node?

5ecured
  • 181
  • 10
  • 1
    What do you mean "to your react app"? Either the app runs in their browser, in which case there is no upload, you just load an image from disk using a file input, or your app runs on a server and uploads need to be processed by that server (whether that's node, or python, or apache, or ISS, or [etc] is irrelevant). – Mike 'Pomax' Kamermans Oct 04 '22 at 22:24
  • Sorry if unclear. Yes, the app runs in their browser. Then, what I want is for them to be able to upload an image, and submit that form, and see their uploaded image displayed there. Of course, this will all disappear upon refresh. Is it possible to do this? – 5ecured Oct 04 '22 at 22:48
  • What do you mean "submit the form"? A form submission is a POST to a server, and it sounds like you don't want to do that at all, but just use the form as a way to trigger a file event. You don't need `
    ` for that, just have an input with `type=file` and handle the "the user has picked a filed" (lots of good SO answers for that already).
     – Mike 'Pomax' Kamermans Oct 04 '22 at 23:22
  • My app has a form submission but there is no server involved, it is all frontend. Its a simple form, for example one that lets you add your name and address, thats it. I just want to add an image as well. I already have , but I am not sure what to do after that – 5ecured Oct 05 '22 at 01:06
  • So you don't want to submit the form. E.g. https://stackoverflow.com/questions/39809943/react-preventing-form-submission – Mike 'Pomax' Kamermans Oct 05 '22 at 04:25

1 Answers1

0

You can make this to work but you will need AWS or other Image upload services like Cloudinary.

You can create an account with AWS, create a bucket and use their SDK to push the image to them and they will return a URL.

Checkout this article though: https://javascript.plainenglish.io/how-to-upload-files-to-aws-s3-in-react-591e533d615e

ekpono
  • 172
  • 4
  • Thanks for your response. I am ok with the image disappearing after refresh. Do I still need AWS or Cloudinary in this case? – 5ecured Oct 04 '22 at 22:54