1

I am trying to progressively enhance a php project without jquery and minimal javascript if possible. There is an upload page with an html form and a file upload for images. There is also an input for remote image urls. If the user puts an image url in the input I use js to create a blob and append it to the form. This works fine when using javascript to handle the form request and response. But I would like to append the blob to the form without needing to use XMLHttpRequest so php can handle the redirect. I do not want javascript to handle the redirect because I'll need to determine if javascript is enabled and I simply want to enhance the form and not complicate the backend logic.

I use curl on the backend for the same functionality but I would like to do it on the client side if javascript is available.

I've reviewed https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects

I've tried making the request synchronous instead of asynchronous to see if if I could get the php redirect to work but this is deprecated.

  • So far my research suggests there is no way to append anything to a form without submitting the form with XMLHttpRequest.

  • Using XMLHttpRequest seemingly necessitates javascript handling the redirect which complicates how I handle the response in php.

jdf
  • 73
  • 7
  • So if I understand it correctly, you are interpreting a field client side, and the result if successful is an image? If so, you should be able to just create a new input on the form, probably of type text, and just base64 encode the image contents, unless I’m misunderstanding something? A file represents something on the user's computer, everything else is just binary data (even text, but the base64 gets around encoding issues) – Chris Haas May 20 '21 at 03:16
  • Ok, that sounds promising. The form has an input for remote urls so the client can bypass saving the image to their computer first. So your saying use js to create a new form element and set the value to the base64 value? Is there a simple way to base64 encode a blob or url? Not sure how to handle that in php. – jdf May 20 '21 at 04:54
  • What I mean by not sure how to handle that in php is the file upload function expects a blob. – jdf May 20 '21 at 05:06
  • 1
    Just to be clear, your goal is to have a traditional web form make a standard HTTP POST, no XHR? The JS part is just to download client side data, possibly to preview the images before saving? If so, [here’s a way to base64 encode an ArrayBuffer](https://stackoverflow.com/a/7372816/231316). Server side, you won’t have files, just POST data that you’ll have to decode. Base64 will also increase the payload size by 33%. – Chris Haas May 20 '21 at 11:37
  • 1
    Honestly, I respect what you are doing, but I’d go POST in legacy mode, XHR with FormData for everyone else (which will be 99.999% anyway). Server side, you might have to abstract away your logic a bit, but in general both paths should share the bulk of the logic. The server can still send the redirect, too, you just have to honor it in JS with a window.location change – Chris Haas May 20 '21 at 11:41

0 Answers0