Basic httpPost() Image/Data to Server

p5.js Coding Questions
1

Ive been pulling my hair out for weeks trying to accomplish something that seemed pretty straight forward…

I want to make a javascript plug in with p5.js that resembles a t-shirt designer. I want a user to be able to upload an image, and move it on the canvas. After that I want the user to be able to save that image and position to my server (specifically a wordpress website).

I have a canvas that a user can drag and drop an image into, and it works well! Now, I want to save the image to a folder on my server.

Now, before you simply write “httpPost()” and leave this topic (as has been done in many topics prior), I need additional help! I’m really looking for someone to ELI5 (explain it to me like I’m 5). There are no real good examples of how to use httpPost(), and if there are I’m completely missing it.

httpPost(path, [datatype], [data], [callback], [errorCallback])

I’m also missing the basic knowledge of what should happen. Right now, I just imagine pointing httpPost() to a .php script [datatype] and sending the file.data from the drop() event in [data] that will then save my file to my server (after doing some security checks)? Is that the right mentality? Since this is an image file, should I be leaving [datatype] blank, since it is not “json”, “jsonp”, “xml”, or “text”?

Thanks in advance! I really appreciate the support, being a complete beginner to web development and p5.js.

1 Like
2

That is very important to consider but not as easy to implement. My suggestion is that you don’t try to implement your own image storage server. Instead, use available resources out there like ingur, imageShack, TinyPic, PhotoBucket, etc.
Or you could use dropbox, googledrive…
Other options is to use a bucket in aws or gcp (I guess azure should have something similar)

The concept is this: You use the provided API points of your chosen service. Let’s say you use GCP. GCP provides a the Google Cloud Storage JSON API that allows you to load an image into a bucket. In return, the operation could return a link where you can access this object (your image). You send this link to your server via another http request. In the server side, you store this link using your favorite storage method: a csv file or if you have a db setup, you can added as an entry in your custom_shirts table.

Notice that managing videos and images is sort of expensive. If your project (number of request to storage server, data size, etc) is of small scale, then you should be able to use any of the free services I mentioned above. Some services will allow you to store images for a limited duration and some will limit how many images you can save. They also limit how many request you can make to their servers, so there are few things to consider. If you have a larger number of request to your storage service, then you should consider paying for those services. In return, you will get larger storage quotas, less restriction accessing your data and support. I recommend GCP as they have a Free Tier that could be enough for you. Check the Always Free Products >> Google Cloud Storage for details.

For the code to upload an image to GCP, check this link.

If you decide to go with GCP, then let me know and I could try implementing a small demo (more like in the weekend). I prefer if you get started as the links I provided have good documentation with sample code. Notice you can also use AWS as they also have buckets. They have the same concept: you upload the image and in return, you get a link where anybody can access it (so to speak but depends on internal configuration).

As a final note, GCP requires you open an account with them and you will need a credit card. You won’t get charged if you stay within the free tier.

There is a bit of effort to get going using any of these services. If you decide to generate your own post request and handle it right in the server, it could still work and it will be sort of straight forward to do. However you will need to maintain the code and adapt it as your requirement changes. A service provider has already done this for you. I did a quick search and I found thse, for example:

  1. how to send image to server with http.post in javascript and store base64 in mongodb - Stack Overflow
  2. How to Upload Files to a Server with Plain JavaScript and PHP | Tania Rascia

Kf

4 Likes